Respect to CSS3

I have one friend. Over the past 6 moths, we managed several projects successfully. The production process was pretty smoothly. Being a skilled PHP developer, he totlly refused to accept the new features of CSS. For example, for a simple button with a shadow, he make a sprite...

Картинки в роли UI элементов уходят с веб сцены. Анимации градиенты, тени — все это умеет CSS нужно только взять и воспользоваться.

class > div

Разрабатывая сайт для сети салонов красоты я создал несколько интересных css элементов. Простейший HTML из четырех строк и продуманная конструкция CSS позволяют создать такой интерактивный элемент.

Отдельный респект улетает селекторам (.metal > div > div). Эти ребята позволяют не плодить классы а элегантно внесить нужные стили прямо в дочерние элементы. Для генерации градиентов я использую этот ресурс gradient-editor Фотошопоподобный интерфейс поможет подобрать градиент за секунды.

codepen

Добавим тень

Псевдоклассы делают .shade довольно универсальным классом. Забирайте и пробуйте в своих проектах.

codepen

Зачем я упоминал моего консервативного друга в начале статьи? — Для сравнения. Имея готовые макеты, скажем кнопки в трех отображениях (спокойном, нажатом и ховер) его нужно открыть в редакторе, подготовить, сохранить, затем залить на сервер создать класс для кнопки. И все равно в итоге получится убожество ибо такие ништяки как transitions становятся недоступны...

На закуску еще несколько элементов

codepen