Архив рубрики ‘css’

• 

  Создание интересной формы авторизации с использованием HTML5 и CSS3

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

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

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

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

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

  Создание группы вкладок с использованием селектора :target на чистом CSS3

  В этом уроке мы создадим интересную анимированную группу вкладок, которая покажет возможности селектора CSS3 :target, используя только HTML5 и CSS3. Нам не понадобится JavaScript или изображения, и все будет работать в браузерах Internet Explorer версии 9 и выше, Chrome, Firefox, Safari и Opera.

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

  Создание интересной кнопки с использованием CSS3

  Сегодня мы научимся создавать интересную кнопку при помощи CSS3. Мы стараемся использовать тег <button>, а не <input type="submit" />, но, что бы вы не предпочли, стиль по умолчанию будет зависеть от вашей операционной системы. Это может несколько расстраивать... Давайте создадим более интересную кнопку, используя стили CSS3, анимацию и трансформации:

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

  Расположение текста столбцами с использованием CSS3

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

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

  Знакомство с псевдоклассом CSS3 :target

  Псевдокласс :target – одна из интересных возможностей CSS3. Он соответствует элементу, который является целью идентификатора в URI документа. Этот идентификатор содержит в URI символ «#», за которым следует имя идентификатора, которое соответствует значению атрибута id элемента в документе.

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

  Стилизация полосы прокрутки HTML5 для разных браузеров

  Ползунок — это новый способ ввода информации, введенный в HTML5. Этот способ позволяет ввести число в заданном диапазоне. Браузер стандартно отобразит этот способ ввода информации как полосу прокрутки. Это очень интуитивно понятный пользовательский интерфейс, широко распространенный в приложениях. Мы можем передвигать ручку ползунка вправо или влево, чтобы выбрать число в пределах диапазона.

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

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

  В этом уроке мы создадим более сложный логотип Volkswagen. Логотипы, о создании которых мы рассказывали раньше, состояли из плоских фигур, тогда как у логотипа Volkswagen гораздо больше глубины, несколько градиентов и тени. Мы сосредоточимся на свойстве градиента CSS3, разбирая код и объясняя синтаксис. Также коснемся свойства box-shadow и повторим вкратце псевдоэлементы.

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

  Создание логотипа Темного Рыцаря с использованием CSS3

  Продолжая тему предыдущего урока, в котором мы воссоздали логотип Бэтмена с использованием CSS3, мы решили рассказать о создании логотипа Бэтмена, используемого в новых фильмах. Этот логотип проще, и его легче создать, чем исходный логотип Бэтмена, так что мы добавили несколько дополнений, таких как градиенты CSS3 и тень блока, чтобы не стоять на месте и коснуться темы, не [...]

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