Практически каждый веб-разработчик регулярно или время от времени работает с вёрсткой. Эта статья для начинающих верстальщиков и будущих программистов. В ней вы найдёте несколько необычных и редких инструментов и приёмов HTML/CSS.
- 1. Фреймворк NES.css
- 2. Сироты и вдовы в CSS (orphans and widows CSS)
- 3. Селекторы атрибутов
- 4. Свойство border-image
- 5. List-style-image vs. background-image (добавляем изображения в качестве маркеров списка)
- 6. Добавляем расшифровку аббревиатуры
- 7. Трансформация изображений
1. Фреймворк NES.css
Дети 90-х с ностальгией вспоминают 8-битную графику игр из консолей Nintendo. Видимо, японскому разработчику B.C.Rikko не хватает игрушек из прошлого. Он создал CSS-фреймворк NES.css, с помощью которого каждый желающий может стилизовать сайт или отдельную страницу под винтажную графику.
Сложно представить деловой сайт с оформлением в стиле Nintendo. Тем не менее в фреймворке NES.css есть минимальный набор компонентов и инструментов, необходимых для создания полноценной страницы. Вот некоторые инструменты и возможности фреймворка:
- Классы для оформления текста.
- Кнопки.
- Селекторы (радио и выпадающие), чекбоксы.
- Несколько вариантов полей для ввода (инпутов).
- Контейнеры для оформления разделов страниц.
- Списки и таблицы.
- Индикаторы прогресса (прогресс-бары).
- Значки, иконки.
- Персонажи игр Nintendo.
Обратите внимание, в фреймворке есть компоненты, но нет модульной сетки. Ее можно определить самостоятельно. Также можно воспользоваться любым готовым решением.
Фреймворк NES.css можно подключить к проекту с помощью npm или Yarn, а также через CDN. Подробную информацию смотрите в репозитории фреймворка на GitHub.
2. Сироты и вдовы в CSS (orphans and widows CSS)
Понятия «сироты» и «вдовы» пришло в CSS из типографской практики. Сирота — строка абзаца, которая перенеслась на новую страницу или колонку. Вдова — слово или строка из нескольких слов в конце страницы. Сироты и вдовы также называют висячими строками. Пример можно увидеть на иллюстрации.
Сироты и вдовы ухудшают читабельность текста и уменьшают визуальную привлекательность страницы.
В вебе проблема сирот и вдов решается с помощью CSS-свойств orphans и widows.
Свойство orphans применяется к блочным элементам, например, p или div. Определяет количество строк абзаца, которые должны остаться на предыдущей странице.
div {
orphans: 3;
}
Свойство widows также применяется к блочным элементам. Определяет количество строк абзаца, которые переносятся на новую страницу.
div {
widows: 3;
}
Обратите внимание, Firefox не поддерживает свойства orphans и widows. Поддержку в других браузерах можно проверить с помощью сервиса Can I use: orphans и widows. Свойства orphans и widows входят в число Paged media, которые определяют внешний вид веб-страницы для печати.
3. Селекторы атрибутов
Почти все начинающие верстальщики знают, что к элементам можно обращаться через классы, идентификаторы и теги. Опытные специалисты применяют ещё и селекторы атрибутов.
Очень простой практический пример: с помощью селектора по атрибуту можно выделить на сайте все страницы с пустым атрибутом alt.
img[alt=""] {
border: 3px dotted red;
}
Это может пригодиться для внутренней оптимизации сайта: быстрого поиска фото с незаполненным атрибутом alt.
Вот пара практических примеров использования. С помощью селектора по атрибуту href можно произвольно оформлять ссылки на конкретные сайты или страницы. Например, выделим ссылку красным цветом.
a[href="https://ru.hexlet.io/"] {
color: red;
}
Селекторы атрибутов удобно использовать для управления инпутами. Сделаем жёлтый фон в поле для ввода текста.
input[type="text"] {
background-color: yellow;
}
4. Свойство border-image
С помощью свойства border-image можно задать рамку элемента, в которой будет отображаться изображение.
Синтаксис такой:
.jack-sparrow {
border: 50px solid transparent;
border-image-source: url(adventure.jpg);
}
Свойство border задает рамку, которая будет отображаться, если изображения нет или его невозможно загрузить. Свойство border-image-source определяет источник изображения рамки. В нем можно указать URL изображения или CSS-градиент.
Остальные свойства необязательные:
border-image-sliceопределяет смещение изображения в рамке.border-image-widthуправляет толщиной рамки.border-image-outsetпозволяет сдвинуть рамку за пределы элемента.border-image-repeatконтролирует повторение изображения в рамке.
Чтобы сделать градиентную рамку, укажите градиент в свойстве border-image-source.
.jack-sparrow {
border: 50px solid transparent;
border-image-source: linear-gradient(yellow, red);
border-image-slice: 9;
}
Свойство border-image поддерживают основные современные браузеры. Подробнее об использовании свойства читайте в справочнике MDN.
5. List-style-image vs. background-image (добавляем изображения в качестве маркеров списка)
Задать изображение в качестве маркера списка можно с помощью свойства list-style-image.
ul {
list-style-image: url(smile.png);
}
Но при таком подходе появляется проблема: маркеры вертикально смещаются относительно элементов списка.
Выравнивание с помощью vertical-align в этом случае не работает. Поэтому изображения в качестве маркеров списка удобнее задавать с помощью background-image.
Сначала обнуляем отображение маркеров.
ul {
list-style-type: none;
}
Теперь добавляем фоновое изображение к элементам списка.
li {
background-image: url(smile.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 35px;
}
В свойстве background-image указан URL изображения, свойство background-repeat в данном случае отменяет повторение фонового изображения. Свойство line-height задает высоту строки. Этот показатель должен коррелировать с размером фонового изображения. Свойство padding-left позиционирует текст относительно фонового изображения.
6. Добавляем расшифровку аббревиатуры
Очень простой инструмент, с помощью которого удобно расшифровывать акронимы и аббревиатуры в тексте.
Справка: аббревиатура — слово, образованное из первых букв нескольких слов, например, США; акроним — вид аббревиатуры, который произносится слитно, а не по буквам, например, комсомол.
Задать расшифровку для аббревиатуры можно с помощью тега abbr.
<abbr title='Соединённые Штаты Америки'>США</abbr>
Тег добавляет к тексту подсказку, которая всплывает при наведении курсора.
Точно так же работает тег acronym. Но он считается устаревшим, поэтому поддержка во всех браузерах не гарантируется. Предпочтительно всегда использовать тег abbr.
<acronym title='коммунистический союз молодежи'>Комсомол</acronym>
7. Трансформация изображений
Свойство transform применяется к разным элементам страницы. Но чаще всего его используют для работы с изображениями. Например, transform: rotate() позволяет повернуть фотографию. Это может потребоваться при верстке сложных макетов.
img {
transform: rotate(15deg);
}
Свойство transform: skewX() наклоняет изображение на заданный градус по вертикали.
img {
transform: skewX(10deg);
}
Свойство transform: skewY() наклоняет изображение на заданный градус по горизонтали.
Свойства transform: translateX() и transform: translateY() сдвигают изображение на заданное число пикселей по вертикали и горизонтали.
Современные браузеры поддерживают свойство transform. Подробную документацию смотрите в справочнике MDN.
Подборка необычных инструментов вёрстки остается открытой. Пишите в комментариях о необычных приёмах и техниках, с которыми вы сталкивались во время обучения или работы.
