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

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

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

  • Постоянная ссылка на Тонированные изображения с помощью множественных фоновых изображений

    Тонированные изображения с помощью множественных фоновых изображений

    Свойству фона в CSS можно задавать значения, разделенные запятой, т. е., множественные фоновые изображения. Их можно представить как наложенные друг на друга фоны, так как у них есть порядок наложения. Если наложить прозрачный цвет на изображение, можно его затонировать. Возможно, это делается не так очевидно, как можно было бы ожидать.

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

    Создание многострочного градиентного фона для текста

    Мы столкнулись с интересной задачей: создать многострочный градиентный фон для текста. Создать текст с фоном уже довольно непросто, а также нам, вероятно, пригодится свойство box-decoration-break (перенос блока оформления). Как оказалось, нам понадобятся еще некоторые приемы, чтобы все сработало.

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание интересных нумерованных списков с помощью CSS

    Создание интересных нумерованных списков с помощью CSS

    Обычные нумерованые списки выглядят очень просто. Конечно, можно использовать фоновые изображения и другие разнообразные способы оформления у обычного нумерованного списка, но при этом не хватает возможностей управления самой цифрой. В этом примере вместо стандартного нумерованного списка создадим собственный.

    Далее... Нет комментариев »
  • Постоянная ссылка на Использование фильтров у фоновых изображений

    Использование фильтров у фоновых изображений

    С помощью свойства фильтра можно довольно легко наложить фильтр на целый элемент. Но что делать, если нужно применить фильтр только к фоновому изображению элемента? Сделать это весьма непросто. Существуют свойства CSS, которые предназначены специально для фоновых изображений, такие как background-blend-mode, но режимы наложения и фильтры — не одно и то же. Создается впечатление, что для этой цели [...]

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание копии движений указателя мыши

    Создание копии движений указателя мыши

    Из этого урока вы узнаете об интересных возможностях кода CSS. Можно создать сетку квадратов из положений указателя мыши. Еще интересней скопировать эту сетку, поместить ее в другом месте экрана, немного изменить ее внешний вид и отображать движения указателя мыши в режиме реального времени.

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

    Создание заголовков с линиями по краям

    Нам стало интересно, как можно сверстать дизайн с большим заголовком и подзаголовком меньшего размера под ним, который бы обрамлялся двойными линиями справа и слева от центрированного текста. Простой путь здесь — использовать изображения, но мы попробуем пойти намного более сложным путем — создадим это с использованием только CSS, в котором сложности возникнут из-за разнообразных свойств текста, таких [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Использование связывания объектов

    Использование связывания объектов

    Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только CSS, так что это интересный и нересурсоемкий способ.

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание рамки с трех сторон элемента различными способами

    Создание рамки с трех сторон элемента различными способами

    Нам показалось интересным рассмотреть различные способы задания рамки с трех сторон элемента. Среди этих способов нет особо сложных, но, надеемся, Вам будет проще выбрать для себя один или несколько способов, например, за простоту синтаксиса, эффективность, способ записи или что-то другое. 

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

    Создание стилей для полос прокрутки

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

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

Страница 1 из 4112345102030...Последняя »