Курс по CSS3. Введение. Уроки для начинающих и профи 2018
Спецификация CSS3 предоставляет нам множество возможностей и свойств, при помощи которых можно реализовывать различные визуальные эффекты, некоторые из которых ранее применялись только с использованием JavaScript или изображений. Теперь не нужно нарезать картинки для градиентов, думать, как сделать закругленные углы и задать тень у элементов, установить прозрачность, подключить нестандартные шрифты и даже сделать небольшую анимацию.
Все возможности, которые были описаны выше, а также множество других уже доступны в CSS3.
Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web страниц, уменьшение количества кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.
Данный видеокурс от команды WebForMySelf поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!


Урок 1. Курс по CSS3. Работа с фоном в CSS3. Часть 1:
От автора: в данном уроке мы приступаем к изучению новых свойств в CSS3 и начнем рассматривать возможности по работе с фоном. Css3 предоставляет нам обширные возможности по работе с фоном: позволяет задавать несколько фонов для одного блока, позволяет делать резиновый фон, позволяет задавать размер фоновым изображениям, позволяет управлять повторением фоновых изображений и многое другое.
В данном уроке мы с вами познакомимся со свойствами background-size, background-clip и background-origin, которые позволяют управлять размерами фоновых изображений, и их поведением в блоке.
По результатам урока вы научитесь управлять размером фонового изображения, поймете, как можно располагать фоновое изображение относительно блока, а также узнаете каким образом можно обрезать фон.


Урок 2. Курс по CSS3. Работа с фоном в CSS3. Часть 2:
От автора: очень часто, особенно при адаптивной верстке, возникает необходимость расположить в одном блоке несколько фоновых изображений. В данном уроке мы продолжаем работать с фоновыми изображениями css3 и в этом уроке установим несколько фоновых изображений для одного блока, вспомним свойство background-position и расположим фоновые изображения на свои места, а также рассмотрим новые значения для свойства background-repeat.
По результатам урока вы научитесь устанавливать множественные фоны и поймете, в каком порядке отображаются изображения, повторите свойство background-position и узнаете, как можно располагать элементы относительно различных сторон, разберетесь, как работают новые значения round и space для свойства background-repeat.


Урок 3. Курс по CSS3. Закругленные углы и рамки для блоков в CSS3:
От автора: раньше, если нам нужно было у какого-либо блока на сайте сделать закругленные углы, выделить рамку, вокруг блока с закругленными углами, то необходимо было для этого вырезать 2 или 3 картинки. А если блок с закругленными углами должен был растягиваться и по ширине (резиновая верстка), то необходимо было, в самом худшем случае, целых 8 картинок. И, конечно, это требовало дополнительной html разметки. Сегодня мы можем, используя css3, делать закругленные углы, а также задавать свое собственное изображение для рамки блока, написав всего несколько строк кода.
По результатам урока вы научитесь задавать радиус скругления углов для различных сторон элемента, в том числе по горизонтали и вертикали, поймете, каким образом работает свойство border-image-slice, которое указывает каким образом должна разрезаться картинка для установки ее в качестве рамки, и закрепите все пройденные свойства на примерах.


Урок 4. Курс по CSS3. Прозрачность фона, картинки, текста и цвета в CSS:
От автора: используя прозрачные и полупрозрачные блоки, можно создавать очень интересные эффекты на страницах сайта. И если раньше нам для этого нужны были изображения, то сегодня мы можем управлять прозрачностью, используя css свойства. Но работа с прозрачностью несколько специфична, поэтому в данном уроке мы рассмотрим все нюансы по работе с прозрачностью и все способы, с помощью которых мы можем устанавливать прозрачность.
По результатам урока Вы научитесь управлять прозрачностью для блоков, делать полупрозрачные цвета. Вы узнаете принцип работы свойства opacity и познакомитесь с новыми форматами задания цвета: rgba и hsla, а также закрепите изученный материал на небольшом примере.


Урок 5. Курс по CSS3. Установка теней для элемента и текста:
От автора: при помощи использования теней можно добиваться довольно интересных эффектов для различных элементов: можно создавать объемные блоки, можно создавать красивые заголовки с эффектом обводки. Если раньше для создания подобных эффектов нам требовались изображения, то css3 позволяет реализовать подобные эффекты в несколько строк кода.
В этом уроке мы познакомимся новыми свойствами, которые предоставляет нам CSS3 — box-shadow и text-shadow. По результатам урока вы без труда сможете задавать тени для различных элементов, в том числе и текста, поймете, как работают свойства box-shadow и text-shadow, а также сможете задавать несколько теней для элементов и эксперементировать над полученными результатами.


Урок 6. Курс по CSS3. Линейные и повторяющиеся градиенты CSS:
От автора: градиенты на веб-страницах используются достаточно часто. Они применяются в качестве фона для всей страницы или в качестве фона для некоторых блоков страницы. Часто градиент цвета присутствует в кнопках, при создании меню и т.д. И если раньше для создания градиента нам необходимо было вырезать картинку, то сейчас мы можем назначать градиент любой сложности, используя стили css.
В данном уроке мы рассмотрим возможности, которые нам предоставляет css3 для работы с градиентами. По результатам урока вы научитесь задавать линейные, а также повторяющиеся градиенты, поймете, как распределяются цвета и указывается направление градиента различными способами.


Урок 7. Курс по CSS3. Радиальные градиенты:
От автора: иногда на сайте бывает предусмотрен дизайнером радиальный градиент цвета. И если ранее для линейных градиентов необходима была небольшая по размеру картинка, которую можно было заставить повторяться и таким образом достигнуть целостности картинки, то для радиальных градиентов необходима была большая картинка всего градиента, что сильно увеличивало вес страницы.
Сегодня мы рассмотрим свойство css3, которые позволит нам используя код строить радиальные градиенты. По результатам урока Вы научитесь задавать радиальные градиенты и управлять ими. Сможете задавать множество цветов для радиального градиента и управлять областью перехода между цветами.


Урок 8. Курс по CSS3. Колонки:
От автора: в css3 появилось еще одно новое свойство, которое помогает нам расположить текст в несколько колонок. Располагать текст в несколько колонок иногда бывает нужно для того, чтобы добиться эффекта журнальной или газетной статьи, в которых текст идет узкими колонками. В данном уроке мы рассмотрим css свойство, которое позволяет нам это делать. Сразу скажу, что данное свойство не подходит для создания колоночной разметки, оно служит только для текста.
По результатам урока Вы научитесь располагать текст блока в несколько колонок, управлять внешним видом колонок и их разрывами.


Урок 9. Курс по CSS3. Функция calc() и свойство box-sizing:
От автора: вы, скорее всего, знаете, что полная ширина блока в css складывается из ширины блока (width), внутренних отступов (padding) и рамки (border). При верстке не всегда удобно держать в голове и вычислять значение ширины, которое нужно указать с учетом отступов и border.
В этом уроке мы рассмотрим свойства css3 box-sizing, которое упрощает расчеты в подобных ситуациях. Также в уроке мы рассмотрим очень полезную функцию css3 calc(), которая позволяет задавать вычисляемые значения. Например, если вам нужно указать, что ширина блока равна всей доступной ширине минус значение отступов, то функция calc() вам позволит очень просто реализовать вашу задумку, не прибегая к использованию javascript. По результатам урока Вы научитесь работать с функцией calc(), вспомните, из чего состоит ширина и высота элемента, а также поймете, как менять расчет данных величин.


Урок 10. Курс по CSS3. Шрифт:
От автора: используя css3, мы можем подключать к странице нестандартные шрифты. То есть если раньше мы могли на своих сайтах использовать только те шрифты, которые нам предоставляет операционная система, то теперь мы можем подключить к странице абсолютно любой шрифт. Например, можем красивым шрифтом оформить заголовки. И тут уже можно говорить о том, что шрифт является элементом дизайна.
В уроке мы подробно рассмотрим, как подключаются шрифты к странице, а также все то, что нужно учесть при подключении шрифта, чтобы он отобразился корректно во всех браузерах. По результатам урока Вы научитесь работать с сервисом google fonts, узнаете какие форматы шрифтов нужно использовать, а также сможете подключать нестандартные шрифты «вручную».


Урок 11. Курс по CSS3. Фильтры CSS3:
От автора: в данном уроке я расскажу вам о новой возможности – фильтрах CSS3. Фильтры являются довольно мощным инструментом, при помощи которых можно реализовать различные визуальные эффекты для элементов.
По результатам урока вы познакомитесь с большим количеством фильтров, при помощи которых сможете изменять яркость, насыщенность, делать размытие, добавлять тени, изменять цвета элементов, а также реализовывать некоторые другие эффекты.


Урок 12. Курс по CSS3. Работа с текстом в CSS3:
От автора: в данном уроке мы познакомимся с некоторыми новыми возможностями, которые были добавлены в CSS3 для работы с текстом, а именно поговорим о том, каким образом можно переносить длинные слова на новые строки, если они не помещаются внутри контейнера. Рассмотренные в уроке свойства особенно актуальны при создании адаптивной верстки.
По результатам урока вы узнаете несколько способов переноса слов на новую строку и поймете отличия данных свойств друг от друга.


Урок 13. Курс по CSS3. Медиа-запросы в CSS3:
От автора: медиа-запросы предоставляют возможность выбора разных стилей в зависимости от возможностей пользовательского дисплея или устройства, таких как ширина области просмотра, разрешение экрана и т.д.
В этом видеоуроке мы поговорим с вами о медиа-запросах, о том, из чего они состоят, рассмотрим несколько примеров использования медиа-запросов при создании адаптивной верстки. По результатам урока вы научитесь задавать медиа-запросы с различными условиями, узнаете о некоторых логических операторах, а также сможете применить полученные знания на практике.


Урок 14. Курс по CSS3. Псевдоклассы:
От автора: в данном видео мы познакомимся с Вами с множеством новых псевдоклассов, которые были добавлены в CSS3. С помощью псевдоклассов можно получить доступ и управлять различными элементами в потоке. Без данных возможностей трудно представить свою работу, поэтому каждый разработчик должен знать о псевдоклассах, которые мы рассмотрим, так как их использование может значительно сократить время разработки.
По результатам урока вы познакомитесь с новыми псевдоклассами CSS3, узнаете для чего они предназначены и поймете, как использовать ту или иную возможность в определенной ситуации.


Урок 15. Курс по CSS3. Псевдоэлементы CSS3:
От автора: с помощью псевдоэлементов можно выделять элементы, делать дополнительное оформление для элементов, не прибегая к созданию дополнительной html разметки. В этом уроке я познакомлю вас с новым синтаксисом для псевдоэлементов в CSS3, повторим старые, а также изучим один из новых и довольно часто используемых псевдоэлементов.
По результатам урока вы поймете разницу между старым и новым синтаксисом псевдоэлементов CSS3, повторите некоторые из них, а также научитесь стилизовать атрибут placeholder используемый в элементах форм на страницах вашего сайта.


Урок 16. Курс по CSS3. Селекторы CSS3:
От автора: кроме стандартных селекторов, например, id, class в CSS3 появилось множество новых селекторов, которые позволяют более гибко управлять и назначать стили элементам на странице. Например, мы можем назначить определенный стиль ссылкам, которые начинаются с определенного слова.
В данном видео мы поговорим о новых селекторах, которые были добавлены в CSS3. Обсудим, где лучше применять данные возможности и закрепим их на практических примерах. По результатам урока вы изучите новые селекторы атрибутов CSS3, которые сможете применять на практике, не создавая при этом лишнего кода в проектах.


Урок 17. Курс по CSS3. Трансформации CSS3:
От автора: довольно часто в современных дизайнах мы видим элементы с различными эффектами трансформаций, например наклоненные или повернутые блоки, вращающиеся элементы. Если раньше реализовать такие эффекты было довольно проблематично, то в CSS3 предусмотрели такую возможность и добавили свойство transform, при помощи которого можно реализовывать различные сложные элементы всего лишь в несколько строк кода.
По результатам урока вы познакомитесь со свойством transform, а также изучите функции перемещения, масштабирования, наклона и вращения элементов которые облегчат вам жизнь и помогут реализовывать классные эффекты.


Урок 18. Курс по CSS3. 3D трансформация CSS3:
От автора: данный видеоурок является продолжением изучения CSS трансформаций и, прежде чем приступить к его просмотру, следует посмотреть предыдущее видео. А в этом уроке мы рассматриваем возможности 3D трансформаций.
По результатам урока вы разберетесь каким образом работают 3D трансформации, для чего нужна перспектива и изучите новые функции, которые применимы для оси Z.


Урок 19. Курс по CSS3. Переходы CSS3:
От автора: очередное классное нововведение было добавлено в CSS3, которое позволяет нам реализовывать плавные переходы между значениями свойств элементов. Теперь чтобы добавить самую простую анимацию от начального до конечного значение достаточно написать несколько строк CSS кода и произойдет магия, при помощи которой элементы начнут плавно изменять значения своих свойств.
По результатам урока вы научитесь делать различные плавные переходы значений свойств элементов. Сможете устанавливать время плавного перехода, выбирать необходимые свойства, устанавливать задержку, а также использовать различные функции в качестве перехода.


Урок 20. Курс по CSS3. Анимации CSS3:
От автора: в спецификацию CSS3 была добавлена возможность по созданию анимации для элементов. По сравнению с плавными переходами, анимация является очень мощным инструментом, который позволяет нам делать различные эффекты, не прибегая к использованию JavaScript.
По результатам урока вы ознакомитесь с синтаксисом и основами создания анимаций, после чего сможете реализовать простые эффекты в собственных проектах.