CSS3 для начинающих

CSS3 для начинающихНа этой неделе в руки попал отличный англоязычный материал с описанием многих фишек CSS3. Этим постом открываю новую рубрику, в которой буду рассказывать о нововведениях CSS3, давать конкретные примеры. Большая часть информации будет являться переводом англоязычных текстов и мануалов. Заказы на будущие посты можете делать в комментариях. Сейчас же приведу примерный список тем.

Перейти на демо-сайт

1. Введение в CSS3

Официальный roadmap по CSS3. Основные понятия: псевдо классы, селекторы, комбинирование, псевдо-элементы. Интервью с Эриком Мейером (Eric Meyer).

Roadmap
Селекторы
Псевдо-классы
RGBA и прозрачность
Множественные фоны
Word wrap
Text shadow
Интервью с Эриком Мейером
eric meyer

2. Фон (background) и границы

Закругленные границы, закругленные границы с картинкой.

border-radius: Закругление границ
border-image: использование изображений для построения границ
background-clip
background-origin
Фон из нескольких картинок
background-attachment
box-shadow
border-radius

3. Текст в CSS3.

Эффект вдавленного текста.
6 эффектов с использованием text-shadow

текстовые эффекты

Эффект тиснения
Поворот текста.
Добавление внешней обводки для текста используя text-stroke
Эффект выезда пункта меню при наведении без применения JavaScript
Стилизация выделения текста в CSS3
Интересный эффект с использованием text-shadow
Создание типографики посредством CSS3

CSS3 типографика

4. Подсказки (Tooltips). Меню с формами. 3D ленты

Создание всплывающих окон с подсказками (ToolTips).
Меню с использованием jQuery со встроенными формами.
CSS3 jQuery меню с формами
Создание 3D лент

5. Drop-shadow – простые примеры. Боксы на CSS3

Drop-shadow – простые примеры
Создание боксов с помощью CSS3
CSS3 боксы

6. Кнопки на CSS3

Кнопки на CSS3
Кнопки в стиле BonBon

CSS3 кнопки

Если у вас есть что предложить для данного раздела — пишите в комментариях. Посты начну публиковать с завтрашнего дня. Обязательно подпишитесь на RSS ленту и фоловте в твиттере дабы не пропустить ни один выпуск.

Всем удачи — до скорого.



Запись опубликована в рубрике CSS3 с метками , , , . Добавьте в закладки постоянную ссылку.

33 комментария: CSS3 для начинающих

  1. Уведомление: CSS3 для начинающих | Grabr

  2. Уведомление: CSS3 для начинающих. Часть 1. Введение в CSS3. | RusDigi.org Блог Гилязетдинова Руслана

  3. Уведомление: CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы. | RusDigi.org Блог Гилязетдинова Руслана

  4. Уведомление: Маленький редизайн блога. | RusDigi.org Блог Гилязетдинова Руслана

  5. Уведомление: Маленький редизайн блога « RusDigi – Блог о блоге

  6. Уведомление: CSS3 для начинающих. Часть 3. Текст в CSS3. | RusDigi.org Блог Гилязетдинова Руслана

  7. Уведомление: Цикл статей CSS3 для начинающих « RusDigi – Блог о блоге

  8. Уведомление: Fix: WP - уменьшение количества ревизий (редакций) поста или их отключение | RusDigi.org Блог Гилязетдинова Руслана

  9. Уведомление: Как сделать кнопку «наверх» с использованием CSS3 и jQuery | RusDigi.org Блог Гилязетдинова Руслана

  10. Уведомление: CSS3 для начинающих. Часть 3.1. Красивая типографика для сайта с помощью CSS3. | RusDigi.org Блог Гилязетдинова Руслана

  11. Уведомление: 7 причин почему я не буду читать ваш блог | Webgrow

  12. Уведомление: Закрытый клуб крутых блоггеров :)

  13. Уведомление: CSS3 для начинающих. Часть 4.1. Всплывающие подсказки. Выпадающее меню. | RusDigi.org Блог Гилязетдинова Руслана

  14. Уведомление: Эстафета: небольшие планы на будущее | RusDigi.org Блог Гилязетдинова Руслана

  15. Уведомление: Эффект вращения и увеличения с помощью CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  16. Уведомление: CSS3 для начинающих. Часть 4.2. 3D ленты. | RusDigi.org Блог Гилязетдинова Руслана

  17. Уведомление: CSS3 для начинающих. Часть 5.1. Drop-shadow - простые примеры | RusDigi.org Блог Гилязетдинова Руслана

  18. Уведомление: CSS3 для начинающих. Часть 5.2. Боксы на CSS. | RusDigi.org Блог Гилязетдинова Руслана

  19. Уведомление: CSS3 для начинающих. Часть 6.1. Кнопки на CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  20. Уведомление: 7 простых трюков с текстом в CSS3 | RusDigi.org Блог Гилязетдинова Руслана

  21. Уведомление: CSS3 для начинающих. Часть 6.2. Кнопки в стиле BonBon | RusDigi.org Блог Гилязетдинова Руслана

  22. Уведомление: Псевдо-элементы :before/:after. Поддержка браузерами | RusDigi.org Блог Гилязетдинова Руслана

  23. Уведомление: Эксперимент: исправляем ошибки Яндекса с региональной выдачей (отчет)

  24. Уведомление: Инвайты для социальной сети Google+ | RusDigi.org Блог Гилязетдинова Руслана

  25. Leon7cat говорит:

    Просьба направить инвайт на гугл +

    сделал ретвит

    Leon
    leon7cat@gmail.com

  26. Уведомление: Команда Рамзана Кадырова уступила бразильцам со счетом 6:4! | S-svit.ru

  27. Уведомление: 9 Советов: Как Заполучить Заказчика | Chuvis.com

  28. Уведомление: Flygirrl | Видео Мир

  29. Уведомление: Мистецтво рівноваги - ForFun

  30. Уведомление: Безопасность блога на WordPress - UBUNTU, Linux, WordpressUBUNTU, Linux, Wordpress

  31. Уведомление: Как раскрутить сайт? Методика раскрутки сайтов. | Читателю на заметку

  32. Уведомление: Безопасность блога на WordPress | UBUNTU, Linux, Wordpress

  33. Уведомление: Wordpress и Twitter: хаки и плагины для Wordpress | RusDigi.org

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *