Спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Теперь не нужно нарезать картинки для градиентов, думать, как сделать закругленные углы и задать тень у элементов, установить прозрачность, подключить нестандартные шрифты и даже сделать небольшую анимацию.
Все возможности, которые были описаны выше, а также множество других уже доступны в CSS3.
Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web страниц, уменьшение количества кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.
Данный видеокурс от команды WebForMySelf поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!
Урок 1. Курс по CSS3. Работа с фоном в CSS3. Часть 1
В данном уроке мы приступаем к изучению новых свойств в CSS3 и начнем рассматривать возможности по работе с фоном. Css3 предоставляет нам обширные возможности по работе с фоном: позволяет задавать несколько фонов для одного блока, позволяет делать резиновый фон, позволяет задавать размер фоновым изображениям, позволяет управлять повторением фоновых изображений и многое другое.
Урок 2. Курс по CSS3. Работа с фоном в CSS3. Часть 2
Очень часто, особенно при адаптивной верстке, возникает необходимость расположить в одном блоке несколько фоновых изображений. В данном уроке мы продолжаем работать с фоновыми изображениями css3 и в этом уроке установим несколько фоновых изображений для одного блока, вспомним свойство background-position и расположим фоновые изображения на свои места, а также рассмотрим новые значения для свойства background-repeat.
Урок 3. Курс по CSS3. Закругленные углы и рамки для блоков в CSS3
Раньше, если нам нужно было у какого-либо блока на сайте сделать закругленные углы, выделить рамку, вокруг блока с закругленными углами, то необходимо было для этого вырезать 2 или 3 картинки. А если блок с закругленными углами должен был растягиваться и по ширине (резиновая верстка), то необходимо было, в самом худшем случае, целых 8 картинок. И, конечно, это требовало дополнительной html разметки. Сегодня мы можем, используя css3, делать закругленные углы, а также задавать свое собственное изображение для рамки блока, написав всего несколько строк кода.
Урок 4. Курс по CSS3. Прозрачность фона, картинки, текста и цвета в CSS
Используя прозрачные и полупрозрачные блоки, можно создавать очень интересные эффекты на страницах сайта. И если раньше нам для этого нужны были изображения, то сегодня мы можем управлять прозрачностью, используя css свойства. Но работа с прозрачностью несколько специфична, поэтому в данном уроке мы рассмотрим все нюансы по работе с прозрачностью и все способы, с помощью которых мы можем устанавливать прозрачность.
Урок 5. Курс по CSS3. Установка теней для элемента и текста
При помощи использования теней можно добиваться довольно интересных эффектов для различных элементов: можно создавать объемные блоки, можно создавать красивые заголовки с эффектом обводки. Если раньше для создания подобных эффектов нам требовались изображения, то css3 позволяет реализовать подобные эффекты в несколько строк кода.
Урок 6. Курс по CSS3. Линейные и повторяющиеся градиенты CSS
Градиенты на веб-страницах используются достаточно часто. Они применяются в качестве фона для всей страницы или в качестве фона для некоторых блоков страницы. Часто градиент цвета присутствует в кнопках, при создании меню и т.д. И если раньше для создания градиента нам необходимо было вырезать картинку, то сейчас мы можем назначать градиент любой сложности, используя стили css.
Урок 7. Курс по CSS3. Радиальные градиенты
Иногда на сайте бывает предусмотрен дизайнером радиальный градиент цвета. И если ранее для линейных градиентов необходима была небольшая по размеру картинка, которую можно было заставить повторяться и таким образом достигнуть целостности картинки, то для радиальных градиентов необходима была большая картинка всего градиента, что сильно увеличивало вес страницы.
Урок 8. Курс по CSS3. Колонки
В css3 появилось еще одно новое свойство, которое помогает нам расположить текст в несколько колонок. Располагать текст в несколько колонок иногда бывает нужно для того, чтобы добиться эффекта журнальной или газетной статьи, в которых текст идет узкими колонками. В данном уроке мы рассмотрим css свойство, которое позволяет нам это делать. Сразу скажу, что данное свойство не подходит для создания колоночной разметки, оно служит только для текста.
Урок 9. Курс по CSS3. Функция calc() и свойство box-sizing
Вы, скорее всего, знаете, что полная ширина блока в css складывается из ширины блока (width), внутренних отступов (padding) и рамки (border). При верстке не всегда удобно держать в голове и вычислять значение ширины, которое нужно указать с учетом отступов и border.
Урок 10. Курс по CSS3. Шрифт
Используя css3, мы можем подключать к странице нестандартные шрифты. То есть если раньше мы могли на своих сайтах использовать только те шрифты, которые нам предоставляет операционная система, то теперь мы можем подключить к странице абсолютно любой шрифт. Например, можем красивым шрифтом оформить заголовки. И тут уже можно говорить о том, что шрифт является элементом дизайна.
Урок 11. Курс по CSS3. Фильтры css3
В данном уроке я расскажу вам о новой возможности – фильтрах CSS3. Фильтры являются довольно мощным инструментом, при помощи которых можно реализовать различные визуальные эффекты для элементов.
Урок 12. Курс по CSS3. Работа с текстом в CSS3
В данном уроке мы познакомимся с некоторыми новыми возможностями, которые были добавлены в CSS3 для работы с текстом, а именно поговорим о том, каким образом можно переносить длинные слова на новые строки, если они не помещаются внутри контейнера. Рассмотренные в уроке свойства особенно актуальны при создании адаптивной верстки.
Урок 13. Курс по CSS3. Медиа-запросы в CSS3
Медиа-запросы предоставляют возможность выбора разных стилей в зависимости от возможностей пользовательского дисплея или устройства, таких как ширина области просмотра, разрешение экрана и т.д.
Урок 14. Курс по CSS3. Псевдоклассы
В данном видео мы познакомимся с Вами с множеством новых псевдоклассов, которые были добавлены в CSS3. С помощью псевдоклассов можно получить доступ и управлять различными элементами в потоке. Без данных возможностей трудно представить свою работу, поэтому каждый разработчик должен знать о псевдоклассах, которые мы рассмотрим, так как их использование может значительно сократить время разработки.
Урок 15. Курс по CSS3. Псевдоэлементы CSS3
C помощью псевдоэлементов можно выделять элементы, делать дополнительное оформление для элементов, не прибегая к созданию дополнительной html разметки. В этом уроке я познакомлю вас с новым синтаксисом для псевдоэлементов в CSS3, повторим старые, а также изучим один из новых и довольно часто используемых псевдоэлементов.
Урок 16. Курс по CSS3. Селекторы CSS3
Кроме стандартных селекторов, например, id, class в CSS3 появилось множество новых селекторов, которые позволяют более гибко управлять и назначать стили элементам на странице. Например, мы можем назначить определенный стиль ссылкам, которые начинаются с определенного слова.
Урок 17. Курс по CSS3. Трансформации CSS3
Довольно часто в современных дизайнах мы видим элементы с различными эффектами трансформаций, например наклоненные или повернутые блоки, вращающиеся элементы. Если раньше реализовать такие эффекты было довольно проблематично, то в CSS3 предусмотрели такую возможность и добавили свойство transform, при помощи которого можно реализовывать различные сложные элементы всего лишь в несколько строк кода.
Урок 18. Курс по CSS3. 3D трансформация CSS3
Данный видеоурок является продолжением изучения CSS трансформаций и, прежде чем приступить к его просмотру, следует посмотреть предыдущее видео. А в этом уроке мы рассматриваем возможности 3D трансформаций.
Урок 19. Курс по CSS3. Переходы CSS3
Очередное классное нововведение было добавлено в CSS3, которое позволяет нам реализовывать плавные переходы между значениями свойств элементов. Теперь чтобы добавить самую простую анимацию от начального до конечного значение достаточно написать несколько строк CSS кода и произойдет магия, при помощи которой элементы начнут плавно изменять значения своих свойств.
Урок 20. Курс по CSS3. Анимации CSS3
В спецификацию CSS3 была добавлена возможность по созданию анимации для элементов. По сравнению с плавными переходами, анимация является очень мощным инструментом, который позволяет нам делать различные эффекты, не прибегая к использованию JavaScript.
Автор: webformyself
