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

• 

  Использование фона у тега body

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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