Хаки и Скрипты Next Generation CMS : CSS : Чашка чая на CSS3

irbees2008 Опубликовано - 14 - января CSS

Автор: pepelsbey
Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Как обычно Вы готовите себе чай? Просто: ставите чайник, чашку, закидываете пакетик или заливаете заварку. Просто и без изысков. Сегодня я расскажу вам, как готовят чай суровые верстальщики.

Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде 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;
    }

И, наконец,

Чай готов, сахар по вкусу — можно пить :)

Можешь почитать и вот эту статейку "Выводим название категории через TWIG но не через news.table.tpl"

Это тоже интересно

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