На этой неделе в руки попал отличный англоязычный материал с описанием многих фишек CSS3. Этим постом открываю новую рубрику, в которой буду рассказывать о нововведениях CSS3, давать конкретные примеры. Большая часть информации будет являться переводом англоязычных текстов и мануалов. Заказы на будущие посты можете делать в комментариях. Сейчас же приведу примерный список тем.
Перейти на демо-сайт
1. Введение в CSS3
Официальный roadmap по CSS3. Основные понятия: псевдо классы, селекторы, комбинирование, псевдо-элементы. Интервью с Эриком Мейером (Eric Meyer).
Селекторы
Псевдо-классы
RGBA и прозрачность
Множественные фоны
Word wrap
Text shadow
Интервью с Эриком Мейером
2. Фон (background) и границы
Закругленные границы, закругленные границы с картинкой.
border-image: использование изображений для построения границ
background-clip
background-origin
Фон из нескольких картинок
background-attachment
box-shadow
border-radius
3. Текст в CSS3.
6 эффектов с использованием text-shadow
Эффект тиснения
Поворот текста.
Добавление внешней обводки для текста используя text-stroke
Эффект выезда пункта меню при наведении без применения JavaScript
Стилизация выделения текста в CSS3
Интересный эффект с использованием text-shadow
Создание типографики посредством CSS3
4. Подсказки (Tooltips). Меню с формами. 3D ленты
Меню с использованием jQuery со встроенными формами.
Создание 3D лент
5. Drop-shadow – простые примеры. Боксы на CSS3
Создание боксов с помощью CSS3
6. Кнопки на CSS3
Кнопки в стиле BonBon
Если у вас есть что предложить для данного раздела — пишите в комментариях. Посты начну публиковать с завтрашнего дня. Обязательно подпишитесь на RSS ленту и фоловте в твиттере дабы не пропустить ни один выпуск.
Всем удачи — до скорого.
Просьба направить инвайт на гугл +
сделал ретвит
Leon
[email protected]