|
Итак, решил я поделится опытом создания "круглых углов". В этой статье мы рассмотрим как обычные тяжелые варианты, так и изящные, сделанные на CSS3. Часто возникают проблемы с кросбраузерностью и нам приходится возвращаться к старым дедовским проверенным методам. Но сегодня я хочу заглянуть немного в будущее и уже сегодня на примере одного-двух браузеров реализовать поставленные цели так, как мы будем это делать уже совсем скоро. Автор сей статьи не поддерживает Internet Explorer 6 и текущие варианты, возможно, не будут корректно отображаться в этом браузере.
1. Ссылка с тремя дивами.
Сделаем обычную кнопочки с закруглёнными углами, которая под "давлением" текста будет растягиваться по ширине. Для начала нарисуем будущую кнопку в фотошопе. Собственно вот: 
и в разрезе (для разных примеров разные):         
Дальше сверстаем эту кнопку используя 3-и дива и <a> для обвёртки. Такой вариант не валидный, так как по правилам в элемент <A> нельзя вставлять дивы и тд, но это самый лучший выход, когда нужно сделать кросбраузерную кнопку с ховером. Вот такую конструкцию мы и сделаем:
CSS:
a.rb-maindiv {
height: 24px;
overflow: hidden;
display: block;
float:left;
cursor: pointer;
outline: none;
text-decoration: none;
}
.rb-left {
width: 12px;
height: 24px;
background: transparent url(images/round-but.png) top left no-repeat;
float: left;
}
.rb-center {
height: 24px;
background: transparent url(images/round-but-center.png) top repeat-x;
font-family:Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 1px black;
line-height: 22px;
float: left;
padding: 0 10px;
}
.rb-right {
width: 12px;
height: 24px;
background: transparent url(images/round-but.png) top right no-repeat;
float: left;
}
a.rb-maindiv:hover .rb-left {
background: transparent url(images/round-but.png) bottom left no-repeat;
}
a.rb-maindiv:hover .rb-right {
background: transparent url(images/round-but.png) bottom right no-repeat;
}
a.rb-maindiv:hover .rb-center {
background: transparent url(images/round-but-center.png) bottom repeat-x;
}
HTML (XHTML 1.0 Transitional):
<a class="rb-maindiv" href="#">
<div class="rb-left"></div>
<div class="rb-center">Button</div>
<div class="rb-right"></div>
</a>
Кнопка проверялась в браузерах: Opera 10, FireFox 3.5, Google Chrome 2, Safari 4, IE8 и IE7. В первых четверых работает ещё и тень. Глянуть можно тут. 2. Один див\ссылка с тремя картинками. Этот варианта работает только на движках WebKit и Konqueror, и был бы идеальным решением для создания подобной кнопки. Но увы, его поддерживают пока только Apple Safari, Google Chrome и OmniWeb (не проверял). Суть данного примера в том, чтобы в один ксс тег "background" вписать сразу несколько картинок. Только вот я не смог разобраться как обрезать фон, пришлось использовать не прозрачные картинки. Но и это мы исправим чуть позже. Собственно пример: CSS:
a.rb2 {
height: 24px;
background: url(images/rb-left.png) top left no-repeat, url(images/rb-right.png) top right no-repeat, url(images/rb-center.png) top repeat-x;
font-family:Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 1px black;
line-height: 22px;
text-decoration: none;
display: block;
float: left;
padding: 0 22px;
cursor: pointer;
}
a.rb2:hover {
background: url(images/rb-left.png) bottom left no-repeat, url(images/rb-right.png) bottom right no-repeat, url(images/rb-center.png) bottom repeat-x;
}
HTML (XHTML 1.0 Transitional):
<a class="rb2" href="#">Button</a>
Как вы видите, этот вариант в 3 раза "легче" прошлого: мало кода, много толку. Смотреть пример тут.
3. Один див\ссылка и CSS3. Этот вариант тоже хорош, так как не нужно вообще рисовать какую либо картинку, разве что для градиента. Но пока мы ограничены в поддержке браузерами новых свойств css3. Код:
CSS:
a.rb3 {
height: 18px;
border: 1px solid #0c4ea7;
background: #568bc4 url(images/rb3.png) top repeat-x;
font-family:Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 1px black;
line-height: 17px;
text-decoration: none;
display: block;
float: left;
padding: 0 20px;
cursor: pointer;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
box-shadow: 0px 2px 1px #626262;
-moz-box-shadow: 0px 1px 3px #626262;
-webkit-box-shadow: 0px 1px 3px #626262;
}
a.rb3:hover {
background: #568bc4 url(images/rb3.png) bottom repeat-x;
}
HTML (XHTML 1.0 Transitional):
<a class="rb3" href="#">Button</a>
Собственно вышло не так красиво, но когда нет фотошопа под рукой, или нужно сделать рамку с круглыми углами - это то что нужно. Полностью все атрибуты поддерживает Apple Safari 4 и FireFox 3.5. Opera 10 не поддерживает border-radius и box-shadow. Google Chrome 2 не поддерживает border-radius. Internet Explorer 7\8 вообще ничего не поддерживает. Смотреть пример тут.
4. Всё вместе! Один див\ссылка, три картинки и css3. Этот вариант был написан ради лулзов, работает ведь только в Apple Safari 4. Тут мы решим проблему не прозрачных картинок путём добавления новых атрибутов из css3. Код: CSS:
a.rb4 {
height: 18px;
border: 1px solid #0c4ea7;
background: url(images/rb4-left.png) top left no-repeat, url(images/rb4-right.png) top right no-repeat, url(images/rb4-center.png) top repeat-x;
font-family:Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 1px 1px black;
line-height: 18px;
text-decoration: none;
display: block;
float: left;
padding: 0 20px;
cursor: pointer;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
box-shadow: 0px 2px 1px #626262;
-moz-box-shadow: 0px 1px 3px #626262;
-webkit-box-shadow: 0px 1px 3px #626262;
}
a.rb4:hover {
background: url(images/rb4-left.png) bottom left no-repeat, url(images/rb4-right.png) bottom right no-repeat, url(images/rb4-center.png) bottom repeat-x;
}
HTML (XHTML 1.0 Transitional):
<a class="rb4" href="#">Button</a>
Конечно вышло не так красиво, как в первом варианте, но очень экономично. Жаль таким может похвастаться пока только Apple Chrome. Смотреть пример тут.
5. Гайдлайны. text-shadow: 0px 1px 1px #000000; - Тень для текста 1-й параметр отвечает за перемещение по оси X, 2-й отвечает за ось Y, 3-й за растушёванность тени и 4-й за цвет. box-shadow: 0px 1px 1px #000000; - Тень для объектов
1-й параметр отвечает за перемещение по оси X, 2-й отвечает за ось Y, 3-й за растушёванность тени и 4-й за цвет. У меня всё! |
