CSS-хитрости: полезные фрагменты для вашего веб-проекта

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

CSS неуклонно развивается как «живой стандарт», открывающий множество разнообразных и сложных возможностей для дизайна, но в то же время становится все сложнее следить за ним. Здесь вы найдете самые интересные и полезные приемы, включая соответствующие фрагменты 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;
}

Результат будет выглядеть следующим образом:

Оцените статью
cdelat.ru
Добавить комментарий