Ефект буквиці за допомогою CSS3

22

Від автора: Веб-сайти стали тим засобом, з допомогою якого можна поділитися інформацією з усім світом. З часом з’явилася можливість поділитися фотографіями і відео. Тим не менш, текст на веб-сторінках досі є основним інструментом веб-публікації. Це означає, що те, як ви розташуєте абзаци, речення, і сам текст на сторінці може надати величезний вплив на рішення читача залишитися і прочитати те, що Ви хотіли повідомити.

Ефект буквиці за допомогою CSS3

У цьому уроці мені хотілося б поділитися кількома прийомами CSS для креативного оформлення абзаців і тексту. Часто читабельність і вибір шрифтів пов’язані безпосередньо з дизайном. Але включення текстових ефектів, таких як буквиця, виділення і впізнавані гіперпосилання дозволять візуально відокремити текст від іншого контенту сторінки. Подивіться на демо приклад, щоб мати уявлення про те, чого ми постараємося домогтися.

Ефект буквиці за допомогою CSS3Ефект буквиці за допомогою CSS3

Загальна розмітка сторінки

Я створив стандартний HTML5 документ, в якому область, відведена під контент, зафіксована по центру. Стилі абзацу повинні поєднуватися з іншими елементами сторінки, такими як блоки з повідомленням, або цитатою. Ви можете багато чого повідомити в тексті без використання другорядних заголовків на сторінці.

Моя таблиця стилів досить проста і містить деяку кількість CSS коду для скидання стилів браузера і поцизионирования. Кожен елемент абзацу оформлений тегами em і додатковим зовнішнім відступом знизу. Ви також можете побачити, як я оформив тег h1, використовуючи горизонтальні межі розташовані рівномірно посередині.

/** типографіка **/
h1 {
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 2.5 em;
line-height: 1.5 em;
letter-spacing: -0.05 em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: «»;
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 2.1 em;
line-height: 1.4 em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.35 em;
line-height: 1.5 em;
margin-bottom: 22px;
}

Я вибрав «Helvetica Neue» як основний шрифт для всієї сторінки. Це шрифт без зарубок альтернативний шрифту Helvetica, але вибір типографіки для спеціальних елементів сторінки не повинен обмежуватися цим шрифтом. До того, як ми почнемо розбиратися з ефектами, варто відредагувати HTML. Подивіться на деякі назви класів і різноманітні елементи, які я використовував для різних цілей в кожному абзаці.

Stylish CSS-Only Paragraph Effects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare vehicula felis adipiscing euismod. Mauris vestibulum vel odio tincidunt molestie. Suspendisse vestibulum, justo non tempor gravida, lectus eros auctor metus, eu congue eros turpis eget nunc.

Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio.

Nulla vel nisl ut risus malesuada volutpat ac id nunc. Vestibulum felis lacus, ornare et enim vitae, tincidunt fringilla odio. Maecenas varius felis in elit ornare, dignissim faucibus felis lobortis.

Vivamus et dolor massa. Suspendisse mattis vestibulum arcu, ullamcorper vestibulum sapien auctor ac. Nulla dignissim, nulla ut cursus ultricies, nisi libero rutrum nisl, et luctus sem nibh nec dolor. Maecenas pulvinar convallis erat, a convallis neque aliquet vitae.

Proin in turpis non tellus ultricies porta. Vestibulum ac urna adipiscing, posuere tellus at & mollis tortor.

Quisque dictum, mi convallis tempus viverra, leo dolor convallis turpis, tincidunt tincidunt nunc lorem sit amet quam. In augue sapien, gravida non eros at, accumsan fermentum est. Maecenas malesuada tempus orci, in pellentesque tellus sodales sit amet.

Notice: Quisque vestibulum blandit magna, non varius lectus consequat et. Sed elementum dui elit, sit amet venenatis massa faucibus tempus.

Nulla tristique aliquet sem, sed accumsan tellus. Phasellus dictum velit et quam pulvinar commodo. Vestibulum gravida ipsum malesuada nisl varius, ac feugiat sapien volutpat. Fusce a nibh ac dui sagittis elementum. Vestibulum augue risus, semper a sollicitudin sit amet, consequat vel sapien. Nunc commodo elit eu turpis lobortis sollicitudin.

In sollicitudin felis ac massa suscipit accumsan. Praesent tempus justo viverra eleifend congue. Praesent blandit sollicitudin orci, sed tincidunt arcu adipiscing vitae.

Буквиця

Перше, що ви помітите, це велика літера виступає в першому абзаці. Цьому елементу абзацу присвоєно клас .first, до якого безпосередньо прив’язаний ефект буквиці. Письменники часто використовують подібну буквицю в книгах і друкарні, але вона також підходить і для вебу.

p.first:first-letter, .dropcap {
float: left;
font-size: 4.8 em;
padding: 2px;
font-family: Georgia, Tahoma, sans-serif;
margin-right: 10px;
line-height: 0.35 em;
}

Ви помітите, що для буквиці застосовуються два селектора. В CSS використовується псевдо-клас :first-letter, який застосовується до самої першої букви будь-якого елемента. Зверніть увагу, що це не буде працювати, якщо ваш абзац містить інший елемент перед текстом (такий як мініатюра зображення). Якщо вам потрібно зображення в абзаці з буквицей використовуйте властивість CSS background замість тега img в HTML. Разом з селектором :first-letter ми можемо застосувати ефект буквиці до будь-якого абзацу, використовуючи клас .first.

Але разом з іншим класом .dropcap ми могли б застосувати ефект попередньо уклавши букву в тег span. У HTML документі це буде виглядати наступним чином: L. Для CMS систем, таких як WordPress найпростіше створити тему, яка підтримує клас .first, що додається до кожного першого абзацу в ваших постах або станицях (або і для тих і для інших).

p.altdrop:first-letter, .dropcap-alt {
float: left;
background: #434343;
color: #fff;
font-size: 2.2 em;
padding: 10px 14px;
margin-right: 8px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Я також створив альтернативний ефект буквиці, який додає більш темний фон навколо самої букви. Зверніть увагу, що цей альтернативний ефект використовує шрифт сімейства Helvetica Neue, в той час як в первинному оформленні буквиці використовувався шрифт Georgia або інший шрифт із зарубками. Таким чином, ми можемо перенести стиль оформлення, часто зустрічається в друкованих книгах, на цифровий екран.

Другий абзац на сторінці використовує клас .bigger, який збільшує розмір шрифту і висоту рядка абзацу. На деяких сайтах розробники воліють зробити перший абзац більше, щоб зробити його більш помітним на сторінці. Але ви можете спробувати поєднувати буквицю зі збільшеним текстом, щоб напевно привернути увагу читача.

Внутрішньо цитати

У статтях містять цитати, для оформлення використовується blockquote або інші схожі елементи. Окрема цитата, так званий «вріз» використовується рідше, так як вона використовує текст безпосередньо самої статті. Це часто використовується для того, щоб акцентувати увагу на певній точці зору або фразі, яка критично важлива для предмета, якому присвячений контент.

.pull {
display: block;
float: right;
width: 28%;
padding: 16px;
margin-bottom: 1.25 em;
background: #edefec;
color: #656565;
font-style: italic;
font-size: 1.65 em;
line-height: 1.55 em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

Моє оформлення цитат дуже схоже на те, яке використовується на сайті Design Shack. Воно використовує фон на кілька тонів темніше, а також властивість CSS3 shadow box для додання більш привабливого вигляду. Текст внутрішніх цитат зроблено більше основного тексту, щоб він виділявся на тлі багатьох інших абзаців. Важливо задати цим цитат властивість float з вирівнюванням по лівому або правому краю для того, щоб вони відрізнялися від звичайних блочних цитат.

blockquote {
color: #909090;
font-size: 1.35 em;
line-height: 1.5 em;
font-style: italic;
border-left: 5px solid #ab9f5c;
padding: 12px 20px;
margin-left: 20px;
margin-bottom: 30px;
quotes: none;
}

Елемент HTML5 blockquote дозволяє помістити інші елементи всередині нього. Деякі блокові цитати можуть містити велику кількість абзаців, а також цитування. Дизайн стилів використовує безліч внутрішніх і зовнішніх відступів (margin, padding) для створення простору між звичайними абзацами. Ліва межа виглядає як маркер, щоб допомогти читачам миттєво відрізнити блокову цитату від оточуючих абзаців.

Оформлення символів

Хоча цей ефект дуже незначний, відвідувачі звертають на нього увагу, коли прочитують сторінки контенту. Спеціальні символи HTML використовуються для відображення амперсанда, значка копірайту і їм подібним. Спецсимволи використовують щось на кшталт Font Awesome для відображення кастомізованих піктограми, або ви можете використовувати їх для відображення стандартних HTML символів.

.fancyamp {
font-family: ‘Gabriela’, ‘Trebuchet MS’, serif;
font-size: 1.6 em;
}

У своєму прикладі я використовував амперсанд, обгорнутий в елемент span. Шрифт буде змінено на Gabriela, який має зарубки. Елемент span з класом .fancyamp застосовує цей шрифт до символу, при цьому не чіпаючи інший текст. Я також зробив його трохи більше для того, щоб він виділявся на тлі навколишніх букв.

Але не думайте, що подібний ефект можна застосувати тільки до амперсанду. Значки копірайту, дробу і інші спецсимволи HTML можуть мати окреме стильове оформлення. Ви також можете застосувати курсив, жирний шрифт або змінити колір.

Посилання та виділення

У декількох перших параграфах ви знайдете виділений текст з витончено оформленої посиланням. Обидва вони використовують додатковий внутрішній відступ (padding), т. к. обидва використовують фонові кольори.

a {
color: #639f3b;
text-decoration: none;
}
a:hover {
background: #baff90;
color: #3c5331;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 1px 2px;
margin: 0 -2px;
z-index: 99999;
text-decoration: none;
}
.highlight {
background: #ffffaa;
padding: 1px 2px;
}

Для посилань я вибрав зелений відтінок, але ви можете працювати з будь-яким поєднанням кольором, який найбільш підходить вашому макету. Зміна фону по наведенню (hover) для кожного посилання дозволяє відвідувачу моментально зрозуміти, що вони навели курсор на активний елемент. Текст посилання змінює колір на більш темний, щоб виділятися на світло-зеленому фоні.

Так як я додав padding ліворуч і праворуч, я використовував негативний margin, щоб запобігти появі небажаних прогалин по наведенню курсора миші. Padding також використовується для класу .highlight, але оскільки немає спеціального оформлення для наведення, то додатковий простір залишиться непоміченим.

.notice {
display: block;
padding: 12px 20px;
background: #fff5af;
color: #a79b44;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

Якщо ефекту виділеного тексту недостатньо, то ви завжди можете створити другорядні класи для повідомлень у абзацах. Мій клас .notice значно змінює колір тексту для того, щоб поєднуватися з більш світлим відтінком жовтого тлі. Використання властивості CSS3 text-shadow покращує читабельність. Ви також можете створити дублюючі класи для нотифікацій в інших колірних схемах, наприклад зелених або синіх.

Висновок

Я б не рекомендував використання всіх цих ефектів на кожній сторінці вашого сайту. Але буде мудрим рішенням заздалегідь спланувати стильове оформлення і протестувати все до того, як ви додасте код в таблицю стилів. Відвідувачі настільки звикли до традиційного оформлення, що ви дійсно зможете привернути увагу аудиторії, використовуючи ці деталі. Скачивайте копію коду, використаного в цьому уроці, і пробуйте додавати свої ідеї до запропонованого оформлення.