CSS3
CSS3 - это новая версия каскадных таблиц стилей. Я, надеюсь, не нужно объяснять, зачем нужен вообще CSS. Если нужно, то сначала обратите внимание на категорию по основам CSS, а уже потом можно будет изучать и новую версию.
В CSS3 появилась масса новых возможностей, которые в разы упрощают огромное количество задач. Помните, сколько Вам бед доставляло закругление обычного div? Сколько картинок приходилось вырезать, сколько блоков добавлять, сколько стилей прописывать? Теперь же ничего лишнего нет: 1 блок div и одно свойство border-radius, закругляющее рамку. Всё.
Появилась так же возможность добавлять градиенты, несколько фонов на один блок. Теперь можно делать лёгкую анимацию на CSS3, что само по себе уже чудо, поскольку раньше для подобных эффектов требовался JavaScript.
Такие вещи как тени, раньше отнимающие кучу нервов и времени, теперь реализуются так же всего одним свойством из CSS3.
В общем, расписывать все новые возможности надо достаточно долго. Одно могу сказать точно: если Вы изучите CSS3, что сделать совсем легко, если знаете предыдущую версию CSS, Ваша жизнь как верстальщика значительно упростится.
Прочитав статьи по CSS3, Вы узнаете:
1) Как создавать тени для текста и блоков.
2) Новые способы задания цвета в CSS3.
3) Как закруглить углы на CSS3.
4) Как делать плавные переходы на CSS3.
5) Как трансформировать объекты на CSS3.
6) Как сделать анимацию на CSS3.
7) Как задать несколько фоновых изображений на CSS3.
8) Как разбить текст на несколько колонок с помощью CSS3.
9) Как верстать круглые кнопки на CSS3.
10) Примеры теней на CSS3.
11) Как задавать градиенты в CSS3.
12) Как сделать комментарии в виде пузырька на CSS3.
13) Новое свойство CSS3 - box-sizing.
14) Новый псевдокласс CSS3 - nth-child.
15) Новый псевдокласс CSS3 - not.
16) Новые псевдоклассы CSS3 - only-child и only-of-type.
17) Новые псевдоклассы CSS3 - valid и invalid.
18) Новые псевдоклассы CSS3 - read only и read write.
19) Новые псевдоклассы CSS3 - in-range, out-of-range и indeterminate.
20) Как сделать эффект серого оттенка на CSS.
21) Зачем нужен псевдокласс target в CSS3.
22) Как сделать аккордион на чистом CSS3.
23) Как сделать эффект вдавленного текста на CSS3.
24) Новые свойства CSS3 - box-ordinal-group и box-orient.
25) Новые свойства CSS3 - nav-left, nav-right и nav-up.
26) Как сделать навигационное меню на HTML5 и CSS3, используя псевдокласс target.
27) Как сделать красивые анимации на CSS3, используя библиотеку Animate.css.
28) Зачем нужна функция calc() в CSS3.
29) Как сделать анимацию загрузки на чистом CSS3.
30) Как сделать пролистывающийся текст на чистом CSS3.
31) Как добавить эффект перехода аккордеону на CSS3.
32) Как сделать блоки со слайдер эффектом на чистом CSS3.
33) Как сделать 3D менюшку на чистом CSS3.
34) Зачем нужно свойство flexbox в CSS3.
35) Как сделать прелоадер на чистом CSS3.
36) Как сделать слайдер на чистом CSS3 без использования JavaScript.
37) Как сделать выскальзывающее меню на CSS3.
38) Как сделать прогресс бар на чистом CSS3.
39) Как сделать изогнутую тень на чистом CSS3.
40) Как сделать многоуровневое меню-аккордион на CSS3.
41) Как установить иконки загрузки на чистом CSS3.
42) Как сделать индикатор прокрутки на CSS3.
43) Как сделать выпадающее меню на чистом CSS3.
44) Как применять свойство CSS background-image в веб-дизайне.
45) Как использовать свойство float в CSS.
46) О свойстве float на практике.
47) Основные типы CSS селекторов.
48) Что лучше Opacity или RGBA в CSS3.
49) Как сделать адаптивное меню на flexbox.
50) Как сделать изображения адаптивными в CSS3.
51) Как сделать адаптивную верстку на flex CSS. Часть 1.
52) Как анимировать элементы сайта. Часть 2.
53) Как просто разместить текст в колонки.
54) Как сделать плавный переход в CSS - transition.
55) О свойстве transform CSS на примерах.
56) Как применять filter grayscale на практике.
57) Как сделать красивый эффект при наведении.
58) Как сделать hover эффект для кнопки.
59) Как сделать всплывающие подсказки при наведении.
60) Как сделать полупрозрачный текст на фоне в CSS.
61) Как сделать плавное подчеркивание ссылки при наведении.
62) Как сделать анимированную кнопку обратного звонка.
63) Как использовать иконки Font Awesome на сайте.
64) Как сделать адаптивное меню для сайта. Часть 1.
65) Как сделать адаптивное меню для сайта. Часть 2.
66) Как сделать прелоадер на чистом CSS.
67) Как сделать иконки соц сетей на CSS.
68) Как сделать вертикальное меню на CSS.
69) Как сделать прозрачную панель навигации в CSS.
70) Как сделать выезжающее боковое меню. Часть 1.
71) Как сделать выезжающее боковое меню.Часть 2.
72) Как сделать поворот 3d картинки в CSS.
73) Как сделать CSS эффект при наведении на ссылку.
74) Как сделать анимацию текста в CSS.
75) Как создать градиент поверх фоновой картинки в CSS.
76) Как сделать CSS анимацию при прокрутке страницы.
77) Как сделать анимацию при скролле на WordPress.
78) Что такое CSS позиционирование блоков.
79) Как сделать адаптивную форму обратной связи.
80) Как сделать адаптивное навигационное меню с иконками.
81) Как позиционировать текст на картинке в CSS.
82) Как сделать alert кнопку в CSS.
83) Как создать адаптивную контактную форму.
84) Как сделать таблицу адаптивной.
85) Как сделать поиск по сайту на HTML.
86) Как сделать чекбокс на HTML/CSS.
87) Как сделать карточку товара на CSS.
88) Как изменить маркер списка.
89) Как сделать фиксированное меню.
90) Как сделать адаптивную шапку сайта (float vs flex).
91) Как сделать анимацию блока и картинки в CSS.
92) Как сделать иконку гамбургер-меню на CSS+JS.
93) Как сделать меню для мобильной версии сайта.
94) Как создать иконки для меню сайдбара.
95) Как сделать выравнивание по центру блока внутри блока.
96) Как сделать блок с отзывами на HTML.
97) Как выделить блок текста на CSS.
98) Как сделать купон на CSS.
99) Про CSS эффекты при наведении на картинку.
100) Как сделать карточку блог поста на CSS.
101) Как изменить шапку сайта (часть 1).
102) Как изменить шапку сайта (часть 2).
103) Как изменить шапку сайта (часть 3).
104) Как сделать верстку портфолио на flexbox (часть 1).
105) Как сделать верстку портфолио на flexbox (часть 2).
106) Как сделать стилизацию select на CSS.
107) Как сделать стилизацию radio на CSS.
108) Про верстку формы и скрипт выбора даты.
109) Единицы измерения em, rem, vh, vw, vmin, vmax.
110) SVG спрайты.
111) Верстка формы входа (часть 1).
112) Верстка формы входа (часть 2).
113) Верстка формы входа (часть 3).
114) Адаптивная таблица для мобильных устройств.
115) Установка тени для блока и текста в CSS.
116) Как использовать псевдо классы в CSS.
117) Эффект тени при наведении в CSS.
118) CSS свойство position: sticky.
119) Вертикальный аккордеон на чистом CSS.
120) Управление размерами flex-элементов.
121) Flex блоки на примере шапки.
122) Выравнивание элементов формы на flex.
123) CSS3 свойство box-sizing.
124) Градиент для текста на CSS.
125) Как изменить полосу прокрутки на CSS.
126) 5 способов горизонтального выравнивание блоков по центру.
127) Стилизация радиокнопок на CSS.
128) Рамки вокруг элементов в CSS3.
129) Анимация набора текста на CSS.
130) 3 основных способа верстки сайтов. Часть #1.
131) 3 основных способа верстки сайтов. Часть #2.
132) 3 способа вертикального выравнивание блока по центру.