Урок 19. Курс по CSS3. Переходы CSS3


Содержание материала:

CSS3 — переходы

Представленные в данной статье примеры переходов вы можете протестировать на странице «Примеры переходов».

Добавление в CSS псевдоклассов сделало жизнь легче для всех веб-разработчиков. Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов :hover и :focus, не прибегая к использованию сценариев JavaScript. Например, чтобы создать меняющуюся кнопку (т.е. кнопку, реагирующую на наведение курсора мыши), достаточно просто предоставить набор новых свойств стиля для псевдокласса :hover. Эти свойства задействуются автоматически, когда пользователь наводит курсор на кнопку.

Какими бы не были псевдоклассы замечательными, они больше не являются передовой технологией. Проблема с ними состоит в их характере типа «все или ничего». Например, настройки стиля псевдокласса :hover активируются сразу же при наведении курсора на элемент, т.е. происходит резкий скачок из одного стиля в другой. А вот в приложениях Flash, Silverlight или в прикладных программах эффект обычно более утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться или подсвечиваться, но делается это с использованием тонкой анимации, занимающей долю секунды.

Некоторые веб-разработчики начинают использовать подобные эффекты в своих работах, но для этого обычно требуется прибегать к помощи системы анимации JavaScript от сторонних разработчиков. А теперь CSS3 предоставляет им более простой способ — новую возможность переходов, позволяющую осуществлять плавный переход от одного набора стилей к другому.

Простой цветовой переход

Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. Такой пример показан на рисунке ниже, где изменение цвета кнопки при наведении на нее курсора осуществляется с помощью возможностей перехода CSS3:

Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный переход при отодвигании курсора. В результате получаем более изящную кнопку.

Смену цвета без эффекта перехода можно реализовать следующим кодом:

А этот код создает кнопку, которая форматируется только что описанным стилем:

Чтобы получить плавное изменение цвета, т.е. переход, нам нужно в только что описанный стиль добавить свойство transition. (Обратите внимание, что это свойство вставляется в обычный стиль (в данном случае стиль slickButton), а не в псевдокласс :hover.)

Как минимум, свойство transition требует установки двух значений: свойства CSS, которое нужно анимировать, и времени, на протяжении которого нужно выполнить изменение стилей. В данном примере переход применяется к свойству background, а время перехода равно 0.5 секунды:

Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три свойства transition, вместо обговариваемого одного. Это потому, что стандарт переходов CSS3 все еще находится в процессе разработки и поддерживающие его браузеры требуют применения префиксов разработчиков. Таким образом, чтобы переход работал в браузерах Chrome, Safari, Firefox и Opera, нужно установить три значения свойства transition, добавляя к каждому из них свой префикс разработчика. А для Internet Explorer 10 (который, как ожидается, будет поддерживать переходы) нужно будет добавить еще одну версию свойства, с префиксом -ms-. К сожалению, использование экспериментальных свойств может породить неопрятные таблицы стилей.

Так, в данном примере присутствует один мелкий недостаток, а именно, в активированной кнопке меняются два элемента оформления — цвет самой кнопки и цвет текста на ней. Но эффект перехода применяется только к цвету фона кнопки, в результате чего смена цвета текста происходит мгновенно, в то время как цвет фона кнопки меняется постепенно.

Эту проблему можно решить двумя способами. При первом подходе свойству transition присваивается список переходов, разделенных запятыми:

Но этот код можно сократить, если нам нужно установить переход для всех изменяющихся свойств и при одинаковом времени перехода для них всех. В таком случае вместо списка свойств для перехода мы просто используем ключевое слово all:

На момент написания этих строк переходы поддерживались браузерами начиная с Opera 10.5 и Firefox 4, а также всеми версиями Safari и Chrome, с которыми вам когда-либо приходилось работать. Браузер Internet Explorer поддерживает переходы начиная с версии 10. Отсутствие поддержки переходов — не такая и большая проблема, как может показаться, т.к. браузер все равно меняет стили. Только эта смена происходит почти мгновенно, а не с растянутым во времени переходом. А это уже хорошая новость, т.к. веб-сайт может использовать переходы и в то же самое время сохранять основные визуальные стили для старых браузеров.

Задержка и комбинирование эффектов перехода

В эффектах перехода можно использовать свойство transition-delay, которое задерживает начало перехода на указанное время:

Теперь анимация перехода при наведении указателя мыши будет задерживаться на две секунды. То же самое произойдет и при отведении указателя мыши. Значение свойства transition-delay можно указывать в самом свойстве transition, как необязательный параметр:

Этот код аналогичен предыдущему. Спецификация CSS3 позволяет комбинировать несколько эффектов перехода (с разной длительностью), как это было продемонстрировано с кнопкой. Вместо указания всех подробностей перехода в одном свойстве transition, можно использовать свойства transition-property (для указания анимируемого свойства) и transition-duration (для указания задержки):

Это правило гораздо сложнее рассмотренных ранее. Во-первых здесь мы анимируем сразу 4 свойства указанные в transition-property. Во-вторых одним из анимируемых свойств является трансформация масштаба, которая позволяет при наведении курсора мыши на кнопку плавно увеличить ее в размерах, создавая очень красивый эффект.

Использование функций замедления

Переход можно настроить более тонко. Для этого можно использовать свойство transition-timing-function, которое позволяет изменять скорость перехода в процессе его осуществления. Например, начало перехода может быть медленным с последующим ускорением, или наоборот, быстрый переход в начале и замедленный в конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и более сложных анимациях оно может изменить общее восприятие эффекта.

Функции замедления не являются каким-то инновационным средством CSS3, они уже давно используются в WPF и Silverlight (Инерционность движения).

Топ-пост этого месяца:  Как оформить страницу «Услуги» на сайте - примеры раздела услуг

Свойство transition-timing-function использует функцию cubic-bezier() для задания функции замедления через кривую Безье. Кривая Безье определяется двумя точками: начальное смещение и конечное смещение. Чтобы понять это давайте рассмотрим пример определения простой кривой Безье:

Этой функции соответствует следующий график:

Как видите здесь две точки с координатами (0.42, 0) и (0.58, 1) задают вид кривой Безье. Если вы укажите данную функцию замедления в предыдущем примере, то все эффекты перехода будут сначала выполняться чуть медленее, потом скорость будет больше и в конце перехода скорость снова уменьшится (согласно графику).

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

Опробуйте этот эффект на примере кнопки, гарантирую, результат вам понравиться.

В свойстве transition-timing-function можно использовать несколько стандартных значений, которые определяют некоторые значения функции cubic-bezier:

Стандартные значения функций кривых Безье, используемые в свойстве transition-timing-function

Значение График Функция cubic-bezier() Описание
linear 0, 0, 1, 1 Немедленный старт и остановка, анимация происходит с постоянной скоростью
easy 0.25, 0.1, 0.25, 1 Быстрый старт и быстрое ускорение, медленный переход с замедлением в конце
ease-in 0.42, 0, 1, 1 Медленный старт с нарастающим ускорением и резкой остановкой в конце
ease-out 0, 0, 0.58, 1 Обычный старт с замедлением в конце
ease-in-out 0.42, 0, 0.58, 1 Медленный старт с небольшим ускорением, скорость перехода постоянная, в конце происходит замедление

Шаги анимации

Кроме функций замедления, элемент можно анимировать используя шаги, т.е. ступенчато. (Примером может послужить секундная стрелка часов, которая сначала двигается, а затем осуществляется задержка на 1 секунду, потом снова двигается и снова задержка и т.д.) Шаги задаются с помощью функции steps(). Ниже показан пример:

Теперь анимация увеличения кнопки будет проходить рывками. Задержка между рывками в данном случае будет 667ms (2000/3). Второй параметр функции steps указывает, будет ли рывок выполняться сразу или после задержки:

Переходы в CSS

Переходы в CSS позволяют плавно перейти от одного состояния элемента к другому. Работает это так, что отдельные свойства анимируются от начального состояния до конечного.

Вы можете определить:

  • transition-property : какие свойства анимируются;
  • transition-duration : как долго длится анимация;
  • transition-timing-function : как вычисляются промежуточные состояния;
  • transition-delay : анимация начинается через некоторое время.

Вы можете установить каждое свойство CSS по отдельности или использовать сокращённую версию: transition . В этом случае, только transition-duration является обязательным.

Имейте в виду, что переход представляет собой специфический вид анимации, где есть только начальное и конечное состояние.

Быстрый пример

Переходы часто используются для состояния :hover .

Вместо мгновенного применения правил CSS при наведении, фон и цвет текста меняются медленно.

transition-duration

transition-duration является единственным стилевым свойством, необходимым для создания перехода. Оно может быть установлено либо в секундах (2s), либо в миллисекундах (100ms).

Если вы хотите, чтобы ваш переход длился полсекунды, то можете написать 0.5s или 500ms. В зависимости от того, насколько быстро вы хотите, чтобы длился переход, может быть проще и/или быстрее писать одну единицу.

transition-property

Только треть свойств CSS может быть анимирована. На сайте Mozilla есть полный список свойств.

По умолчанию у свойства transition-property значение all , это просто означает, что будут анимироваться все возможные свойства.

Вы можете разрешить анимацию только одного или нескольких свойств.

Свойство border полностью анимируется и позволяет легко наблюдать медленный переход (2 секунды).

transition-timing-function

Функция времени определяет, как вычисляется значение каждого свойства во время перехода.

По умолчанию переход равен ease : он ускоряется в начале и замедляется в конце.

Вы можете решить, что переход будет происходить с постоянной скоростью. Функция времени может ускорить или замедлить переход.

Самый простой способ визуализации функций времени заключается в изменении свойств позиционирования, вроде left .

Имейте в виду, что все переходы занимают одинаковое время (1 секунда).

Если вы хотите получить представление, как работают другие функции времени, посмотрите эту шпаргалку.

cubic-bezier

Если все эти готовые функции времени не подходят, вы можете написать свою собственную, используя кривые Безье.

Сайт cubic-bezier.com — это простой инструмент для визуального написания своих собственных кривых.

transition-delay

transition-delay определяет задержку, т. е. как долго переход должен ждать, прежде чем начнётся на самом деле.

Как и с transition-duration вы можете использовать секунды (s) или миллисекунды (ms).

Перемещения и трансформации в CSS3

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

  • object: Установление главных правил нашего объекта.
  • van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
  • move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

Топ-пост этого месяца:  Для чего нужен атрибут title настройка работы со ссылками, изображениями и другими элементами

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

CSS

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

CSS

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

CSS

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.


HTML

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

Уроки по CSS, CSS3

Технология СSS представляет собой список команд для браузера, с помощью которых он понимает, как и где отображать те или иные части веб-страницы. Данная рубрика содержит уроки по CSS и обновленной версии этой технологии — CSS3, которая позволяет облегчить жизнь вебмастерам. Из уроков вы узнаете, как подключать таблицу стилей к сайту, познакомитесь с основными свойствами стилей и научитесь с ними работать.

Как сделать фон картинкой в CSS

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

Отступ абзаца через CSS

Любая нормальная статья состоит из множества абзацев, причем первая строка каждого из них содержит небольшой отступ. В данном небольшом уроке мы покажем, как можно сделать отступ у абзаца с помощью CSS.

Изменение внешнего вида первой буквы абзаца

Иногда при работе с сайтом или блогом стоит задача выделить первую букву абзаца, к примеру, определенным шрифтом или цветом. это можно сделать с помощью HTML, задав вручную стиль отображения первой буквы в абзаце.

Смена картинки при наведении мыши

Безусловно, у вебмастера есть много задач, которые он постоянно решает. Сегодня мы поговорим о смене картинки при наведении на нее курсора мыши. Допустим, что есть картинка и нужно, чтобы при наведении на нее.

Адаптация изображений под Retina-дисплеи

В данной статье мы расскажем о том, как адаптировать изображения сайта под Retina-экран. На таких экранах часть графики большинства сайтов расплывается, качество изображений падает. Существует несколько способов.

Что такое CSS3?

CSS3 — это новая версия каскадных таблиц стилей CSS. В CSS3 появилась масса новых возможностей, которые в несколько раз упрощают огромное количество задач. Краткий список возможностей этой технологии смотрите.

Стили ссылок в CSS

При создании сайта, а также при наполнении его контентом необходимо знать, как работать со ссылками. В этом уроке вы узнаете какие стили ссылок используются в CSS и на примерах научимся с ними работать.

Единицы измерения в CSS

Единицы измерения в CSS необходимы при создании любого блога или сайта. К примеру, нам нужно задать размер шрифта, сделать отступы. Не зная размерности мы вряд ли сможем это сделать. В CSS применяется несколько.

Свойства шрифта в CSS

В каскадных таблицах стилей CSS предусмотрено множество возможностей для того, чтобы придать шрифту определенные значения. Стиль шрифта в CSS формируется с помощью свойств и значений. Основные свойства шрифтов.

Выравнивание текста в CSS

Часто стоит задача сделать выравнивание текста на сайте по вертикали или горизонтали. В CSS это реализуется с помощью соответствующих атрибутов и их значений. Что это за атрибуты и какие у них есть значения мы и рассмотрим.

Селекторы > 23.07.2012 06.10.2020 Уроки по CSS, CSS3

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. CSS позволяет указать свои собственные селекторы. К примеру, можно присвоить класс всем ссылкам в блоке навигации.

Закругленные углы у блоков в CSS3

Технология CSS3 позволяет легко и просто создавать закругленные углы у блоков. Это делается с помощью свойства border-radius. Таким образом, закругленные углы можно делать для любых блочных элементов на странице.

Урок 19. Курс по CSS3. Переходы CSS3

Всем привет!
Хочу вам представить мой бесплатный курс по основам CSS.
Пройдя курс, вы сможете создавать красивые сайты и, что самое главное, очень быстро. Без знаний основ CSS вы не сможете создавать нестандартные профессиональные сайты. Я рекомендую после изучения основ HTML перейти сразу к изучению основ CSS.
Еще раз напомню, что этот курс абсолютно бесплатный! Учитесь, пробуйте, экспериментируйте!

В знак благодарности за бесплатный курс по основам CSS вы можете делиться этими уроками в социальных сетях.

Изучать CSS – это легко!

Содержание курса
«Основы CSS для начинающих»

  1. Знакомство с CSS. Основы CSS для начинающих. Урок №1
  2. Синтаксис CSS. Основы CSS для начинающих. Урок №2
  3. Как подключить CSS — способы подключения. Основы CSS для начинающих. Урок №3
  4. Комментарии в CSS коде. Основы CSS для начинающих. Урок №4
  5. Оформление текста в CSS. Основы CSS для начинающих. Урок №5
  6. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  7. Коды цветов в CSS — / R G B / HTML. Основы CSS для начинающих. Урок №7
  8. Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
  9. Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9
  10. Списки в CSS. Основы CSS для начинающих. Урок №10
  11. Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11
  12. Рамка в CSS. Основы CSS для начинающих. Урок №12
  13. Блоки в CSS. Основы CSS для начинающих. Урок №13
  14. Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
  15. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
  16. Слои в CSS. Основы CSS для начинающих. Урок №16
  17. Тесты CSS онлайн. Основы CSS для начинающих
  18. Создание простого сайта на CSS. Практика
Топ-пост этого месяца:  Создание прототипа приложения с помощью CSS Grid и переменных примеры работы

Автор бесплатного курса
Костаневич Степан Владимирович
Спасибо, что выбрали мой курс!

2020 © копирование материала разрешается только с ссылкой на исходный материал.

Урок 19. Курс по CSS3. Переходы CSS3

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Урок 19. Курс по CSS3. Переходы CSS3

Данный комплекс уроков по CSS взят из моего платного сборника, под названием «Все Технические Моменты Онлайн-Бизнеса в Видеоформате». Пройдя этот курс, Вы научитесь верстать графические шаблоны любой сложности.

Этот курс предоставляется Вам бесплатно. Единственное, что я прошу — после прохождения курса пришлите мне свой отзыв. Каждый отзыв очень важен для меня.

01. Установка расширений

02. Принцип работы CSS

03. Подключение и 3 базовых селектора

04. Групповые селекторы

05. Селекторы потомков

06. Псевдоселекторы ссылок

07. Семейство шрифтов

08. Размер шрифта

09. Жирный, курсив

11. Выравнивание и красная строка

12. Высота строки, расстояния

13. Сокращенная запись

15. Работа со списками

17. Каскадность и приоритетность

18. Блочная модель, margin и padding

19. Ширина и высота блока, выравнивание

20. Конфликты полей

21. Блочные и встроенные элементы

22. Фоновый цвет и изображение. Введение

23. Повтор фонового изображения

24. Позиционирование фонового изображения

25. Фиксация фона

26. Краткая запись фоновых свойств

27. CSS и таблицы

28. CSS и формы часть 1

29. CSS и формы часть 2

30. Свойство float введение

31. Создание простого каркаса на основе float

32. Очистка обтекания

33. Колонки одной высоты

34. Позиционирование введение

35. Абсолютное позиционирование

36. Относительное позиционирование

37. Фиксированное позиционирование

39. Видимость элементов

40. Максимальная и минимальная ширина сайта

42. Решение проблем IE6

43. Два способа подключения стилей

44. Наследование ненаследуемых свойств

Понравился курс?

Поблагодарить автора можно переведя любую сумму на один из кошельков: 4100170054673; R262428062535, Z250999233356

Видеокурс «Практика HTML5 и CSS3»

  • Создавать проект.
  • Анализировать макет проекта.
  • Описывать HTML разметку для каждого блока.
  • Применять технологию flex.
  • Задавать CSS стили.
  • О видеокурсе
  • Программа
  • Особенности

Бесплатный видеокурс «Практика HTML5 и CSS3» – это пошаговое пособие по верстке адаптивных сайтов с нуля. Программа состоит из 6 видеоуроков, посвященных основным этапам работы.

Уроки адаптивной верстки на HTML5 и CSS3

Практически ориентированный курс будет интересен начинающим веб-мастерам и верстальщикам, которые осваивают профессию с самых азов. В уроках подробно разобраны примеры и даны исходники кода, поэтому уже во время обучения вы можете начать работу над своим первым сайтом.

Основные темы курса:

  • адаптивная верстка сайта;
  • основы HTML5 и CSS3;
  • работа с PSD-пакетами;
  • дизайн и стили контента.

С видеокурсом от WebForMyself каждому под силу понять основы верстки на HTML5 и CSS3, чтобы создавать адаптивные сайты на заказ или для собственных интернет-проектов.

Online-курс
по основам
HTML 5 и CSS 3

Востребованность HTML и CSS

HTML и CSS – две ключевые технологии, с помощью которых делают интернет-сайты.
Именно с этих языков начинают свою карьеру многие программисты.

вакансий требуют
владения HTML и CSS

вакансий на должность
frontend-программиста
требуют знания HTML5 и CSS3

вакансий на должность
backend-программиста
требуют уверенного владения HTML5 и CSS3

Умение верстать — навык, который нужен не только программистам, но и контент-менеджерам, дизайнерам,
верстальщикам, системным администраторам, копирайтерам, маркетологам, аналитикам.

Программа курса

Интенсивная программа с короткими видео-уроками и большим количеством практики.
Изучаем HTML5 и CSS3 на примере реального Photoshop-макета.

  1. Введение в HTML и CSS — 6 уроков, 15 заданий
  2. Базовые понятия интернета — 6 уроков, 12 заданий
  3. HTML теги — 11 уроков, 29 заданий
  4. Основы CSS — 19 уроков, 47 заданий
  5. Работа с изображениями — 10 уроков, 19 заданий
  6. Структура документа — 5 уроков, 9 заданий
  7. Блоки и сетка документа — 15 уроков, 35 заданий
  8. Погружение в формы — 11 уроков, 23 задания
  9. Таблицы — 3 урока, 7 заданий
  10. Завершение курса — 1 урок, 0 заданий

Дизайн-макет

Разбираем реальные Фотошоп-макеты квартирного бюро.
Главная страница, список квартир, о компании, карточка бронирования, отзывы.
Все макеты доступны для скачивания.

Сертификат

Ученики, которые изучат теорию и выполнят все задания — получают сертификат.

Переходы в CSS3

Теперь мы можем с легкостью украшать наши страницы прекрасными эффектами с динамическими трансформациями. Однако для создания настоящей анимации необходимо определять переходы между соседними шагами процесса.

Свойство transition было создано специально для упрощения этой нетривиальной задачи. Оно волшебным образом создает недостающие шаги, подразумевающиеся в нужном направлении движения. Добавляя всего одно это свойство, мы приказываем браузеру взять на себя заботу об анимации, создать вместо нас все эти невидимые шаги и сгенерировать плавный переход из одного состояния в другое.

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-transition: — moz-transform 1s ease-in-out 0.5s; — webkit-transition: — webkit-transform 1s ease-in-out 0.5s;

Как видно из листинга 3.26, свойство transition принимает до четырех параметров, разделенных пробелами. Первое значение представляет свойство, на базе которого будет создаваться переход. Его необходимо указывать, так как одновременно могут меняться несколько свойств, а нам, вероятно, нужно создать шаги только для одного из них. Второй параметр устанавливает время, за которое должен произойти переход из начального положения в конечное. Третьим параметром может выступать любое из пяти ключевых слов: ease, linear, ease-in, ease-out и ease-in-out. Эти ключевые слова определяют, на основе какой кривой Безье будет выполняться процесс перехода. Каждое ключевое слово представляет отдельную кривую Безье, и единственный способ узнать, какая из них лучше всего подходит именно для вашего перехода, — протестировать все варианты на экране. Последний параметр свойства transition — это задержка. Он определяет, какова будет пауза перед началом перехода. Для того чтобы переход охватывал все меняющиеся свойства данного объекта, необходимо указать ключевое слово all. Также можно явно объявить все участвующие свойства, просто перечислив их через запятую.

Замените кодом из листинга 3.26 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.

В листинге 3.26 мы создали переход для изменений, определяемых свойством transform. Однако свойство transition поддерживает не все свойства CSS, а список поддерживаемых, вероятно, со временем будет меняться. Вам придется самостоятельно тестировать их или изучать веб-сайты производителей соответствующих браузеров для получения дополнительной информации о поддержке.

Добавить комментарий
Поставьте оценку