Верстая веб-интерфейсы с помощью CSS, вы, наверняка, задавались вопросом, как кодировать тот или иной эффект. Сейчас мы поделимся с вами некоторыми CSS эффектами.
1. Нумерация заголовков и подзаголовков
Скажем, у вас есть набор заголовков и подзаголовков в документе и вы нумеруете их вручную или с помощью скрипта. Вместо этого вы можете использовать CSS счетчики, чтобы сделать тоже самое. Взгляните:
/* CSS код */
.page {
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;
}
<!-- HTML код -->
<div class="page">
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
<h2>Subheading Title</h2>
<h1>Heading Title</h1>
</div>
2. Гламурное подчеркивание с помощью CSS
Иногда мы хотим подчеркнуть текст красивой пунктирной или штрих-пунктирной линией, вместо одной сплошной. Выбора у нас нет и мы применяем CSS свойство border-bottom. Но использование border-bottom не лучшее решение, если текст, который вы подчеркиваете, переносится на новую строку.
В CSS3 указано не одно, а три новых свойства для оформления текста: text-decoration-color, text-decoration-line и text-decoration-style, которые могут заменить старый добрый text-decoration.
/* CSS код */
a {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: orange;
}
.sample {
text-decoration: underline overline dotted green;
}
.through {
text-decoration: line-through;
color: red;
}
.wavy {
text-decoration: underline wavy violet;
}
<!-- HTML код -->
<a href="#">sample link</a>
<br/><br/>
<span class="sample">sample text</span>
<br/><br/>
<span class="through">to be cut text</span>
<br/><br/>
<span class="wavy">wavy line</span>
3. Кавычки в цитате с помощью CSS
Нет необходимости беспокоиться о вводе правильных фигурных кавычек для цитат, потому в HTML есть специальный тег для этого: <q>.
Тег <q> также используется для выделения чего-либо единичными кавычками. Например, в таких предложениях как "для этого используется `CSS`".
Допустим, вы не хотите использовать двойные кавычки по умолчанию или у вас есть более чем один уровень вложенных кавычек, вы можете определить свои обозначения для цитаты, используя CSS2 свойство quotes.
/* CSS код */
p {
quotes: "「 " " 」" '“' '”' "‘" "’"
}
<p>
<q>
Объединим <q>силы</q> вместе с
<q>Я - <q>Капитан Планета</q></q>
</q>
</p>
4. Управление недисциплинированными таблицами
Вы можете встретить большую таблицу с различным содержимым ячеек, которые отказываются оставаться в пределах указанной вами ширины. Приручить таблицу можно с помощью CSS свойства table-layout.
Если быть точными, управление происходит через значение table-layout: fixed; Когда вы присваиваете таблице определенную форму, таблица и ширина ее ячеек определяется шириной таблицы или первым ее рядом (которые могут быть определены пользователем), а не по содержанию. Это поддерживается всеми браузерами.
/* CSS код */
table {
width: 400px;
table-layout: fixed;
border-collapse: collapse;
margin: auto;
}
td{
border: 1px solid black;
}
5. Sticky - прикрепление элемента
Прикрепляемые элементы – это такие элементы страницы, которые будут всегда оставаться в поле зрения на странице, даже если ее прокручивать вниз. Другими словами, они прикрепляются к видимой области страницы (либо к полосе прокрутки). Вы можете создать это с помощью CSS, используя свойство position: sticky;.
Они действуют как элементы, расположенные на странице до прокрутки, а после – как закрепленные элементы, как только начинается прокрутка. На данный момент это свойство поддерживается Firefox 43+, Safari 9+, iOS Safari 8.4+.
<!-- HTML код -->
<div class="extra"></div>
<br>
<div class="wrapper">
<div class="sticky">Приклейся!</div>
</div>
/* CSS код */
.sticky {
position: sticky;
background: yellow;
width: 100px;
height: 100px;
border: 1px solid red;
top: 70px;
left: 10px;
}
.wrapper {
border: 1px solid blue;
width: 75%;
margin: auto;
height: 400px;
background: url("colorful-stripes-292.jpg");
}
.extra{
background: green;
width: 75%;
margin: auto;
height: 100px;
}
body {
height: 1000px;
}
6. Получить текст определенной формы
Вы хотите, чтобы текст на странице красиво обтекал изображение, которое отображается рядом с ним? Можете попробовать CSS фигуры. Для реализации CSS фигур мы можем использовать три свойства shape-outside, shape-margin и shape-image-threshold. На сегодняшний день они поддерживаются Chrome 45+, Safari 9+, Opera 35+, iOS Safari 8.4+, Android Browser 47+, Chrome для Android 49+.
<!-- HTML код -->
<div>
<img src="rabbit-shape.png" alt="Кролик">
<p>
В тот же миг Алиса юркнула за ним следом,
не думая о том, как же она будет выбираться обратно.
</p>
</div>
/* CSS код */
img {
width: 300px;
height: 300px;
float: left;
shape-outside: circle(50%);
}
7. Обязательные поля
Если у вас есть форма, существует высокая вероятность того, что некоторые поля в ней обязательны для заполнения, а другие нет. Вам нужно будет дать понять пользователям что есть что. В CSS для этого служат псевдоклассы :required и :optional. Все современные браузеры поддерживают эти псевдоклассы.
<!-- HTML код -->
<form>
<label for="name">Имя: </label>
<input required id="name" type="text">
<br><br>
<label for="surname">Фамилия:</label>
<input id="surname" type="text">
</form>
/* CSS код */
:required {
border: 1px solid pink;
}
:optional {
border: 1px solid skyblue;
}
8. Выделение цветом
Если вам не нравится стандартный синий цвет, мы можем покрасить выбранную область каким-либо другим цветом с помощью псевдоэлемента ::selection. Он поддерживается всеми современными браузерами.
<!-- HTML код -->
<p>
В тот же миг Алиса юркнула за ним следом,
не думая о том, как же она будет выбираться обратно.
</p>
/* CSS код */
p::selection {
background: red;
color: yellow;
}
p::-moz-selection {
background: orange;
color: yellow;
}
9. А отметили ли?
Когда поле с галочкой отмечено, можно добавить какой-нибудь другой опознавательный знак, показывающий то, что конкретная строка была выбрана.
Есть CSS, который создаёт связь между двумя рядом расположенными элементами. В CSS есть возможность выбора смежные элементы, отмеченная знаком «+», так что мы можем использовать отдельную отметку помимо поля для галочки. Но также существует псевдо-класс :checked для пометки сделанного выбора.
<!-- HTML код -->
<input id="mycheck1" type="checkbox">
<label for="mycheck1">Выбери это</label>
<br />
<input id="mycheck2" type="checkbox" checked>
<label for="mycheck2">Выбери это</label>
<br />
<input id="mycheck3" type="checkbox">
<label for="mycheck3">Выбери это</label>
/* CSS код */
input:checked + label{
background: yellow;
}
10. Буквы как в старинных книгах
В примере № 6 все было замечательно, но уж больно невзрачно выглядела заглавная буква в абзаце. Давайте сделаем ее такой же как в древних рукописях. В этом нам поможет псевдоэлемент ::first-letter.
<!-- HTML код -->
<p>
В тот же миг Алиса юркнула за ним следом,
не думая о том, как же она будет выбираться обратно.
</p>
/* CSS код */
p{
font-family: "bookman old style"
}
p:first-child::first-letter{
font: bold 25px/normal "papyrus";
}
11. Хотите узнать больше?
Элемент может иметь класс X или данные Y данных или какое-то другое значение атрибута. Если вам когда-нибудь понадобитсяотобразить такое значение атрибута элемента рядом с ним, мы можем использовать content: attr(X). Он извлекает значение атрибута X элемента и мы сможем показать его рядом с элементом. Увы, надписи будут только в Хроме.
<!-- HTML код -->
<fieldset>
<legend>Выберите фрукт</legend>
<input type="radio" name="animal" value="Манго">
<br>
<input type="radio" name="animal" value="Яблоко">
<br>
<input type="radio" name="animal" value="Груша">
<br>
</fieldset>
/* CSS код */
input::after {
content: "\00a0\00a0" attr(value);
}
body,input{
font-family: courier new;
font-weight: bold;
font-size: 16pt;
}
12. Центрирование элементов
Центрирование элементов в CSS для начинающих сродни подвигу. Различные элементы требуют разный набор CSS свойств для центровки. Мы рассмотрим один из многих примеров, которые доступны в всемирной паутине, так что вы можете еще раз вспомнить как это делается.
<!-- HTML код -->
<div class="wrapper">
<div class="center"></div>
</div>
/* CSS код */
.wrapper {
display: table-cell;
vertical-align: middle;
border: 1px solid black;
height: 150px;
width: 600px;
}
.center {
margin: auto;
background: red;
height: 20px;
width: 20px;
}
13. Указание формата файла на основе ссылки
Вы когда-нибудь видели рядом с ссылкой небольшое изображение, указывающее на какой тип файла эта ссылка? PDF-? или DOC? Вы правы, в CSS есть все для достижения этой цели. content: url() - это то, что мы будем использовать, чтобы отобразить изображение напротив ссылки.
<!-- HTML код -->
<a href="test.pdf">ebook to download</a>
/* CSS код */
[href$=".pdf"]::after{
content: " " url("pdf-24.png");
}
14. Запуск параллакс-эффекта
Паралла́кс — это изменение видимого положения объекта относительно удаленного фона. Этот эффект является популярным в веб-сайтах, которые реализуют параллакс-скроллинг. Существуют различные способы его реализации, наш пример ниже работает с помощью background-attachment: fixed;.
<!-- HTML код -->
<div>
<p>
В тот же миг Алиса юркнула за ним следом,
не думая о том, как же она будет выбираться обратно.
</p>
</div>
/* CSS код */
p {
width: 100%;
margin: auto;
font: bold 50px/normal 'courier new';
transform: scale(.5);
}
div {
background-image: url("triangular-wallpaper.jpg");
background-attachment: fixed;
transform: scale(1.25);
}
body {
height: 100%;
overflow: scroll;
}
15. Мощь CSS анимаций
Возможно, не самый лучший момент для "для этого есть CSS", т.к. вы уже наверняка знаете много о CSS-анимации. Но повторение – мать учения. Есть много случаев использования CSS-анимации, мы лишь представим пример использования цветового выделения:
<!-- HTML код -->
<div></div>
/* CSS код */
@keyframes blink {
0% {background: violet;}
25% {background: blue;}
50% {background: yellow;}
75% {background: red;}
100% {background: violet;}
}
@-webkit-keyframes blink {
0% {background: violet;}
25% {background: blue;}
50% {background: yellow;}
75% {background: red;}
100% {background: violet;}
}
div {
height: 300px;
width: 300px;
animation: blink 20s linear infinite;
-webkit-animation: blink 20s linear infinite;
}