Интересное применение каскадных таблиц css и html
В данной статье приводятся малоизвестные или малоиспользуемые приемы применения html и css, приводящие к интересным эффектам. Данная страничка постоянно обновляется и в нее добавляются разные эффекты, которые можно использовать при строительстве вашего сайта.
- Как выделить картинку, наведя на нее курсор?
- Как сделать красивое примечание?
- Как сделать автоматическую нумерацию вложенных списков?
- Как сделать графическое или анимированное подчеркивание у ссылок?
- Как прижать подвал к низу странички?
- Как сделать текст объемным?
- Как можно скрыть или показать какой-либо объект?
В. Как выделить картинку, наведя на нее курсор?
О. Одним из способов выделения элементов на страничке является их затенение или осветление. Рассмотрим действие фильтра осветления, применив его к картинке. Это можно выполнить с помощью правил css, применив фильтр alpha.
Применим следующие стили к картинке:
a img:hover {
filter:alpha(opacity=50); ..-opacity:0.5; opacity:0.8; -khtml-opacity:0.8;
}
Изменяя значение параметра opacity, можно добиваться разной степени осветления.
Добавив небольшой скрипт, позаимствованный на сайте HTMLWeb, в IE, если позволяет версия, картинку можно затемнять. Скрипт можно вставлять в любое место внутри тэга body.
<script language="JavaScript">
function g(c,w)
{
if (w==0) c.style.filter="light()";
if (w==0) c.filters.light.addAmbient(150,150,150,180);
else c.style.filter='';
}
</script>
В нужном месте вставляем код картинки...
<a src=""><IMG src="../../image/01.JPG" border=0 width=120 height=147 onMouseover="g(this,0)" onMouseout="g(this,1)" alt="Затенение картинки"></a>
и получаем результат:
Теперь, наведя курсор на картинку, мы изменяем ее свойство.
В. Как сделать красивое примечание?
О. Иногда, ну очень необходимо, выделить какое либо примечание. Сделаем красивое примечание с помощью правил css.
Создадим два класса для заглавия и для текста примечания:
.prim {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем границу снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как встроенный элемент */
background: red; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер шрифта */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Запрещены переносы текста */
color: #fff; /* Цвет текста */
}
.note {
border: solid 1px #634f36; /* Параметры рамки */
background: gold; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em 0; /* Значение отступов */
width: 50%; /* Ширина блока */
}
В нужном месте вставляем следующий код:
<p class="prim">Примечание</p>
<p class="note">Текст примечания</p>
Получилась такая красота:
Примечание
Текст примечания
В. Как сделать автоматическую нумерацию вложенных списков?
О. Автоматическую нумерацию вложенных списков одними средствами html сделать нельзя. А вот используя стили - то можно. Для этих целей служат атрибуты counter-reset, counter-increment и content.
Теперь ближе к делу. Предположим, что нам необходимо иметь список, состоящий из трех пунктов с подпунктами. Применяем следующие правила:
OL { counter-reset: list1; } /* Список первого уровня */
OL OL { counter-reset: list2; } /* Список второго уровня*/
OL LI:before { /* Список первого уровня */
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим значение в виде 1., 2.*/
}
OL OL LI:before { /* Список второго уровня */
counter-increment: list2; /* Увеличиваем значение счетчика */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение
типа 2.1, 2.2,... */
}
LI { list-style-type: none !important; /* Убираем нумерацию в браузерах Opera,
Safari, Firefox */
list-style-type: decimal; /* Оставляем нумерацию в браузере IE6 и ниже */
}
В нужном месте вставляем код списка.
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
В результате мы получаем эффект, на который и расчитывали.
К сожалению данный эффект не работает в IE до 7-й версии включительно.
В. Как сделать графическое или анимированное подчеркивание у ссылок?
О. Иногда пользователь хочет выделить ссылки необычным образом. Одним из способов изменения стандартного подчеркивания является вставка графических изображений. Создаем следующие правила стилей:
A {
text-decoration: none; /* Убираем подчеркивание у ссылок */
padding: 1px; /* Поля вокруг текста ссылки */
white-space: nowrap; /* Нет переноса текста */
}
A:hover {
background: url("img/arrow200.gif") /* Картинка для подчеркивания */
0 1.1em /* Смещение рисунка по горизонтали и вертикали */
repeat-x; /* Повторение фона по горизонтали */
}
Должно получиться так:
Ссылка
В. Как прижать подвал к низу странички?
О. При недостатке контента на странице при блочной верстке подвал всегда прижат к верху. Такая особенность прослеживается во всех браузерах, т.е. поднять всю информацию как можно выше, занимая все свободное место. В итоге страница смотрится как бы не законченой. Как же прижать подвал к низу? Это не так сложно. При верстке страницы мы помещаем все блоки в контейнер. Для того, чтобы опустить футер вниз страницы, необходимо вынести блок подвала за пределы контейнера. А в самом низу вставить пустой блок с высотой равной высоте подвала.
В трехколоночном сайте html код будет выглядеть так:
<html> /*Начало страницы*/ <head></head> /*Служебная информация*/ <body> /*Начало тела страницы*/ <div id="container"> /*Начало контейнера*/ <div id="header"></div> /*Шапка*/ <div id="content"></div> /*Контент*/ <div id="leftcol"></div> /*Левая колонка*/ <div id="rightcol"></div> /*Правая колонка*/ <div class="clearfloat"></div> /*Очистка позиционирования*/ <div class="empty"></div> /*Пустой блок*/ </div> /*Конец контейнера*/ <div id="footer"></div> /*Подвал*/ </body> /*Конец тела страницы*/ </html> /*Конец документа*/
Теперь напишем правила css для реализации данного эффекта.
* { /*Обнуляем значения отступов и рамок*/
margin: 0;
padding: 0;
border: 0;
}
html, body { /*Назначаем размеры страницы*/
width: 100%;
height: 100%;
}
* html #container { /*Хак для IE*/
height: 100%;
}
#container { /*Контейнер*/
position: relative; /*Относительное позиционирование*/
width: 900px; /*Ширина контейнера*/
margin: 0 auto; /*Центрирование контейнера*/
min-height: 100%; /*Минимальная высота*/
}
.clearfloat { /*Очистка позиционирования*/
clear: both;
}
.empty { /*Пустой блок*/
height: 50px; /*Высота пустого блока*/
}
#footer { /*Подвал*/
position: relative; /*Относительное позиционирование*/
background: #333; /*Фон подвала*/
width: 900px; /*Ширина подвала*/
height: 50px; /*Высота подвала*/
color: #ccc; /*Цвет шрифта*/
font-size: .9em; /*Размер шрифта*/
margin: -50px auto 0; /*Позиционирование подвала*/
}
Что тут важно? Устанавливаем высоту и ширину страницы в 100%. В идентификаторе контейнера устанавливаем относительное позиционирование relative и указываем минимальную высоту. Перед пустым блоком вставляем класс очистки.
Примечание
При блочной верстке сайта очистку полезно использовать ВСЕГДА.
Высоту пустого блока определяем равной размеру подвала. Подвал позиционируем как relative и устанавливаем его высоту. Теперь сама изюминка данного метода. Подтягиваем подвал подвал к верху на высоту пустого блока, указав отрицательную величину отступа margin.
Вот и все. Подвал у вас будет всегда прижат к нижней кромке страницы. Поиграйтесь с высотой подвала и пустого блока. Только помните, что эти размеры должны быть равны.
В. Как сделать текст объемным?
О.Случаются моменты, когда хочется выделить какой либо заголовок или даже кусок текста не тривиальным способом. Одним из таких способов является выделение текста с помощью правила text-shadow, которое создает тени и таким образом объем. Такой текст хорошо смотрится в заголовках.
Рассмотрим такое выделение текста объемом.
В начале напишем правила, к примеру, для тэга заголовка h1. В правиле text-shadow в скобках пронумерованы строки. Использовать их для повторения эффекта НЕЛЬЗЯ. Они нужны для разъяснения действия строки.
h1 {
background:#81ECEE; /*Фон под текстом*/
margin: 0; /*Отступы вокруг текста*/
font: bold 100px Arial, sans-serif; /*Шрифт - стиль, размер, тип*/
color: rgba(255, 0, 0, 0.75); /*Цвет шрифта, интенсивность*/
text-shadow:(1) 0 1px 0 #ccc,
(2) 0 2px 0 #c9c9c9,
(3) 0 3px 0 #bbbbbb,
(4) 0 4px 0 #b9b9b9,
(5) 0 5px 0 #aaa,
(6) 0 6px 1px rgba(0, 0, 0, 0.1),
(7) 0 0 5px rgba(0, 0, 0, 0.1),
(8) 0 1px 3px rgba(0, 0, 0, 0.3),
(9) 0 3px 5px rgba(0, 0, 0, 0.2),
(10) 0 5px 10px rgba(0, 0, 0, 0.25),
(11) 0 10px 10px rgba(0, 0, 0, 0.2),
(12) 0 20px 20px rgba(0, 0, 0, 0.15);
(13) -webkit-transition: .2s all linear;
}
В данном примере используется 12 слоев тени. От количества слоев зависит как толщина отбрасываемой тени, так и ее сглаживание. Рассмотрим по подробнее значения цифирок.
- Первая цифра во всех строках означает смещение по горизонтали. Отрицательное значение приводит к смещению влево.
- Вторая цифра во всех строках означает смещение по вертикали. Отрицательное значение приводит к смещению вверх.
- Третья цифра во всех строках означает размытие слоя.
- Четвертая цифра в строках 1-5 означает цвет слоя. В строках с 6-й по 12-ю цвет указывается в формате rgba, где rgb - собственно цвет, а 'a' означает его интенсивность. Если использовать обычное назначение цвета, то его интенсивности мы не получим.
- 13-я строка нужна для правильного использования эффекта в Mozilla Firefox.
Теперь в нужном месте вставляем следующую строку
<h1>3D текст</h1>
и получаем вот такой эффект:
А если изменить смещение первых шести столбцов, следующим образом,
-2px 1px 0 #ccc, -3px 2px 0 #c9c9c9, -4px 3px 0 #bbb, -5px 4px 0 #b9b9b9, -6px 5px 0 #aaa, -7px 6px 1px rgba(0, 0, 0, 0.1),
то получим следующий результат:
Во втором примере ясно прослеживается изменение цвета слоев - от белого до светло-серого. Поиграйтесь со смещениями и цветами для получения приемлемого для Вас результата.
К сожалению в Internet Explorer по 7-ю версию включительно, данный эффект НЕ РАБОТАЕТ. В 8-й версии и выше эффект не тестировался. Возможно в этих версиях эффект будет работать.
В. Как можно скрыть или показать какой-либо объект?
О.Иногда возникает ситуация, когда на странице необходимо скрыть или показать какой-либо объект. Это может быть какая-либо картинка, текст или другой объект. Как вариант, я предлагаю встроить в страницу аудиоплеер.
Для этого вам необходимо скачать из интернета какой-либо аудиоплеер (можно взять тут) и поместить его куда-либо на своем сайте (можно в головной файл). Теперь создадим класс css:
.audio { /* имя класса */
display : none; /* скрыть элемент или (block;) показать*/
}
На странице, в которую вы хотите вставить аудиоплеер, между тегами <head></head> вставьте следующий код скрипта:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
В нужном вам месте на странице указываете следующий код html:
<a href="#.htm" onclick="toggle_visibility('play')"><img class="img3" src="../images/
song1.jpg" alt="Слушать" title="Слушать" /></a>
<div id='play' class='audio'>
<object id="audioplayer_1" data="../css/player.swf" style="outline: medium none;" name=
"audioplayer_1" type="application/x-shockwave-flash" height="24" width="230"><param value=
"#FFFFFF" name="bgcolor"><param value="transparent" name="wmode"><param value="false" name=
"menu"><param value="initialvolume=100&autostart=yes&loop=no&animation=yes&
buffer=5&soundFile=../sound/aisty.mp3&playerID=audioplayer_1" name="flashvars"></object>
</div>
Для управления плеером я использовал картинку скрипичного ключа. Теперь давайте подробнее рассмотрим html код. Цветом выделены свойства, которые необходимо изменить под себя. Свойству onclick задаем имя id. Далее указываем путь к управляющей картинке. Затем создаем блок, который мы будем прятать или, как в нашем случае, будем открывать, с заданным именем id. Теперь настроим сам проигрыватель: в свойстве data указываем путь к сохраненному ранее аудиоплееру. Назначаем размеры проигрывателя. Свойству autostart присваиваем значение yes или no. Если указано yes проигрывтель начинает проигрывать фонограмму сразу после клика по картинке, а если no, то аудиоплеер необходимо включать вручную. И, напоследок, в свойстве soundFile указываем путь к файлу фонограммы.
Теперь, если кликнуть по картинке, откроется проигрыватель и зазвучит всем знакомая фонограмма В.С.Высоцкого. Повторный клик закроет проигрыватель. Если у вас много фонограм, тогда для каждой фонограммы необходимо прописывать весь вышеприведенный html код и изменяя имя id блока. Например: play1, play2, play3 и т.д.
Вместо проигрывателя в блок можно включать все что угодно.
Шадуро Николай 