Как обычно Вы готовите себе чай? Просто: ставите чайник, чашку, закидываете пакетик или заливаете заварку. Просто и без изысков. Сегодня я расскажу вам, как готовят чай суровые верстальщики.
Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде 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>
Код:
<html>
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;
}
Код:
.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;
}
Обратите внимание на префиксы -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);
}
И вот

Ну, что — чай уже почти как настоящий. За исключением некоторых проблем: тени в браузерах на движке 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);
}
Код:
.sugar:nth-child(1) {
transform:rotate(70deg) translate(-20px,20px);
}
.sugar:nth-child(2) {
transform:rotate(30deg) translate(35px,0);
}
Код:
.cup:hover
.sugar:nth-child(1) {
transform:rotate(1200deg) translate(-20px,20px);
}
А затем описываем сам процесс перемещения:
.sugar {
transition:transform 10s ease-out;
}
И вот

Практически всё готово. Самые нетерпеливые могут браться за чай, остальные же приглашаются дальше — добавить разнообразия.
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>
Код:
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;
Осталось только добавить специфические стили для каждого из языков (тематическую скатерть и цвет чая) и поменять состояние текущего пункта меню. Вся магия происходит благодаря псевдо-классу :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;
}

Чай готов, сахар по вкусу — можно пить :)
Можешь почитать и вот эту статейку "Выводим Нужный блок только на главной "

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.