CSS (каскадные таблицы стилей) коренным образом изменил Всемирную паутину. Если раньше инструкции по отображению макета, типографики и т.д. приходилось кропотливо программировать в HTML-документе веб-сайта, то теперь язык таблиц стилей позволяет сделать это за гораздо меньшее время, и прежний негибкий метод ушел в прошлое. Элементы HTML, ориентированные на отображение, считаются устаревшими с тех пор, как на сцену вышел HTML5 — теперь содержание и представление рассматриваются отдельно.
CSS неуклонно развивается как «живой стандарт», открывающий множество разнообразных и сложных возможностей для дизайна, но в то же время становится все сложнее следить за ним. Здесь вы найдете самые интересные и полезные приемы, включая соответствующие фрагменты CSS.
- Нумерация заголовков
- Скрытие элементов удобным для SEO способом
- Создание теней текста
- Изменение элементов сайта с помощью фильтров CSS
- Оптимальная настройка подписей к изображениям
- Подчеркивание первой буквы в отрывках
- Используйте эффект параллакса
- Выделение обязательных полей формы
- Списки с треугольными пулевыми точками
Нумерация заголовков
Если вы раньше добавляли в HTML-документ различные заголовки и подзаголовки и нумеровали их, то, скорее всего, делали это вручную или с помощью скрипта. Но вместо этого вы можете просто использовать CSS и позволить языку таблиц стилей вести подсчет. Этот старый трюк CSS, который поддерживается всеми современными браузерами, можно использовать с помощью следующего фрагмента CSS:
#Heading {
counter-reset: heading;
}
h1:before {
content: counter(heading)") ";
counter-increment: heading;
}
h1 {
counter-reset: subheading;
}
h2:before {
content: counter(heading)"." counter(subheading)") ";
counter-increment: subheading;
}
body{
font-family: courier new;
}Результат будет выглядеть следующим образом:
Скрытие элементов удобным для SEO способом
Попытки скрыть содержимое HTML-документа с помощью таких команд, как display: none; или visibility: hidden, не очень хорошо работают с поисковыми системами. Хотя чрезмерное их использование не рекомендуется, следующий код предоставляет отличный способ умело обойти эти два элемента:
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}Создание теней текста
Тени в текстах можно создавать с помощью графических программ, но это требует необходимых ноу-хау, а также препятствует разборчивости содержимого для поисковых систем. Начиная с третьей версии языка таблиц стилей, существует несколько CSS-эффектов, которые при совместном использовании приводят к привлекательным результатам и не изменяют базовые элементы текста. Следующий совет CSS демонстрирует опцию затенения из языка таблиц стилей:
p {
font-size: 50pt;
font-family: sans-serif;
text-shadow: 10px 11px 18px rgba(300, 180, 100, 1),
-10px -11px 18px red;
}С помощью этого кода <p> элементы могут быть определены так, что у них будет две тени. Это число может быть увеличено, но убедитесь, что вы всегда используете запятую для разделения. Первые две части информации определяют позиционирование тени — сначала координата X, а затем координата Y. Третья часть информации определяет размер. В последнем месте можно указать цвет тени, либо с помощью RGBA-индикации (300, 180, 100, 1), как в первом ряду, либо абсолютный, как во втором (красный). В примере показано, как это выглядит после применения:
Изменение элементов сайта с помощью фильтров CSS
CSS — это не только хорошая альтернатива Photoshop, когда дело доходит до затенения; язык таблиц стилей также поставляется с полезными эффектами фильтров, подобными тем, что используются в программах редактирования изображений. Таким образом, графику, фон, тексты и видео можно творчески адаптировать, увеличивая яркость, изменяя контрастность или используя градации серого. Опции фильтра доступны почти во всех современных браузерах (кроме Internet Explorer). Синтаксис этих CSS-эффектов можно увидеть на примере фильтра оттенков серого:
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}Указанный фильтр (в данном случае градации серого), отображается в круглых скобках и идет после конкретного значения, которое определяет силу фильтра — в данном примере значение (1) соответствует 100%.
Дополнительные функции, которые могут оказаться полезными:
|
Фильтр |
Описание |
Значение |
|
размытие(VALUE) |
Мягкий фокус |
Радиус в пикселях |
|
яркость(VALUE) |
Яркость |
Стандартная: 1, осветлить: >1, затемнить: <1 |
|
контрастность(VALUE) |
Контраст |
Стандартный: 1, увеличить: >1, уменьшить: <1 |
|
инвертировать(VALUE) |
Инвертировать цвета |
Значение 1: полная инверсия |
|
opacity(VALUE) |
Непрозрачность |
Максимальное значение: 1 (элемент полностью исчезает) |
|
saturate(VALUE) |
Sättigung |
Стандартное значение: 1, увеличение: >1, уменьшение: <1 |
|
sepia(VALUE) |
Цвета сепии |
Максимальное значение: 1 (соответствует тону сепии 100%) |
Оптимальная настройка подписей к изображениям
Когда речь идет об описательных фрагментах текста, размещаемых под изображениями, не существует каких-либо особых правил, которых следует придерживаться. Выравнивание подписи по центру выглядит лучше, если описание не длиннее одной строки; в противном случае оно может выглядеть неряшливо. С другой стороны, использование левого выравнивания для коротких подписей также не рекомендуется. Решением является предоставление отдельной информации в контейнерном элементе <figure>, а также в элементе <figcaption>, поскольку оба они используются как стандарт, когда речь идет о подписях к изображениям. Вот соответствующий фрагмент CSS:
figure {
text-align: center;
}
figcaption {
display: inline-block;
text-align: left;
}Этот трюк CSS приводит к тому, что подпись к изображению по определению выравнивается влево, но на самом деле она отображается по центру благодаря информации inline-block, которая вступает в силу, когда текст не занимает всю длину изображения.
Подчеркивание первой буквы в отрывках
С помощью псевдоклассов можно выделять отдельные специфические элементы HTML, например, первую букву абзаца. С помощью ::first-letter вы можете легко реализовать эту команду, которая часто встречается в рассказах, особенно сказках:
p{
font-family: "bookman old style"
}
p:first-child::first-letter{
font-family: "papyrus";
font-size: 25px
font-weight: bold
}В данном фрагменте используются следующие семейства шрифтов: Papyrus (для первой буквы) и Bookman Old Style (для остального текста). Результат:
Используйте эффект параллакса
Многие современные сайты построены на эффекте параллакса, который срабатывает у посетителя при прокрутке. При этом фон движется медленнее переднего плана, что создает эффект 3D. Эффект достигается с помощью JavaScript или jQuery. Следующий трюк CSS3 показывает, как можно включить параллаксную прокрутку в свой сайт, просто используя язык таблицы стилей:
p {
width: 100%;
margin: auto;
font-size: 50px;
transform: scale(.5);
font-family: courier new;
font-weght: bold;
}
div {
background-image: url("URL DES HINTERGRUNDBILDES");
background-attachment: fixed;
transform: scale(1.25);}
body {
height: 100%;
overflow: scroll;
}Используя параметр background-image: url, вы можете указать URL-адрес фонового изображения. Используемые здесь значения типографики и размера элементов могут быть настроены индивидуально.
Выделение обязательных полей формы
Вы можете оптимизировать формы, встроенные в ваш сайт, используя :required и :optional. Оба псевдокласса позволяют цветом указать, какие поля формы должны быть заполнены, а какие являются оптимальными. Соответствующий фрагмент CSS выглядит следующим образом:
:required {
border: 1px solid red;
}
:optional {
border: 1px solid black;
}В данном случае обязательные поля получают красную рамку, в то время как необязательные поля отображаются с простой черной рамкой:
Списки с треугольными пулевыми точками
Если в вашем HTML-документе есть неупорядоченные списки, вам не всегда нужно использовать стандартные круглые точки. С помощью следующего трюка CSS вы можете легко создать треугольные точки:
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}Результат будет выглядеть следующим образом:
