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

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

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

  • Постоянная ссылка на Использование горизонтального разделителя

    Использование горизонтального разделителя

    Элемент горизонтального разделителя <hr> - один из наиболее редко и неправильно используемых в коде HTML, возможно, из-за того, что он не выглядит привлекательно в исходном состоянии. При использовании его без задания свойств на веб-странице, он выглядит следующим образом:

    Далее... 1 Комментарий »
  • Постоянная ссылка на Использование селекторов last-child и last-of-type в CSS

    Использование селекторов last-child и last-of-type в CSS

    Использование псевдоклассов CSS, выбирающих последние элементы, — это еще один полезный способ для отделения внешнего вида от разметки: вместо того, чтобы засорять код HTML классами для задания свойств последним элементам и переназначать этих классы другим элементам при изменении содержимого, можно просто использовать псевдокласс, который применится только к последним элементам без необходимости хоть как-то изменять разметку.

    Далее... 1 Комментарий »
  • Постоянная ссылка на Фоновые изображения для экранов Retina с использованием свойства задания изображения

    Фоновые изображения для экранов Retina с использованием свойства задания изображения

    Хотя отображение изображений, относящихся к содержимому, на экранах высокого разрешения хорошо поддержано в HTML5 и CSS, включая новый элемент для больших изображений, а также атрибуты srcset и sizes, фоновым изображениям для экранов Retina почти не уделялось внимания, и для них не появлялось новых возможностей отображения. Так как фоновые изображения часто довольно большие и по разрешению и по размеру файла, это особенно неприятно. [...]

    Далее... 10 Комментариев »
  • Постоянная ссылка на Использование селекторов first-of-type, first-child и nth-of-type

    Использование селекторов first-of-type, first-child и nth-of-type

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

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

    Создание классических типографских эффектов: первая висячая строка абзаца

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

    Далее... 15 Комментариев »
  • Постоянная ссылка на Затемнение изображений простым и быстрым способом на чистом CSS

    Затемнение изображений простым и быстрым способом на чистом CSS

    Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

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

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

    Иногда нам может быть нужно, чтобы у блока был фон, состоящий не из одного изображения, а из нескольких не повторяющихся изображений, как в примере ниже. Конечно, можно просто совместить эти изображения в одном файле в редакторе изображений, например, таком как Photoshop, аккуратно обрезать, выбрать подходящую степень сжатия и сохранить в формате JPEG или PNG-8. 

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

    Использование элементов блоков

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Простой эффект параллакса с использованием единиц измерения em

    Простой эффект параллакса с использованием единиц измерения em

    Веб-разработчик Adam Mustill разработал очень интересный способ создания эффекта паралакса с помощью изменения значения базовых единиц измерения em на веб-странице. Мы решили улучшить этот способ и рассказать об этом ниже.

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