Нумерация с помощью CSS (простой счетчик)
Достаточно часто в процессе создания сайта появляется необходимость пронумеровать различные пункты сайта. Сделать это можно вручную, но этот способ занимает не мало времени, особенно тогда, когда на странице с большим количеством пронумерованных пунктов нужно добавить еще несколько. В этом случае придется всю нумерацию переписывать заново. Но можно пойти другим путем, на котором нам в помощь придут CSS счетчики. C помощью данной возможности CSS, этот процесс автоматизируется.
Меньше слов, больше дела, переходим к коду.
CSS- код:
body {
counter-reset: section;
}
.counter {
counter-increment: section;
}
.counter:before {
content: counter(section) " ";
}Разберем код:
body { counter-reset: section;}В этой строке мы устанавливаем значение счетчика для body на ноль и присваиваем название счетчику – section. Название может быть любым.
Также в этой строке можно задать число, с которого будет начинаться отсчет. Например если хотите, чтобы отсчет начинался с пяти, нужно привести строку к виду:
body { counter-reset: section 4; }В строке
.counter {counter-increment: section;}мы определяем элемент, который будет нумероваться. Так же в этой строке можно установить значение на которое будет увеличиваться счетчик. Если счетчик должен увеличиваться на 3 с каждым шагом, нужно записать строку так:
.counter {counter-increment: section 3;}Строка
.counter:before {content: counter(section) " ";}отвечает за отображение счетчика.
Теперь нужно присвоить класс тем элементам, которые должны нумероваться.
HTML-код:
<div class="counter"></div>
<div class="counter"></div>
<div class="counter"></div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Ролловер средствами CSS
Ролловер – это элемент страницы, который меняет свой цвет либо размер при наведении на него курсора.
В данном случае рассмотрим ролловер сделанный средствами CSS из одной картинки с горизонтальным смещением.
Для начала нам понадобится картинка длиной 300 пикселей, поделенная на три равных области с разной цветовой заливкой, и высотой 100 пикселей.
Я использую вот такую:
В следующем шаге нам понадобится следующий код:
CSS-код:
#rollover a {
display:block;
width:100px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */
height: 100px; /* Высота блока ролловера, соответствует высоте картинки */
background: url("horizontal-css-rollover.gif") 0 0 no-repeat; /* Путь до картинки ролловера */
color: #ff0000;
}
#rollover a:hover {
background-position: -100px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 100 пикселей */
color: #0000ff;
}
#rollover a:active {
background-position: -200px 0; /* При клике курсора по изображение, она смещается на два блока влево, в данном случае на 200 пикселей */
color: #00ff00;
}В коде есть комментарии, из которых, я надеюсь, ясно что к чему.
HTML-код:
<div id="rollover">
<a href="#"></a>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Декорирование ссылки бэкграундом
Ссылки можно украсить разными способами, подчеркнуть, сменить цвет, сменить размер, и т.д. Но в этом примере рассмотрим украшение ссылки бэкграундом, т.е. картинкой на заднем фоне. Для этого понадобится любая картинка, которая будет служить задним фоном, и следующий код.
CSS-код:
a:link, a:visited {
text-decoration : none;
}
a:hover {
background: url(background.gif) repeat;
}Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Картинка которую я использовал в качестве фона в примере можно взять здесь.
Всплывающая подсказка при наведении на ссылку (CSS)
Иногда возникает необходимость вывести подсказку при наведении курсора на какой либо объект страницы (в данном случае ссылки), но title не подходит по разным причинам, тогда нам на помощь приходит следующий код.
CSS-код:
a {
z-index: 1;
text-decoration: none;
}
a:hover {
position: relative;
}
a span {
display: none;
width: 250px;
}
a:hover span {
text-align: justify;
display: block;
position: absolute;
float: left;
bottom: 15px;
left: 50px;
background: #ffffff;
border: 1px dotted black;
color: #444;
padding: 2px;
z-index: 2;
}Теперь, чтобы подсказка появлялась при наведении на ссылку, нужно добавить <span>Подсказка!</span> перед закрывающей </a>. Т.е. привести ссылку к виду:
HTML-код:
<a href=”#”>Ссылка<span>Подсказка!</span></a>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Всплывающая картинка при наведении на ссылку
Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.
CSS-код:
ul {
position: relative;
width: 100px;
list-style: none;
}
li {
border: 1px solid;
margin: 2px;
padding-left: 5px;
}
a {
display: block;
}
a img {
display: none;
position: absolute;
top: 0;
border: 0;
left: 100%;
}
a:hover img {
display: block;
}HTML-код:
<ul>
<li><a href="#"> Jemand <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Lyces <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Светлая <img src="image-when-hover-on-link.gif" /></a></li>
</ul>Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Цветное выделение текста
Selection – одна из интересных функций CSS3 при помощи которой можно заменить стандартный цвет выделения текста. На мой взгляд selection практически бесполезна, но возможно кто то придумает этой функции разумное применение. Переходим к коду.
CSS-код:
p {
font-size: 1.5em;
margin-bottom: 2.2em;
}
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}HTML-код:
<div id="page-wrap">
<p class="red">При выделении бэкграунд этого текста будет красным.<p>
<p class="blue">При выделении бэкграунд этого текста будет голубым.<p>
<p class="yellow">При выделении бэкграунд этого текста будет желтым.<p>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Прилипающий футер
Лично я никогда не пользовался прилипающим футером, но возможно кому нибудь, или мне, все таки понадобится данный код.
CSS- код:
html, body, #wrap {
height: 100%;
margin: 0px;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 50px; /* отступ должен быть равен высоте футера */
}
#footer {
position: relative;
margin-top: -50px; /* отрицательное значение высоты футера */
height: 50px;
clear:both;
background: #000;
text-align: center;
color: #fff;
font-size: 260%;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */HTML-код:
<div id="wrap">
<div id="header"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
Я липкий футер! :)
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Вертикальное раскрывающееся меню
Если на сайте мало места, но очень хочется разместить большое количество пунктов в меню, к нам на помощь приходит вертикальное раскрывающееся меню. Данное меню впишется практически в любой дизайн сайта, конечно при условии визуального изменения под стиль сайта. Ну хватит слов, перейдем к делу, а точнее к коду.
CSS-код:
#menu_body {
background:#81A192;
width:200px
}
#menu_body ul li {
list-style-type:none;
border-bottom:1px solid #fff;
margin-left:-40px;
padding-left:7px
}
#menu_body ul li a {
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none
}
#menu_body ul li ul li {
border:0;
list-style-type:square;
color:#fff;
list-style-position:inside
}
#menu_body ul li ul {
border-top:1px solid #fff;
margin-left:-7px;
padding-left:50px
}JavaScript: (добавляем в head после CSS)
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');
function allclose() {
for (i=0; i < id_menu.length; i++){
document.getElementById(id_menu[i]).style.display = "none";
}
}
function openMenu(id){
for (i=0; i < id_menu.length; i++){
if (id != id_menu[i]){
document.getElementById(id_menu[i]).style.display = "none";
}
}
if (document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}В строке
var id_menu = new Array('sub_menu_1','sub_menu_2','sub_menu_3');нужно добавить значений “sub_menu” столько, сколько групп меню будет, т.е. если будет 10 групп раскрывающихся меню, то здесь должны быть прописаны все 10 значений: sub_menu_1′,’sub_menu_2′,’sub_menu_3′,’sub_menu_4′,’sub_menu_5′ и т.д. Соответственно и HTML код должен содержать 10 блоков, иначе будут проблемы а работе.
В <body> добавляем вызов функции:
HTML-код:
<body onload="allclose()">И в конце само тело нашего меню.
HTML-код:
<div id="menu_body">
<ul>
<li><a href="#" onclick="openMenu('sub_menu_1');return(false)">menu 1</a>
<ul id="sub_menu_1">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_2');return(false)">menu 2</a>
<ul id="sub_menu_2">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li><a href="#" onclick="openMenu('sub_menu_3');return(false)">menu 3</a>
<ul id="sub_menu_3">
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Показ, скрытие блока (div) по клику
Иногда в процессе создания сайта возникает ситуация, когда информация должна показываться на странице только после клика по определенному элементу сайта. Например, это может быть форма добавления сообщения в гостевой книге, форма быстрого ответа на форуме и т.д. В этой ситуации к нам на помощь приходит следующий код:
CSS-код:
.headline {
border: 1px solid #000000;
cursor: pointer;
text-align: center;
}
.hidden {
display: none;
border: 1px solid #ff0000;
text-align: center;
margin-top: 2px;
}JavaScript:
function show(ele) {
var srcElement = document.getElementById(ele);
if(srcElement) {
if(srcElement.style.display == "block") {
srcElement.style.display= 'none';
}
else {
srcElement.style.display='block';
}
}
}HTML-код:
<div class="headline" onclick="show('cat1')">Заголовок</div>
<div class="hidden" id="cat1">Текст раскрывающегося блока</div>Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64
Закругленные углы без графики при помощи CSS
В настоящее время в среде WEB-дизайна достаточно популярны закругленные углы, которые воспроизводятся различными способами. В этой статье я приведу один из примеров, лидирующий на мой взгляд, как сделать углы закругленными при помощи CSS.
CSS-код:
.r1, .r2, .r3, .r4, .r5, .r6, .r7, .r8, .r9, .r10 {
display: block;
height: 1px;
overflow: hidden;
font-size:1px;
}
.r1 {margin: 0 1px;}
.r2 {margin: 0 2px;}
.r3 {margin: 0 3px;}
.r4 {margin: 0 4px;}
.r5 {margin: 0 5px;}
.r6 {margin: 0 6px;}
.r7 {margin: 0 7px;}
.r8 {margin: 0 8px;}
.r9 {margin: 0 9px;}
.r10 {margin: 0 10px;}
.content, b {background-color: #CCCCCC;}
.content {padding: 10px 10px; text-align: center;}HTML-код:
<b class="r10"></b><b class="r7"></b><b class="r5"></b><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r2"></b><b class="r1"></b><b class="r1"></b><b class="r1"></b>
<div class="content">
Здесь содержимое блока
</div>
<b class="r1"></b><b class="r1"></b><b class="r1"></b><b class="r2"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b><b class="r5"></b><b class="r7"></b><b class="r10"></b>В данном примере показаны углы с закругленностью в 10px. Но не стоит на этом останавливаться, нужно экспериментировать и изобретать новые дизайнерские решения.
Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64