Записи, помеченные ‘css3 эффекты’

• 

  Создание скошенных углов с использованием CSS3

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

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

  Цикл уроков об анимации CSS3. Часть 2: Основы свойств анимаций

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

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

  Применение режима наложения CSS3

  Если вы когда-либо использовали графический редактор, такой как Photoshop или Pixelmator, вы, вероятно, уже знакомы с режимами наложения. Режимы наложения — это ряд режимов, которые позволяют объекту смешаться с другими объектами, и создают таким образом результирующее изображение. При правильном использовании режим наложения позволит получить впечатляющий результат, например, такой:

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

  Создание логотипа Pepsi с использованием CSS3

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

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

  Создание логотипа ленты новостей RSS с использованием CSS3

  Благодаря своей функции логотип ленты новостей RSS — один из наиболее часто используемых логотипов в веб-дизайне. Вы, скорее всего, встречали много уроков по созданию логотипа ленты новостей RSS с помощью графических редакторов, таких как Photoshop, а как насчет нарисовать этот логотип, использую только CSS3?

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

  Знакомство со структурным селектором CSS3 :first-of-type

  Как хорошо что в CSS3 добавились новые селекторы, позволяющие обращаться к определенным элементам, не используя классы, идентификаторы или другие свойства элемента! В этом уроке мы расскажем о селекторе :first-of-type.

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

  Обращения к файлу определенного типа при помощи селектора атрибутов CSS

  Селектор атрибутов очень удобен для выбора элементов без добавления излишних идентификаторов и классов. До тех пор, пока у элемента, к которому нужно обратиться, есть такие атрибуты, как href, src и type, нам не нужно добавлять лишнее. Селекторы атрибутов фактически присутствовали, начиная с CSS 2.1, и теперь, после добавления еще нескольких селекторов атрибутов в спецификации CSS3, мы можем [...]

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

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

  Мы уже рассказывали о разных свойствах CSS3. Кроме этого есть еще свойства, которые пока что не включены в официальные спецификации CSS3, но которые стоит попробовать применить, и одно из таких свойств — box-reflect, которое введено для движка Webkit. Это свойство может создавать отражение указанных объектов.

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

  Оформляем текст с использованием CSS3

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

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