верстка - Страница 25

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

Создание анимаций CSS с использованием единственного ключевого кадра

Как Вы могли заметить, мы считаем важным по мере возможности уменьшать количество кода, конечно, до тех пор, пока он остается читабельным. Многие анимации CSS, с которыми мы сталкиваемся, можно записать более компактно, и в этом уроке мы расскажем, как именно это можно сделать.
Далее... 1 Комментарий »
Создание аккуратного индикатора загрузки с использованием CSS

В этом уроке мы расскажем, как создать еще один индикатор загрузки. После создания легконастраиваемого круглого индикатора загрузки мы решили попробовать разработать классический индикатор загрузки, используя только CSS. Такой индикатор загрузки можно создать разными способами, но нам хотелось, чтобы наш индикатор был аккуратным, простым, понятным, подходящим для разных ситуаций и ему не требовался бы большой и сложный код CSS [...]
Далее... Нет комментариев »
Скошенные углы и отрицательные радиусы границ с использованием градиентов CSS3

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

Мы обратили внимание на небольшой интересный индикатор загрузки и задумались, насколько сложно создать его с помощью CSS и анимаций CSS. Мы решили попробовать создать этот эффект с помощью увеличения размера границы до середины элемента, при этом не изменяя полную ширину элемента, используя свойства box-sizing: border-box, при применении которого значения ширины и высоты элемента будут включать в [...]
Далее... Нет комментариев »
Модный полиграфический дизайн

С появлением Интернета полиграфия должна была бы отойти на второй план, что ей и пророчили. Однако вышло несколько иначе. Бумажные издания и промо-материалы несколько видоизменились, подстроились под новые условия и заняли свою нишу. Сегодня мы собрали примеры современного и модного полиграфического дизайна. Подскажем что именно здесь есть что почерпнуть для дизайна в цифровом формате.
Далее... 2 Комментариев »
Создание кругового движения элемента

Некоторое время назад мы задумались, как можно создать круговое движение элемента без поворота самого элемента. Этого можно добиться разными путями, например, с помощью большого количества ключевых кадров для разных положений элемента на окружности, но нам хотелось найти наиболее простой способ.
Далее... 2 Комментариев »
Определение поддержки браузером конкретных свойств CSS с помощью правила @supports

Так как браузеры сами решают, какие свойства поддерживать, веб-разработчикам часто нужно узнать, поддерживает ли браузер конкретные свойства, после чего заполнить пробел с помощью Polyfills (пломб, по смыслу), если нужно. Широко применяется способ решения такой задачи с помощью библиотеки JavaScript Modernizr, но это можно сделать и используя только CSS.
Далее... 1 Комментарий »
Фоновые текстуры в виде шахматной доски и полос с использованием градиентов CSS3

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

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