Записи, помеченные ‘урок css3’
-
Легко настраиваемый круглый индикатор загрузки с использованием CSS
Мы обратили внимание на небольшой интересный индикатор загрузки и задумались, насколько сложно создать его с помощью CSS и анимаций CSS. Мы решили попробовать создать этот эффект с помощью увеличения размера границы до середины элемента, при этом не изменяя полную ширину элемента, используя свойства box-sizing: border-box, при применении которого значения ширины и высоты элемента будут включать в [...]
Далее... Нет комментариев » -
Создание кругового движения элемента
Некоторое время назад мы задумались, как можно создать круговое движение элемента без поворота самого элемента. Этого можно добиться разными путями, например, с помощью большого количества ключевых кадров для разных положений элемента на окружности, но нам хотелось найти наиболее простой способ.
Далее... 2 Комментариев » -
Определение поддержки браузером конкретных свойств CSS с помощью правила @supports
Так как браузеры сами решают, какие свойства поддерживать, веб-разработчикам часто нужно узнать, поддерживает ли браузер конкретные свойства, после чего заполнить пробел с помощью Polyfills (пломб, по смыслу), если нужно. Широко применяется способ решения такой задачи с помощью библиотеки JavaScript Modernizr, но это можно сделать и используя только CSS.
Далее... 1 Комментарий » -
Фоновые текстуры в виде шахматной доски и полос с использованием градиентов CSS3
Вы, вероятно, уже знакомы с градиентами CSS3 и также знаете, как добавить несколько остановок цвета, создать градиенты под углом или круговые градиенты. С чем Вы, возможно, еще не знакомы, так это с тем, что градиенты CSS3 могут быть использованы для создания разных видов часто используемых регулярных фоновых текстур, включая текстуры в виде шахматной доски, полосок и другие.
Далее... Нет комментариев » -
Создание рейтинга в виде звезд с использованием только CSS
В этом уроке мы узнаем о впечатляющих возможностях CSS и создадим рейтинг в виде звездочек на чистом CSS. К сожалению, в некоторых старых браузерах на движке Webkit из-за неправильной работы с родственными и соседними селекторами этот рейтинг не будет работать. Но во всех современных браузерах он работает отлично.
Далее... Нет комментариев » -
Создание упрощенной анимации печати с использованием единицы измерения ch
Раньше мы рассказывали, как использовать временную функцию steps() для создания эффекта анимации печати, который не теряет функциональность в старых версиях браузеров. В этом уроке мы покажем, как упростить то решение и сделать его более гибким, но, к сожалению, менее поддерживаемым браузерами. Новая версия полностью работает в браузере Firefox, но не во всех версиях правильно отображаются все шрифты, [...]
Далее... Нет комментариев » -
Создание скошенных углов с использованием CSS3
В этом уроке мы рассмотрим создание эффекта горизонтальных краев под углом на веб-странице. Если в макете есть немного непараллельные края, он выглядит менее жестким и скучным. Для создания этого эффекта мы воспользуемся псевдоэлементами ::before и ::after и трансформациями CSS3.
Далее... 3 Комментариев » -
Создание новогодней открытки с использованием CSS3
Приближается Новый Год, и мы хотим пожелать всем читателям счастливых праздников. Поэтому мы решили показать, как создать новогоднюю открытку на чистом CSS3, без использования изображений. Надеемся, Вам понравится этот урок.
Далее... Нет комментариев » -
Создание анимированной зимней шапки сайта с использованием CSS3
С помощью анимаций CSS3 можно создавать ошеломительные эффекты. Из этого урока Вы узнаете, как создать интересную анимированную шапку с помощью ключевых кадров. Этот урок посвящен грядущим праздникам, и мы очень надеемся, что его выполнение поможет вам настроиться на новогоднее настроение!
Далее... Нет комментариев »
Самые комментируемые
- Текст из крови в Adobe Photoshop 549
- Насколько важно сегодня использовать Web Safe цвета? 538
- 20 наборов кистей для Фотошопа, которые вам пригодятся 530
- Текст из воды в Adobe Photoshop 518
- 45 новых удивительных наборов кистей для творчества 423
- Более 40 фотореалистичных рисунков 205
- Ретро и винтажная типографика в веб-дизайне 194
- 30 примеров фрактального искусства 191