Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Знакомство с псевдоклассом CSS3 :target

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Стилизация полосы прокрутки HTML5 для разных браузеров

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

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

    Далее... 5 Комментариев »
  • Постоянная ссылка на Создание логотипа Volkswagen с использованием CSS3

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

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

    Далее... 15 Комментариев »
  • Постоянная ссылка на Создание логотипа Темного Рыцаря с использованием CSS3

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание логотипа Бэтмена с использованием CSS3

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Применение режима наложения CSS3

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание логотипа Gmail с использованием CSS3

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

    Недавно мы показывали, как создать логотип ленты новостей RSS с использованием CSS3. Нам показалось интересным создать что-то более сложное. В этом уроке мы покажем, как создать даже не один, а два варианта логотипа Gmail, используя только CSS3.

    Далее... 3 Комментариев »
  • Постоянная ссылка на Создание изображений, поддерживающих экраны Retina, с использованием media query

    Создание изображений, поддерживающих экраны Retina, с использованием media query

    Компания Apple ввела новый стандарт в разрешениях экранов устройств, который называется Retina display. С помощью миллионов пикселей устройства с Retina display могут показать более яркие, детализированные и четкие изображения. Но это влияет на то, каким образом дизайнерам и разработчикам нужно подготавливать изображения для таких устройств, так как не оптимизированные для высокого разрешения экрана изображения будут выглядеть не так уж хорошо.

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