При создании сайтов, к верстке часто относятся довольно поверхностно. Считается, что она почти никак не влияет на его работу. Здесь я расскажу о целевом использовании CSS-кодинга в русле довольно значимых задач сайта.
CSS-кодинг позволяет
- Ускорение работы сайта
- Улучшение юзабилити и повышение лояльности потребителей (аудитории):
- Гибкость и динамичность веб-дизайна
- Структурирование и облегчение восприятия информационных блоков
- Кликабельность
- Поисковая оптимизация
Относительно последнего пункта, следует отметить, что с недавних пор поисковики стали в большей мере ориентироваться на «возвраты посетителей» и общее поведение пользователей на сайте. Понятно, что такие факторы , как улучшение юзабилити (удобство пользования) и повышение лояльности аудитории, наравне с другими принципами SEO, прямо воздействует на ранжирование сайта в поисковиках.
Для справки (о CSS). CSS — каскадная таблица стилей. Служит для верстки и стилевого оформления web-документа. Подгружается в т.н. «невидимую часть» страницы ( тег <HEAD>). Производит обработку компонентов страницы, визуально преображая их с заданными стилями (цвет, позиция и пр.).
Данный материал предназначен в качестве шпаргалки для веб-дизайнеров / верстальщиков. В статье представлена личная подборка CSS-фрагментов (сниппетов), наиболее часто употребляемых автором на практике. Материал содержит советы по адаптации верстки к задачам поисковой оптимизации.
Создание сайтов и верстка: блочная или табличная?
Предположим, мы имеем следующий макет дизайн: «Шапка» (HEADER), «Левая колонка» (LEFTCOLUMN), «Содержание страницы» (CONTENT) и «Подвал» (FOOTER).
| ШАПКА (HEADER) → | ||
|
||
| Подвал (FOOTER) |
Поисковые системы обычно читают сайты сверху вниз по коду. При этом,, что то, что находится сверху — больше значимо. Посмотрим код такой страницы, сверстанной с использованием таблиц:
<html> <head> </head> <body> <table width="100%" cellspacing="0" cellpadding="0"> <tr> <td style="background: #daa2cc;" width="100%"> ШАПКА (HEADER) </td> </tr> <tr> <td width="100%"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="background: #fffbc8;" width="20%"> Левая колонка (LEFTCOLUMN) </td> <td width="80%"> Содержание страницы (CONTENT) </td> </tr> </tbody> </table> </td> </tr> <tr> <td style="background: #e5e5e5;" width="100%"> Подвал (FOOTER) </td> </tr> </table> </body> </html>
В случае, если мы используем табличную верстку, мы никак не можем изменить иерархию и перетасовать элементы: первой пойдет Шапка, потом Левая колонка, потом Контент страницы и далее Подвал. Однако, при использовании блочной верски, а уж тем более, с применением слоев, мы можем как угодно расставлять свой контент «по полочкам».
Посмотрим направляющие чтения для поисковиков в блоковой версии:
Посмотрим на код блоковой верстки:
<div style="width: 680px; border: 1px solid #e5e5e5;"> <div style="width: 660px; background: #daa2cc; padding: 10px;"> ШАПКА (HEADER) </div> <div style="width: 520px; float: right; padding: 10px;"> Содержание страницы (CONTENT) </div> <div style="width: 120px; background: #fffbc8; padding: 10px;"> Левая колонка (LEFTCOLUMN) </div> <div style="width: 660px; background: #e5e5e5; padding: 10px;"> Подвал (FOOTER) </div> </div>
Как видно, сначала в коде отобразится Шапка, потом Содержание, а уж затем пойдут Левая колонка и Подвал.
Вопрос иерархии лучше решать именно в стадии создания сайта. Лучше, в самом начале создания сайта, т.к. с этих пор вы будете учитывать порядок для поисковиков и сможете лучшим образом оптимизировать сайт в дальнейшем.
1. Центрировать сайт по горизонтали
Я использую центрирование сайта в большинстве случаев. Сайт хорошо просматривается на мобильных телефонах и других устройствах. Код для центрирования основного блока по горизонтали:
body{
text-align:center;
}
#bgcontain {
width: 980px;
margin: 0px auto;
padding:0px;
}
2. Фиксированный бэкграунд (фон)
Фиксированный бэкграунд (фон) довольно стильно смотрится. При прокрутке движется только содержание, а фоновое изображение остается стабильно на месте. «Закрепить» background можно всего одной строчкой (ключевое слово fixed). Картинка может быть как множащаяся (repeat), так и — нет (no-repeat).
body{
backgroud:#fff url(../images/bg_main.png) fixed repeat;
}
m
3. Абсолютное позиционирование и слои на странице (z-index)
Практически любая концепция веб-дизайна исполнима и поддаётся вёрстке. Причём, без использования тяжеловесных флеш (Flash). Абсолютное позиционирование является одним из тех методов, которые позволяют осуществлять гибкий вед-дизайн и самые сложные задачи. Кроме того, абсолютное позиционирование иногда актуально для управления иерархией для поисковиков (как известно, всё, что выше в коде страницы, они воспринимают как более главное)
Абсолютное позиционирование задаётся свойством «position: absolute«. Также, указывается положение относительно левого и верхнего края (или, правого и верхнего), т. е. координаты X, Y: «left» («right»), «top» («bottom»). Ось Z является сквозной, образуя стеки (слои) z-index. Чем больше номер z-index, тем он ближе при просмотре.
CSS сниппет:
.div1{
position:absolute; /* абсолютное позиционирование */
top:0px; /* примыкает к верхней границе */
left:0px; /* примыкает к левой границе */
z-index:1; /* стек 1 */
}
.div2{
position:absolute; /* абсолютное позиционирование */
top:100px; /* положение от верха 100 пикселей */
left:150px; /* от левого края 150 пикселей */
z-index:2; /* стек 2 */
}
Если нужно использовать абсолютное позиционирование, зависимое от другого элемента, включите в блок с относительным (стабильным) позиционированием.
<div class="relativelythis"> <div class="div1">...</div> <div class="div2">...</div> </div>
CCS:
.relativelythis{
position:relative;
}
.div1{
position:absolute; /* абсолютное позиционирование */
top:0px; /* примыкает к верхней границе */
left:0px; /* примыкает к левой границе */
z-index:1; /* стек 1 */
}
.div2{
position:absolute; /* абсолютное позиционирование */
top:100px; /* положение от верха 100 пикселей */
left:150px; /* от левого края 150 пикселей */
z-index:2; /* стек 2 */
}
Использование z-index на примере.
При разработке сайта WESTSKATE.RU была поставлена задача уместить контент главной страницы до «линии сгиба» (т.е. в один экран, без прокрутки). Конфликт концепции состоял в том, что при разных разрешениях (а также, размерах окна обозревателя), центральная часть должна уходить за пределы верхней и нижней панели, а не перемешиваться. В таком дизайне особенно актуальны стеки (слои) z-индексов.
4. Управление прозрачностью элемента страницы
Прозрачность — одно из тех стильных решений, без которого не обходится почти не один современный веб-дизайн.
Прозрачность, — а точнее, непрозрачность — элемента задаётся в процентном отношении (для фильтров Internet Explorer, IE) и в дробном (для других браузеров): от 0% (0) до 100% (1.0). Чем ниже цифра, тем более прозрачен элемент. 90% (0.9) будет значить едва просвечивающийся. 10% (0.1) — еле видимый. Ниже приведён пример указания непрозрачности 80% (0.8) для блока с классом «prozr80div». Не забываем про кроссбраузерность.
.prozr80div{
filter: alpha(opacity=80); /* IE 5.5+ */
-moz-opacity: 0.8; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.8; /* Konqueror 3.1+, Safari 1.1 */
opacity: 0.8;
}
Элементы с частичной прозрачностью в веб-дизайне актуальны при использовании слоёв.
5. CCS-Хак. Два изображения в качестве бэкграунда
При создании сайтов, особенно, с обилием графики, важно по максимуму оптимизировать по весу изображения (НО — без потери качества). Иногда бывает, что лучше использовать 2 изображения в качестве бэкграунда. Так, при разработке сайта CCK-SHIP.RU, мне потребовалось использовать градиент (цветовой перелив) для подложки и фон-изображение (полупрозрачный стиль) . Это позволило достичь не только изначально требуемого визуального эффекта, но и значительно сократить вес картинок (2 шт.). Сама подложка получилась на тонкую полосу, размножающуюся по горизонтали. При установке opacity, обычный 8-разрядный PNG играет подобно 24-разрядному, а вес файла значительно ниже (он немалых габаритов, адаптированный для крупноформатных мониторов). Кроме того, обеспечена кроссбраузерность: 24-разрядный PNG отображается некорректно в IE 6 (а конкретно, белёсо-голубой «налёт» заместо прозрачности).
Итого, что мы получаем:
- Выигрыш в размере файлов изображений
- Кроссбраузерность
- Без потери визуального эффекта
Сам css-сниппет (иерархия сохранена):
html,body {
margin:0;
padding:0;
}
#page_bg {
padding: 0px;
margin: 0px;
background:#1a5287 url(../images/mainbg.jpg) top left repeat-x;
text-align:center;
position:relative; /* позиция стабильная */
}
#podbody1{
background:transparent url(../images/pngbody8.png) center -156px no-repeat;
position:absolute; /* абсолютное позиционирование относительно стабильного блока */
z-index:1; /* на z-оси на слое 1 */
top:0; /* сверху 0... */
left:0; /* слева 0... */
width:100%;
height:100%;
max-height:1600px;
filter: alpha(opacity=10); /* прозрачность для IE 5.5+ */
-moz-opacity: 0.1; /* прозрачность для Mozilla 1.6 и ниже */
-khtml-opacity: 0.1; /* прозрачность для Konqueror 3.1+, Safari 1.1 */
opacity: 0.1;
}
#body1{
position:relative; /* стабильная позиция */
z-index:2; /* на z-оси на слое 2 */
width:980px;
padding: 0px;
margin:4px auto; /* централизация */
}
Другой вариант кроссбраузерного использования в бэкграунде двух изображений:
.multibg {
/* блок с классом "multibg" */
background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
background: transparent url(images/bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* только IE8 */
}
6. CCS-Хак. Фиксированный бэкграунд с движущейся «надслойкой»
Интересно, что описанный выше метод наложения двух бэкграундов (через подложку и слой) срабатывает для ещё одного эффекта. Например, если нужно исполнить фиксированный бэкграунд , но таким образом, чтобы под ним находился ещё один фон, не статичный — движущийся при прокрутке (скажем, с полупрозрачностью, или просто прозрачными областями). Для этого, вместо фона #page_bg пропишем фон самого body с указанием фиксированности fixed:
html,body {
margin:0;
padding:0;
background:#1a5287 url(../images/mainbg.jpg) top left repeat-x fixed;
}
#page_bg {
padding: 0px;
margin: 0px;
text-align:center;
position:relative; /* позиция стабильная */
}
#podbody1{
background:transparent url(../images/pngbody8.png) center -156px no-repeat;
position:absolute; /* абсолютное позиционирование относительно стабильного блока */
z-index:1; /* на z-оси на слое 1 */
top:0; /* сверху 0... */
left:0; /* слева 0... */
width:100%;
height:100%;
max-height:1600px;
filter: alpha(opacity=10); /* прозрачность для IE 5.5+ */
-moz-opacity: 0.1; /* прозрачность для Mozilla 1.6 и ниже */
-khtml-opacity: 0.1; /* прозрачность для Konqueror 3.1+, Safari 1.1 */
opacity: 0.1;
}
#body1{
position:relative; /* стабильная позиция */
z-index:2; /* на z-оси на слое 2 */
width:980px;
padding: 0px;
margin:4px auto; /* централизация */
}
Зафиксированный «нижний» бэкграунд никогда не будет пролистываться, тогда как бэкграунд второго слоя будет пролистываться вместе с содержимым страницы.
7. Вывод линейного объекта по принципу блока
Cтрочными объектами я называю span, a, и подобные. Эмуляция в виде блока бывает необходима при использовании высоты, ширины, отступов, обрезки, и др.
span.spcspan{display:block;}
.divSD a,.divSD a:link,.divSD a:visited{display:block}
8. Обрезание контента по условленным габаритам
Как часто различные условия контента (специфика используемых текстов, картинок) диктуют свои правила веб-дизайну. Разработчики отказываются от изначальной эстетики дизайна, или последний начинает «ехать». Обрезка по прокрустовому принципу: всё, что выходит за границы, обрезаем. Не забываем указывать сами границы, т.е. длину и высоту блока.
.obrez{
width:700px; /* длина блока с классом "obrez" */
height:400px; /* высота блока с классом "obrez" */
overflow: hidden;
}
9. Немного HTML. Обрезание страницы по размеру окна, или ликвидация линейки прокрутки
Чтобы обрезать содержимое страницы по размеру окна, или, другими словами, убрать полосы прокруток, достаточно назначить атрибут scroll=»no».
HTML:
<body scroll="no"> ... </body>
10. Создание линейки прокрутки в блоке. Эмуляция фрейма
Всем известно, что поисковики не любят фреймы (frame) — они их просто не читают. Однако порой требуются полосы прокрутки в отдельных блоках. Есть два варианта реализации. Оговорюсь, что лично я использую 2-й способ.
Вар-1. Создание горизонтальной и вертикальной прокрутки независимо от содержания блока
Этот способ установит полосы прокрутки, независимо от объёма содержания.
.prokrutka-all{
/* блока с классом "prokrutka-all" */
width:700px; /* длина блока */
height:400px; /* высота блока */
overflow: scroll; /* создание вертикальной и горизонтальной прокрутки */
}
.prokrutka-vertical{
/* блока с классом "prokrutka-vertical" */
width:700px; /* длина блока */
height:400px; /* высота блока */
overflow-y: scroll; /* создание вертикальной прокрутки */
}
.prokrutka-gorizontal{
/* блока с классом "prokrutka-gorizontal" */
width:700px; /* длина блока */
height:400px; /* высота блока */
overflow-x: scroll; /* создание горизонтальной прокрутки */
}
Вар-2. Создание горизонтальной и вертикальной прокрутки в зависимости от содержания
При 2-м способе, полосы прокрутки образуются только по необходимости: в случае, если содержание превысит размеры окна.
(Вар-2.) Вертикальная прокрутка
.prokrutka{
width:700px; /* длина блока с классом "prokrutka" */
height:400px; /* высота блока с классом "prokrutka" */
overflow: auto;
}
(Вар-2.) Горизонтальная прокрутка
В случае, если в блок прокрутки входит изображение или блок, превышающие размеры окна по ширине, образуется горизонтальная полоса прокрутки. Рассмотрим пример. Помещаем длинный (или очень длинный) блок в уже знакомую область.
HTML:
<div class="prokrutka"> <div class="looong">...</div> </div>
CCS:
.prokrutka{
width:700px;
height:400px;
overflow: auto;
}
.looong{
width:2000px; /* длина дочернего длинного блока */
height:auto;
}
11. CCS-спрайты и эмуляция флеш-меню
Если во фреймы поисковики хоть как-то могут пробраться, содержимое флеш (flash) они точно не считают. В то же время, большинство флеш-методов можно организовать скриптами (JQuery, JS), а флеш-подобные меню и просто — при помощи CSS.
CCS cпрайт представляет один файл, вмещающий множество изображений (скажем, иконки). Допустим, мы имеем несколько логотипов, каждый из которых должен вести на определённую страницу сайта. Подложка у такой ссылки (сам текст ссылки прячется) будет иметь специальные координаты на нашей картинке. Я довольно часто использую CSS-спрайты. Вот один из примеров (на сайте DISKI-MERCEDES.RU):
Создание CCS-спрайта
#dfs ul{
display:block;
width:383px;
height:193px;
background: transparent;
margin:0;
padding:0;}
#dfs ul,#dfs ul li{
list-style:none;
margin:0;
padding:0;}
#dfs ul li {display:block;float:left}
#dfs ul li a{
display:block;
height:0px!important;
width:65px;
padding-top:64px;
background: transparent url('workimages/dfs_icons2.png') no-repeat;
overflow:hidden!important;
margin-top:2px;}
#dfs ul li.df1 a,#dfs ul li.df1 a:link,#dfs ul li.df1 a:visited{
background-position:0px -2px;
}
#dfs ul li.df1 a:hover,#dfs ul li.df1 a:active{
background-position:0px -195px;
}
12. Работа с тенью.
Задача: Эмуляция подвешенности объекта
Применение: Всплывающие окна
В веб-дизайне тени часто рисуются, являясь ещё одним камешком замедления работы сайта. Это связано с тем, что получить достаточно кроссбраузерную тень на основе только стилей требует от разработчика более углублённых знаний. Однако, это возможно.
Создать тень у блока
Для создания тени у блока, в большинстве браузеров, достаточно указать box-shadow.
.shadow{
/* Блок с классом "shadow". На рис. - "Блок с тенью" */
height:80px; /* высота блока */
width:250px; /* длина блока */
border:1px solid #ccc; /* рамка */
background: #fe4597; /* Цвет фона */
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding: 10px;
}
.shadow2{
/* Блок с классом "shadow". На рис. "Блок с тенью 2" */
height:80px; /* высота блока */
width:250px; /* длина блока */
border:1px solid #ccc; /* рамка */
background: #eeef53; /* Цвет фона */
-moz-box-shadow:5px 5px 3px silver; /* Для Firefox */
-webkit-box-shadow:5px 5px 3px silver; /* Для Safari и Chrome */
box-shadow:5px 5px 3px silver; /* Параметры тени */
padding: 10px;
}
IE ниже 9 версии никак не реагирует на box-shadow. Для кроссбраузерности нужно использовать другие методы.
Создание тени у блока IE. CCS-хак для Internet Explorer ниже 9
<!--[if lt IE 9]>
<style>
.shadow{filter:
progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=-90, Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=0, Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=180, Strength=5)
progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=90, Strength=5);
}
.shadow2{ filter:
progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=120, Strength=5);
}
</style>
<![endif]-->
Обратите внимание, IE запрашивает отступ для тени, тогда как другие браузеры — нет (голубая полоса на рисунке).
Другим CSS-хаком для создания тени у блока в IE, является применение фильтра Blur (размытие) для блока-подложки (при использовании абсолютного позиционирования основного блока). Такой хак, в частности,
Создать тень у текста.
Задача: Дополнительное акцентирование текста. Эстетическая привлекательность текста.
Тени у текстов придают акцентирование заголовкам, пунктам меню, подписям кнопок и др. Служат юзабилити и могут косвенно влиять на лояльность посетителей.
.textshadow{
/* заголовок с классом "textshadow" */
text-shadow: #000 1px 0px 3px; /* Параметры тени */
}
Для IE ниже 9
Чёткая тень:
.textshadow{
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=1, offY=1, color=#000000); /* чёткая тень для текста в IE */
}
При создании сайта STAROPTIC.RU я использовала тени текстов для пунктов верхнего и нижнего меню:
Размытая тень (через свечение) для IE ниже 9
.textshadow{
filter:progid:DXImageTransform.Microsoft.Glow(color=silver, strength=3);
)
13. CSS сниппет. Создание кроссбраузерного градиента (переливы цвета)
Фоновые картинки-подложки, содержащие градиент (перелив цвета), как правило, весят немного. Единичный запрос никак не сказывается на работе сайта. Но представьте, сколько изображений потребуется, чтобы обеспечить один и тот же перелив в блоках с различным содержанием. Безусловно, динамичный градиент CSS окажется рациональнее. На рисунке видно, как блоки (классы «gradient lft» и «gradient») с разной высотой передают одинаковый перелив (от белого к светло-серому).
Пишем градиент средствами CSS:
.gradient{
/* блок с классом "gradient" */
width:260px; /* длина блока */
border:1px solid #ccc; /* бордюры блока */
background-image: -moz-linear-gradient(top, #ffffff, #cccccc); /* пишем градиент для Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cccccc),color-stop(1, #ffffff)); /* пишем градиент для Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#cccccc'); /* для IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#cccccc')"; /* для IE8 */
padding: 10px; /* внутренние отступы */
color:#333; /* цвет текста */
margin-left:290px; /* внешний отступ слева */
}
.gradient.lft{
/* левый блок с классом "gradient lft" */
float:left; /* обтекание слева */
margin-left:0px; /* убираем левый отступ */
}
Данная техника градиента была выполнена для блока новостей на сайте KURSI-YAZIKOV.RU:
14. Кроссбраузерное закругление углов у блока
Практически все современные браузеры могут обрабатывать закругление уголков у блока. Исключением является Internet Explorer ранних версий, которыми продолжают пользоваться по сей день. Для него, мы будем использовать особый файл для закругления углов (Скачать его можно здесь). Разместим файл на сайт и будем ссылаться к нему из CSS:
.block-s-zakrugleniyami {
/* Для большинства браузеров */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
/* Для старых IE */
behavior: url(border-radius.htc); /* учим IE border-radius */
}
15. Веб-типографика
15.1. Способ 1. Специальный шрифт на сайте — с использованием файлов шрифта
Чтобы оформить заголовки фирменным/специальным шрифтом, понадобится получить специальные форматы файла шрифта для веб. Для этого, лучше всего использовать онлайн-генераторы шрифтов (давно к ним не обращалась, поэтому испробованные ресурсы не подскажу, но несомненно — не составит сложности нагуглить). В итоговом наборе, мы должны иметь файлы следующих форматов: EOT, WOFF, TTF, SVG. Их мы разместим в конструкцию @font-face:
@font-face {
font-family: OriginalFirmFont; /* Имя шрифта */
src: url('fonts/OriginalFirmFont.eot');
src: local('O'), url('fonts/OriginalFirmFont.woff') format('woff'), url('fonts/OriginalFirmFont.ttf') format('truetype'), url('fonts/OriginalFirmFont.svg') format('svg'); /* Путь к файлу со шрифтом */
}
h1,h2,h3,h4,h5,h6 {
font-family: OriginalFirmFont;
}
Достоинства и недостатки. Оригинальная веб-типографика с сторонними шрифтами на вашем сайте. К недостаткам относится замедления прогрузки страниц вашего сайта.
15.2. Способ 2. Специальный шрифт на сайте — с использованием API Google fonts, на кешировании
Интегрирование таких шрифтов займет пару минут. Сначала выберите подходящий шрифт в каталоге Google web Fonts. Нажмите Add to Collection, а затем USE. Вам предложат две строки кода, одна представляет ссылку на скрипт, вторая — использование в файле CSS. Ставим ссылку на шрифт в коде страниц между тегами <HEAD></HEAD>:
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
В файле CSS прописываем:
p {
font-family: 'Ubuntu', sans-serif;
font-weight: normal;
}
h2, h3, h4 {
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
}
Достоинства и недостатки: оригинальные шрифты на вашем сайте, замедления прогрузки страниц почти не ощутимы благодаря автоматическому кешированию.
15.2. Способ 3. Использовать веб-шрифты по-новому
Я довольно часто прибегаю к изменению межбуквенных отступов (letter-spacing). Кроме него, можно ещё определять прописные буквы вместо строчных (строчные будут заменены на заглавные уменьшенного размера, заглавные останутся без изменения). Делается это через font-variant.
h2{
letter-spacing:-1px; /* уменьшенный интервал в заголовке */
font-variant: small-caps; /* модифицируем все символы в капитель: заглавные и уменьшенные заглавные буквы */
}
span.uvelichenniy-interval{
letter-spacing:2px; /* увеличенный интервал */
}
Так, довольно истасканный шрифт New Roman может смотреться по-новому:
В подобающем окружении довольно стильно и современно может смотреться Courier New, который почти не употребляют в веб-дизайне. С ним я экспериментировала на сайте KURSI-YAZIKOV.RU. Вот, что получилось:
Достоинства и недостатки: оригинальная веб-типографика на вашем сайте (без сторонних шрифтов). Нет замедлений в прогрузке страниц сайта.
Дополнительные CSS-сниппеты
Дополнительно:
Убираем дефолтные отступы страницы
html,body{
margin:0px;
padding:0px;
font: 12px/24px Helvetica, Arial, Verdana, sans-serif;
}
