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

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

Легко настраиваемый круглый индикатор загрузки с использованием 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, но не во всех версиях правильно отображаются все шрифты, [...]
Далее... Нет комментариев »
Создание игры крестики-нолики с использованием только CSS

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

Изначальная идея задавать стили элементам в зависимости от количества потомков принадлежит André Luís, но мы считаем, что ее можно улучшить, значительно сократив количество нужного кода CSS. О чем мы и расскажем в этом уроке.
Далее... 2 Комментариев »
Создание ярлыков в виде марочных билетов с использованием CSS3

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