Вход / Регистрация
Вход
Урок 3: CSS 3 тень, градиент, рамка и анимация
План:
- Особенности CSS3
- тень
- градиент
- рамка
- анимация
Купить курс 100 $
Доступ к видео-уроку, а так же к домашним заданиям и дополнительному материалу откроется после оплаты за урок или курс.
Описание:
CSS3 - это каскадная таблица стилей для HTML5 нового поколения, первый релиз которой был в 2012 году. Первый - потому что в 2012 были опубликованы и созданы основные правила работы со стилями, не смотря на это CSS продолжает активно развиваться.
Знакомство с новыми возможностями начнём со свойств, которые вышли одни из первых и стали "символами прорыва веб-технологий", а именно: тень у объектов, градиент для фона, рамки для объектов и блоков, а так же анимация в стиле плавного изменения одного свойства объекта на другой. Под плавной анимацией я подразумеваю, что в случае изменения с белого цвета #fff на чёрный #000 мы получим интервал (период), в течении которого один цвет изменится на другой, где шаги будут #eee, #ddd, #ccc ... #222, #111, #000. Интервал, в течении которого произойдет изменение цвета мы так же указываем в CSS.
Перечень пройденных за сегодня свойств:
- тени box-shadow
- градиент background
- рамка border-radius
- анимация transition
Но самое важное в этом уроке не то, как работают данные свойства, а то, как правильно работать с этими свойствами, какие префиксы указывать для кроссбраузной поддержки. Особое внимание в уроке будет уделено порядку указания свойств, то есть сначала -moz-border-radius, а потом border-radius, или наоборот, сначала border-radius, а уже потом -moz-border-radius.
Знакомство с новыми возможностями начнём со свойств, которые вышли одни из первых и стали "символами прорыва веб-технологий", а именно: тень у объектов, градиент для фона, рамки для объектов и блоков, а так же анимация в стиле плавного изменения одного свойства объекта на другой. Под плавной анимацией я подразумеваю, что в случае изменения с белого цвета #fff на чёрный #000 мы получим интервал (период), в течении которого один цвет изменится на другой, где шаги будут #eee, #ddd, #ccc ... #222, #111, #000. Интервал, в течении которого произойдет изменение цвета мы так же указываем в CSS.
Перечень пройденных за сегодня свойств:
- тени box-shadow
- градиент background
- рамка border-radius
- анимация transition
Но самое важное в этом уроке не то, как работают данные свойства, а то, как правильно работать с этими свойствами, какие префиксы указывать для кроссбраузной поддержки. Особое внимание в уроке будет уделено порядку указания свойств, то есть сначала -moz-border-radius, а потом border-radius, или наоборот, сначала border-radius, а уже потом -moz-border-radius.