CSS-селекторов наподобие ...
Как обычно Вы готовите себе чай? Просто: ставите чайник, чашку, закидываете пакетик или заливаете заварку. Просто и без изысков. Сегодня я расскажу вам, как готовят чай суровые верстальщики.
Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде Firefox, Opera, Safari или Chrome. Чем свежее, тем лучше — хорошо бы даже ночную сборку или какую-нибудь альфу.
1.Готовим основу нашего чая
Для начала подготовим основу для нашего чаепития. На мой взгляд, прогрессивный HTML5-шаблон с простым доктайпом
Код:
<!DOCTYPE HTML>
подойдёт лучше всего примерно так:
Код:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Чай со спецэффектами</title>
<meta charset="UTF-8">
</head>
<body>
…
</body>
</html>
Обратите внимание на атрибут lang элемента
Код:
<html>
— мы собираемся заваривать английский чай с американским акцентом, и его значение как раз соответствует нашему замыслу: en-US. Дальше нам это ещё пригодится.
2.Теперь давайте найдем подходящую чашку. Точнее, даже не найдем, а тут же соберём из знакомых частей. Из чего мы можем составить обычную чашку чая? Как минимум, из самой чашки cup и блюдца saucer. Чашка состоит из сосуда vessel с ручкой handle, в который последовательно налиты чай tea, брошены два кусочка сахара sugar, по вкусу, а замыкается это всё донышком bottom. Так у нас и получилась сама структура нашей чашки чая :
Код:
<div class="cup">
<div class="vessel">
<div class="tea">
<div class="sugar"></div>
<div class="sugar"></div>
<div class="bottom"></div>
</div>
</div>
<div class="handle"></div>
</div>
<div class="saucer"></div>
Основа для нашего чаепития готова, начинаем его рисовать.
3.Раскрашиваем набросок
Теперь отбросим все браузерные условности простым ластиком. Чай у нас незамысловатый, поэтому здесь подойдёт и * { … }. Для более сложных проектов всё же рекомендуется использовать reset.css
Код:
* {
padding:0;
margin:0;
}Наступает очередь воплотить все составные части нашего чая: позиционируем их по центру, правильно расставляем z-index, задаём размеры и цвет фона для каждого элемента. Вот как выглядит чашка:
Код:
.cup {
position:absolute;
top:50%;
left:50%;
z-index:2;
margin:-150px 0 0 -150px;
width:300px;
height:300px;
}
…и получаем
Если вам понравилось получившийся кубизм — хорошо, значит вас устроит чаепитие даже в компании Internet Explorer. Те, кому этого мало, продолжаем.
4.Спиливаем лишнее
И всё-таки, чашка должна быть круглой. Хотя бы для того, чтобы во время размешивания там не застревала чайная ложка
. Давайте всё скруглим.
Скругляем блюдце: его ширина и высота равны 500-м пикселям, значит для того, чтобы получить окружность, радиус скругления должен составлять половину ширины, т.е. 250 пикселей:
Код:
.saucer {
position:absolute;
top:50%;
left:50%;
z-index:1;
margin:-250px 0 0 -250px;
width:500px;
height:500px;
-webkit-border-radius:250px;
-moz-border-radius:250px;
border-radius:250px;
background:#FFF;
}В данном случае компактное правило border-radius:250px задаёт радиус скругления всех четырёх углов, точно так же, как margin:0 обнуляет поля со всех четырёх сторон элемента.
Обратите внимание на префиксы -webkit и -moz — они нужны браузерам на основе Webkit (Safari, Chrome) и Gecko (Firefox) для того, чтобы применить скругление. Подобным же образом мы скругляем сосуд, чай и донышко. Ручку и подтаявшие кусочки сахара мы подтачиваем до скруглённых брусков.
И получаем
И хорошо бы: всё скруглилось, встало на свои места. Так ведь и просилась бы чашка в руки, если бы не пугала своей плоской двухмерностью. Самое время добавить немного объёма.
5.Надуваем чашку
Будем честны, мы здесь не пытаемся заигрывать с Canvas, поэтому объём у нас будет псевдо-трёхмерным. А много ли надо нам, жертвам квадратного и плоского веба? Берём в руки свойство box-shadow и вперёд:
Код:
.vessel {
-webkit-box-shadow:20px 20px 100px rgba(0,0,0,.8);
-moz-box-shadow:20px 20px 100px rgba(0,0,0,.8);
box-shadow:20px 20px 100px rgba(0,0,0,.8);
}Свойство box-shadow конструируется просто: горизонтальное смещение тени, вертикальное, размер и цвет, который мы задаём в виде rgba(), чтобы последним значением указать полупрозрачность заливки. В случае с элементом tea, также используется ключевое слово inset, чтобы повернуть тень внутрь элемента.
И вот
.
Ну, что — чай уже почти как настоящий. За исключением некоторых проблем: тени в браузерах на движке Webkit рассчитываются весьма загадочно (см. заметку Firefox против Photoshop), поэтому, в нашем случае, выглядят более жёстко. Также текущая версия Webkit в браузере Safari 4.0.4 пока не умеет применять ключевое слово inset, однако Chrome уже справляется.
Осталось только добавить в это чаепитие немного жизни.
5.Художественный беспорядок
Самая очевидная проблема нашей чашки — это отвалившаяся ручка и вставшие пирамидой кусочки сахара. Давайте разбросаем всё это по своим местам и попробуем размешать сахар. Поможет нам в этом свойство transform и методы rotate() и translate(), занимающиеся, соответственно, поворотом и перемещением элементов.
Обратите внимание, что для краткости в этой части примеры кода будут приводится без дублирования свойств с префиксами -webkit, -moz и -o. Полный код вы можете найти в примерах.
Для начала, вернём ручку ровно в центр чашки, изменив значение отрицательного поля, а потом применим transform: повернём на –145 градусов и сместим на 170 пикселей.
Код:
.handle {
margin:-20px 0 0 -45px;
transform:rotate(-145deg) translate(170px,0);
}Принимаемся за кубики: их у нас ровно два. Не знаю, как для вас, но для меня это оптимальное количество сахара. И нам нужно обратиться к каждому из кубиков, чтобы применить нужное смещение. Самым удачным способом будет посчитать их по порядку появления в чае, при помощи селектора :nth-child():
Код:
.sugar:nth-child(1) {
transform:rotate(70deg) translate(-20px,20px);
}
.sugar:nth-child(2) {
transform:rotate(30deg) translate(35px,0);
}Теперь всё на месте, и вроде бы можно пить чай, но сахар упорно не желает размешиваться. Значит, самое время встряхнуть его при помощи сочетания свойств transform и transition. Для начала мы задаём каждому кубику новое смещение, которое произойдёт при наведении на чашку: поворот на 1200 градусов и новые координаты.
Код:
.cup:hover
.sugar:nth-child(1) {
transform:rotate(1200deg) translate(-20px,20px);
}
А затем описываем сам процесс перемещения:
.sugar {
transition:transform 10s ease-out;
}
Синтаксис свойства transition простой: сначала идёт то свойство, которое мы собираемся изменять, потом время и тип ускорения, в нашем случае ease-out, что значит с замедлением. При наведении курсора на чашку .cup:hover сахар будет размешиваться по часовой стрелке, при отведении — в обратную сторону.
И вот
Практически всё готово. Самые нетерпеливые могут браться за чай, остальные же приглашаются дальше — добавить разнообразия.
6.Немного разнообразия
Сколько людей, столько и вкусов. Поэтому давайте добавим нашему чаепитию возможность выбрать в какой традиции пить чай: в английской, русской или японской. Предлагаю сделать это наиболее адекватно, используя упомянутый выше атрибут lang элемента
Код:
<html>
. Для этого добавим возможность выбора:
Код:
<ul class="switcher">
<li lang="en-US" title="Английски"></li>
<li lang="ru-RU" title="Русский"></li>
<li lang="ja-JP" title="Японский"></li>
</ul>
Каждый из пунктов нашего меню будет переключать атрибут lang на нужный язык при помощи нехитрого скрипта, навешивающего обработчики:
Код:
function init() {
var html = document.documentElement;
var items = document.querySelectorAll('ul.switcher li');
for(var i=0; i<items.length; i++){
items[i].onclick = function() {
html.lang = this.lang;
}
}
}
window.onload = init;В этом скрипте используется удобнейший метод querySelectorAll, который позволяет выбрать нужные элементы при помощи CSS-селекторов наподобие jQuery.
Осталось только добавить специфические стили для каждого из языков (тематическую скатерть и цвет чая) и поменять состояние текущего пункта меню. Вся магия происходит благодаря псевдо-классу :lang(), который появляется у каждого элемента после того, как мы обновили атрибут lang элемента
Код:
<html>
:
Код:
BODY:lang(en-US) {
background:#519AB8 url(i/en.png);
}
.switcher:lang(en-US) LI[lang=en-US],
.switcher:lang(ru-RU) LI[lang=ru-RU],
.switcher:lang(ja-JP) LI[lang=ja-JP] {
border-color:#FFF;
cursor:default;
}И, наконец,
Чай готов, сахар по вкусу — можно пить :)
... ;tpl_url}/
/webwidget_menu_glide.
" rel="stylesheet ... " type="text/
"></link ...
Проблема с выводом комментариев. Проблема с выводом комментариев. Странное всё таки ...
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT- ...
... книги с помощью
3D-преобразования. ... type="text/
" href="{ ... l}}/
/book.
" / ...
