Записи, помеченные ‘урок css3’

• 

  Обзор условных инструкций CSS

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

  Далее... 2 Комментариев »
• 

  Анимированные полосы загрузки с использованием CSS3 и фонов SVG

  Последнее время интернет стал сходить с ума от дизайна без использования изображений, так что мы решили создать анимированную полосу загрузки с использованием изображений SVG вместо обычных блочных элементов CSS для отображения геометрических фигур. Основная цель этого урока — создать интересные полосы загрузки с использованием CSS, после чего добавить изображение SVG как фон. И потом анимировать это с [...]

  Далее... Нет комментариев »
• 

  Цикл уроков об анимациях CSS3. Часть 1. Основы. Что такое анимации?

  Если вы читали наш цикл уроков о переходах CSS3, то знаете, что переходы — это анимированные эффекты между начальным и конечным состояниями, которые запускаются событием, таким как активация псевдокласса CSS :hover или событием Javascript. В этом цикле уроков мы рассмотрим анимации CSS3. У них много общего с переходами, но они более гибкие и несколько более сложные в [...]

  Далее... Нет комментариев »
• 

  Создание галереи изображений с увеличением с использованием только CSS3

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

  Далее... Нет комментариев »
• 

  Создание раздвигающейся галереи изображений с использованием только CSS3

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

  Далее... 1 Комментарий »
• 

  Цикл уроков о переходах CSS3, часть 4: Продвинутые способы переходов

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

  Далее... Нет комментариев »
• 

  Создание ярлыков с использованием CSS для добавления пометок содержимому

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

  Далее... Нет комментариев »
• 

  Создание параллакс-эффекта

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

  Далее... Нет комментариев »
• 

  Цикл уроков о переходах CSS3. Часть 3. Временная функция Безье

  Во второй части цикла уроков мы рассматривали свойство CSS3 transition-timing-function, которое отвечает за изменение скорости анимации со временем во время перехода. Значений этого свойства, таких как ease, ease-in и linear, обычно достаточно даже для очень требовательного веб-разработчика. Тем не менее вы можете создать свою собственную временную функцию, используя значение cubic-bezier. Оно выглядит и звучит сложно, но его можно [...]

  Далее... 1 Комментарий »