Прижимаем footer (подвал/футер) к низу экрана

2.03.2010. CSS, HTML, Дизайн

4

Достаточно часто при дизайне сайта появляется необходимость прижать футер к низу экрана. Есть множество способов это реализовать, вот один из них:

Вот наш HTML-файл. Футер в нем должен быть выненес за пределы основного содержимого.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
</link></head>
<body>
<div id="content">
Контент
</div>
<div id="clear"></div>
<div id="footer">
Ну а это наш подвал
</div>
</body>
</html>

Нам нужно загнать подвал вниз экрана. Напишем CSS для этой страницы:

html,body
{
margin:0;
padding:0;
color:#000;
background:#fff;
height:100%;
}
 
#content
{
position:relative;
margin:0 auto;
width:980px;
min-height: 100%;
height: auto !important; 
height: 100%;
background:#999;
margin-bottom:-50px;
}
 
 
.clear
{
clear:both;
}
 
#footer
{
background:red;
width:980px;
position:relative;
margin:0 auto;
height:50px;
}

Что мы здесь сделали?
Все очень просто. Мы задали высоту страницы без подвала равной 100% (это все, что находится в блоке с id=content). Затем мы сдвинули весь блок на 50px вверх, чтобы освободить место под подвал. После этого мы установили высоту подвала равной 50px. Теперь подвал будет прижат к нижнему краю, а до него будет растягиваться блок с контентом, в том числе и фон.
Вот и все. Подвал прижат к футеру. Как-нибудь потом напишу еще пару вариантов прижатия футера к подвалу.

Текст с тенью при помощи CSS

24.02.2010. CSS, Дизайн

0

Еще одно замечательное свойство CSS3 text-shadow. Оно позволяет создавать тень для текста.

Это свойство имеет 4 параметра:

Первый параметр отвечает за смещение тени по горизонтали. Положительное значение - смещение влево, а отрицательное - вправою

Следующий, второй параметр, указывает смещение по вертикали. Положительные значение - смещение вниз, отрицательное - наверх.

Третий параметр определяет размывание тени.

И последний параметр указывает на цвет тени.

Последние два параметра не обязательны.

Примеры:

text-shadow: 2px 2px 2px black;
text-shadow: 2px 2px 2px yellow;
text-shadow: 2px 2px 2px green;

Размытый текст:

style="text-shadow: 0px 0px 3px "

Текст с зеленым свечением:

style="text-shadow: 0px 0px 5px "

Также можно создавать двойную тень:

<div style="text-shadow: 2px 2px 4px #00F, 5px 5px 2px red;"> Текст с двойной тенью<span></div>

А вот, наример, текст с 25 тенями, в Firefox, Chrome, Konqueror отображается нормально, в Opera не правильно

текст с 25 тенями

Вот так быстро, просто и легко можно создавать красивые эффекты при написании текста

P.S. Хотите больше знать про Unix-системы? Тогда можете посмотреть бесплатные курсы Linux

Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги