Курс по CSS3 2015

Введение. Учебник по основам CSS для начинающих:
CSS 3 открывает нам новые возможности для оформления веб-страниц. В css3 добавлены новые свойства для работы со шрифтами и текстом, для работы с фоновыми изображениями, блоками, границами, трансформацией, анимацией и многое другое. Если раньше, например, для того, чтобы сделать закругленные углы для сайта или градиенты нам необходимы были изображения и дополнительная разметка, то используя css3, мы можем закруглить углы или создать градиенты, используя только новые css свойства.
Преимуществом использования css3 является ускорение разработки веб-страниц. Используя css3 можно сократить использование изображений на страницах, что снизит общий размер страницы и сократит количество http запросов на сервер. Так же css3 позволяет делать анимированные эффекты для сайтов, без использования javascript и библиотеки jQuery, что тоже упрощает разработку и облегчает вес страницы.
Следует так же отметить, что сегодня новые свойства css3 уже обладают достаточно неплохой браузерной поддержкой, а некоторые из них уже можно применять, не используя вендорные префиксы для различных браузеров, что делает применение css3 комфортным.
Вот некоторые разделы, которые мы рассмотрим в курсе по css3: работа со шрифтом, оформление текста, свойства фона, границы элементов, селекторы, трансформация, псевдоклассы и многое другое.
Видекурс по CSS3 от WebForMySelf. Наши курсы помогут вам овладеть всеми аспектами языка CSS3.


Урок 01-Введение.Работа с фоном:
От автора: в первом уроке курса мы с вами поговорим о возможностях, которые нам предоставляет css 3. Поскольку свойства, которые относятся к css уровня 3 относительно новые, то некоторые из них обладают ограниченной поддержкой в браузерах. В уроке мы рассмотрим инструмент, с помощью которого, мы сможем определять какое свойство, какими браузерами поддерживается. Так же в данном уроке мы с вами рассмотрим новые возможности, которые нам предоставляет css3 по работе с фоновыми изображениями.
По результатам урока вы научитесь определять, поддерживает ли определенный браузер какое-либо свойство css3, а изучите новые возможности по работе с фоном в css.


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


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


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


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


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


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


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


Урок 9. Псевдоклассы:
От автора: недавно на глаза попалась статья по юзабилити о том, что не будет лишним выделять на сайте некоторые, интуитивно не понятные ссылки. В данном случае речь шла о том, что если по клику мыши на ссылку будет происходить отправка почты, то рядом с такой ссылкой не плохо, было бы, показывать иконку, которая бы это поясняла (иконка почты — конверт). Или если по клику будет открываться PDF файл, то рядом с такой ссылкой показать иконку PDF-файла и т.д. Мне показалось это хорошей идеей. И я нашел самое простое решение этой задачи.
В данном уроке мы реализуем то, что описано выше. При чем не будем создавать и описывать лишних классов и потом назначать их к нужному типу ссылок. В уроке мы воспользуемся более изящным и коротким решением, используя селекторы атрибутов CSS3.
По результатам урока Вы узнаете, какие новые возможности работы со стилями, используя значения атрибутов, открывает нам CSS3. Так же вы научитесь задать стили для элементов, не назначая им классы, а используя значения их атрибутов.


Урок 10. Селекторы:
От автора: часто при верстке сайтов возникают ситуации, когда нужно выделить, например, последний элемент в каком-либо блоке. Или ситуации могут быть еще сложнее: выделить все четные/нечетные элементы, выделить каждый, например, пятый элемент. Так же может быть полезным добавить стилей для выделенного текста на странице. Очень хорошо смотрится, когда input type=»checkbox» в отмеченном состоянии каким-то образом выделяется от невыбранных checkbox-ов.
Чтобы все это сделать, ранее нам пришлось бы обратиться к помощи JavaScript. Но сегодня мы все это можем сделать с помощью расширенного набора псевдоклассов, которые нам предоставляет CSS3. В данном уроке мы на примерах разберем те возможности, которые перед нами открывают новые псевдоклассы CSS3.
По результатам урока Вы научитесь использовать псевдоклассы CSS3. Сможете выделять различные элементы, не создавая лишних классов CSS и не прибегая к помощи javascript. Сможете улучшить юзабилити форм на ваших сайтах.


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