h1 { font-family: Myriad Pro, Arial, Sans-Serif; } 

где Myriad Pro – нужный нам шрифт, а Arial – запасной.
Вот некоторые полубезопасные шрифты:

Myriad
Веб-дизайн

.myriad {
	font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}

Garamond
Веб-дизайн

.garamond {
	font-family: Garamond, Times New Roman, Serif;
}

Palatino
Веб-дизайн

.palatino {
	font-family: Palatino, Palatino Linotype, Serif;
}

Impact
Веб-дизайн

.impact {
	font-family: Impact, Haettenschweiler, Sans-Serif;
}

Tahoma
Веб-дизайн

.tahoma {
	font-family: Tahoma, Geneva, Sans-Serif;
}

Century Gothic
Веб-дизайн

.century {
	font-family: Century Gothic, Arial, Sans-Serif;
}

Gill Sans
Веб-дизайн

.gill {
	font-family: Gill Sans, Arial, Sans-Serif;
}

Lucida
Веб-дизайн

.lucida {
	font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}

Futura
Веб-дизайн

.futura {
	font-family: Futura, Verdana, Sans-Serif;
}

Baskerville
Веб-дизайн

.baskerville {
	font-family: Baskerville, Times New Roman, Serif;
}

Hoefler
Веб-дизайн

.hoefler {
	font-family: Hoefler Text, Georgia, Serif;
}

Cooper Black
Веб-дизайн

.cooper {
	font-family: Cooper Black, Arial Black, Sans-Serif;
}

Rockwell
Веб-дизайн

.rockwell {
	font-family: Rockwell, Georgia, Serif;
}

Вполне возможно, что некоторые из этих шрифтов не отображаются на вашем компьютере, на то они и полубазопасные. Но безусловно эти шрифты заслуживают рассмотрения в ваших следующих веб-проектах.

Постовой:
Требуется размещение сервера colocation? Нет проблем.
ветеринарная лечебница – заболел пёсик? Вам сюда.

1. Скругленные края без картинок

Претендую на шедевр ;)

<div id="container">
<div>
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
</div>
<!--содержимое блока -->
<div>
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</div>
</b>
</div>

body { background: #f0f0f0;}
#container {background: #fff; width: 100px;}
.rtop, .rbottom {display:block;background: #f0f0f0; }
.rtop *, .rbottom * 
{display: block; background: #cecece;  height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

100px – ширина блока
#fff – цвет фона блока
#f0f0f0 – цвет фона страницы
Пример

2. Нумерованный список

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li> 
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
 ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

3. Простая форма без таблиц

<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}

4. Градиент в тексте

<h1><span></span>CSS Gradient Text</h1>
 
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
 
<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>
 
<![endif]-->

5. Вертикальная центровка с помощью line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<div>
<p>Vertically Centered content</p>
</div>

6. Скругленные углы используя изображения

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
 CONTENT
<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}
 
.roundcont p {
margin: 0 10px;
}
 
.roundtop {
background: url(tr.gif) no-repeat top right;
}
 
.roundbottom {
background: url(br.gif) no-repeat top right;
}
 
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

7. Несколько классов

Бывает удобно.

<img src="image.gif" class="class1 class2" alt="" />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

8. Горизонтальная центровка

Ну это большинство знает.

<div id="container"></div>

#container {
margin:0px auto;
}

9. Мерзкие ссылки ломают макет

Эти ссылки обычно находятся в меню. При уменьшении ширины окна браузера, ссылки состоящие из двух и более слов убивают макет. Второе слово переносится на другую строчку и может зацепить другие элементы страницы. Лечится просто.

a{
white-space:nowrap;
}
#anydiv{
overflow:hidden;
}

10. Убить скролл IE в textarea

textarea{
overflow:auto;
}

1. Используйте сокращенные формы

Используйте сокращенные формы таких свойств как margin, border, padding, background, font, list-style. Это самый простой способ оптимизации CSS-стилей. Если вы ещё не применяете этот метод – начните сегодня.
Сокращенная форма означает, что вместо использования различных деклараций для соответствующих свойств…

   p { margin-top: 10px;  
        margin-right: 20px;  
        margin-bottom:  30px;  
        margin-left: 40px; }

… вы используете их комбинацию:

   p { margin: 10px 20px 30px 40px; }

Правила, по которым браузеры интерпретируют сокращенную запись показаны на следующих иллюстрациях.

Аналогичные правила выполняются для padding и border-weight.
По следующим правилам можно сократить свойство font

Это лишь два примера использования сокращенной формы CSS-свойств. Их использование сделает ваш код гораздо более кратким.
Более подробную информацию о сокращенной форме я нашел в этой статье. Возможно, я коснусь этого вопроса более подробно в своих следующих статьях.

2. Не используйте CSS-хаки

Вероятно, каждый человек, кто дочитал до этого пункта, хотя бы раз использовал CSS-хаки. Во многих случаях это достаточно удобно и эффективно. Но когда таких хаков становится несколько десятков, код становится очень “грязным” и менее понятным. В таких случаях удобнее использовать условные комментарии. Это общепринятая практика, рекомендуемая даже Microsoft (неудивительно, ведь в отношении их браузеров как правило используются хаки). Кроме того использование условных комментариев облегчит ваши CSS-файлы, т.к. современные браузеры не будут загружать хаки для отсталых.
Вот так можно подключить дополнительный файл ie6.css только в IE6:

 <!--[if IE 6]>  
     <link rel="stylesheet" type="text/css" href="ie6.css">  
 <![endif]-->

Вот несколько условных комментариев для IE:

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->
<!--[if IE 8]> Инструкции для IE 8 <![endif]-->

В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->
<!--[if lt IE 8]> Инструкции для IE до 8 <![endif]-->

Условные комментарии – хорошая альтернатива хакам. Помните, что меньше хаков – тем чище код.

3. Форматируйте ваш код

Правильное форматирование кода повысит его “читабельность” и ясность. Здесь существует два подхода: писать каждое CSS-свойство с новой строки..

p { margin-top: 10px;
     text-indent: 15px; }

..либо писать всё в одну строку, разделяя свойства пробелами:

p { margin-top: 10px; text-indent: 15px; }

Тут каждый выбирает для себя. Например я, как правило, пишу в одну строчку. Разрешение моего монитора позволяет легко читать такой код. Кроме того, в этом случае существенно уменьшается размер CSS-файла и количество телодвижений при написании кода, что очень важно при достаточно объемных стилях.
Решать вам, но помните, что пробелы как воздух – вы их не видите, но они есть и имеют свой вес. Меньше лишних символов – меньше файл.

4. Используйте CSS-библиотеки и Reset

О CSS-библиотеках я уже писал в своей статье. Суть здесь в том, что из проекта в проект вы, зачастую, пишите практически идентичные блоки кода, решая локальные задачи. Будь то стили для отображения текста, верстка многоколонного дизайна, и т.п. Чтобы не писать несколько раз то, что давно уже написано до вас ведущими специалистами в этой области, используют CSS-библиотеки.
Самыми распространенными из них считаются библиотеки для сброса стилей. Например YUI Grid CSS или Reset.css Эрика Маера. Они помогают нейтрализовать настройки браузера “по умолчанию”, как бы сбросить стили.
Стоит заметить, что сами CSS-библиотеки иногда могут нуждаться в оптимизации. Например, вы знаете что на вашем сайте о кулинарии никогда не будут использоваться теги pre и code, значит их стили можно убрать из используемых CSS-библиотек.
Используйте CSS-библиотеки только если они существенно сократят время разработки, иначе они превратятся в ненужный груз.

5. Сжимайте код

Существует несколько программ для сжатия CSS-файлов, например CSSTidy или YUI Compressor. Есть также и онлайн аналоги. Один из них вы можете использовать на моём сайте. Подобные программы сжимают CSS-стили, убирая из них лишние символы (пробелы, табуляции), преобразуют некоторые свойства в сокращенную форму и многое другое.
Некоторые специализированные текстовые редакторы умеют сжимать CSS-стили, например BBEdit, TextMate или TopStyle. Также можно сжимать файлы на стороне сервера с помощью PHP. В следующих статьях будет более полный список средств для сжатия и оптимизации CSS.

Заключение

Чистый и оптимизированный CSS-код важен не только для веса ваших стилей, но и для поддержания его удобочитаемости. Принципы, упомянутые выше, помогут уменьшить объем стилей, повысить ясность и чистоту кода и сэкономить время на его разработку.


В статье использованы материалы smashingmagazine.com

Border-bottom

Border-bottom лучше чем text-decoration: underline. Он не пересекает нижние части букв, например yjgр, что в некоторых случаях выглядит ужасно. Также вы можете использовать разные стили бордера. Например границу из точек или пунктира.
Пример:

a { border-bottom: dashed 1px #000; }
a:hover { border-bottom: solid 1px #000; }

Background

Вы можете использовать другой фон ссылки. Например в Wordpress ссылка Удалить становится красной при наведении, что говорит об опасности нажатия на неё.
Пример:

a {
color:red;
border-bottom: 1px solid red;
}
a:hover {
color:#fff;
background-color:red;
}

Ссылка с иконкой

Вы можете добавить к своей ссылке иконку, делается это очень просто:

a { background: #fff url('icon.png') no-repeat center left; }

Кроме того, вы можете использовать черно-белые иконки в обычном состоянии и цветные при наведении. Например, мы использовали этот эффект на сайте своей веб-студии внизу главной страницы.

Увеличение букв ссылки

Ещё можно увеличить буквы при наведение на ссылку

a:hover { text-transform: uppercase; }

Анимированные ссылки

С помощью jQuery можно сделать анимированные ссылки, например как здесь. Реализует этот эффект вот такой код:

$(document).ready(function() {  
    $('a.nudge').hover(function() {
        $(this).animate({ paddingLeft: '20px' }, 400);  
    }, function() {
        $(this).animate({ paddingLeft: 0 }, 400);  
    }); 
});

Если вы знаете другие способы сделать ссылки лучше, пишите в комментариях.

Постовой:
Звуковые наркотики, скачать звуковые наркотики.

CSS библиотеки (или фреймворки) предназначены для предоставления готовых решений для различных задач, которые разработчик решает при вёрстке каждого дизайн-макета, например присвоения свойствам начальных значений (reset), модульные сетки, плавающие блоки, всевозможные хаки, обыденный clearfix . CSS библиотека это, своего рода, отправная точка в написании CSS-стилей. И, что самое главное, использование библиотек существенно сокращает время вёрстки дизайн-макета, что неоднократно было проверено мной на практике.

Зачем использовать CSS библиотеки?

Не нужно использовать их только ради того, чтобы их использовать. Ничего особо крутого в этом нет. CSS библиотеки созданы в первую очередь для того, чтобы избежать рутины при написании стилей, не писать одни и те же строчки из проекта в проект. Кроме того, при использовании библиотек ваши стили будут более понятны. Плюс к тому большинство библиотек написаны экспертами в области CSS и достаточно хорошо протестированы.

Недостатки

К сожалению у CSS библиотек есть и недостатки, которые вы должны знать. Вот некоторые из них:

• Ваши стили будут зависеть от библиотеки.
• Требуется знать основы той или иной библиотеки, чтобы её использовать. Ничего страшного – разберётесь.
• Библиотеки писали люди, следовательно они могут содержать ошибки. В этом случае вы убьёте уйму времени на поиск ошибки в своих стилях.
• Вы не будете использовать все возможности библиотеки в своей вёрстке. То есть вы будете подгружать к странице лишние килобайты.

Виды CSS Библиотек

CSS библиотеки можно разделить на два вида: полные и ограниченные.

• Полные CSS библиотеки
  Этот тип библиотек охватывает большинство из того, чтобы может понадобиться разработчику. Такие библиотеки являются своего рода базой.
• Ограниченные CSS библиотеки
  Они выполняют конкретные задачи, например reset.css “сбрасывает” стили.

Существует и третий вариант – ваша собственная CSS библиотека, такие есть у многих профессиональных студий веб-дизайна.

Далее я приведу список практически всех CSS библиотек, которые были когда-либо созданы.

Полные библиотеки

• Blueprint
  Очень популярная на западе CSS библиотека, она поддерживает различные модульные сетки, сброс, стили для типографики, форм и печати. А также содержит стили для кнопок и вкладок.
• Yet Another Multicolumn Layout (YAML)
  YAML содержит базовые стили, стили для печати, контента, навигации, форм, а также хаки для IE.
• YUI Grids CSS Foundation
  Эта библиотека часть Yahoo YUI Library. Она включает в себя стили для вёрстки макетов с различной шириной отцентрованного контейнера и поддерживает двух, трех или четырех-коллонные макеты. Также содержит CSS для “перезагрузки”, базовые стили и стандартный набор шрифтов.
• 960 Grid System
  Содержит стили для 12- или 16-колонных модульных сеток, с шириной контейнера 960px. А также CSS для перезагрузки и стили для оформления текстов.
• BlueTrip
  Поддерживает 24-коллонную модульную сетку и содержит CSS для печати, типографики и форм.
• Emastics
  Лёгкая CSS библиотека, поддерживает три различных модульные сетки, содержит стили для типографики. Стоит отметить что, в этой библиотеке единица измерения – EM.
• OOCSS – Object Oriented CSS Framework
  Очень прогрессивная библиотека. Основана на принципах объектно-ориентированного подхода к написанию CSS. (кто-нибудь знает как это так?). Она основана на % вместо px. За основу были взята библиотека YUI CSS.
• Elastic CSS Framework
  Поддерживает 4-ех колонные макеты, легко реализует фиксированную и “резиновую” вёрстку. Также содержит CSS для “перезагрузки”, базовые стили и типографику.
• The Golden Grid
  Лёгкая библиотека, поддерживает 6 или 12-ти колонную модульную сетку и содержит CSS для “перезагрузки” и типографики.

Ограниченные CSS библиотеки

• Tripoli
  Нацелена на приведение браузеров к веб-стандартам. Ваши стили начитают работать одинаково во всех браузерах. Неплохая база для вёрстки.
• SenCSS – Sensible Standards CSS Framework
  Реализует вертикальный ритм для всех элементов в 18px.
• The 1Kb CSS Grid
  Лёгкая библиотека, поддерживает основные модульные сетки.
• jQuery UI CSS Framework
  Разработана для поддержки пользовательских виджетов jQuery.
• Elements
  Набор стилей для ряда элементов веб-страницы.
• CSS Drop-Down Menu Framework
  Кроссбраузерная реализация выпадающего меню.
• Hartija – CSS Print Framework
  Как видно из названия, содержит стили для печати.
• Formy – CSS Form Framework
  Содержит стили для вёрстки форм и контейнеров.

Другие CSS библиотеки

Следующие библиотеки находятся в разработке, экспериментальные, недостаточно документированные, либо заброшены.

• LogicCSS
• Malo
• WYMstyle
• Boilerplate
• Taffy
• Layouts

Если я вдруг забыл упомянуть о какой-либо CSS библиотеке, напишите о ней в комментариях.

upd: Русский css-фреймворк – css-framework.ru

Изменённые формы работают так же как и обычные. Поля и кнопки созданные Niceforms полностью масштабируемые. Вы можете задать их ширину и высоту с помощью HTML-свойства. Поддерживается использование клавиатуры для навигации между элементами формы.

Более подробнаую информацию вы можете найти на сайте NiceForms.

Посмотреть пример Cкачать NiceForms

HTML-разметка будет выглядеть так:

<div class="expand-down"> 
<!-- Для меню расширяющегося вверх используйте класс expand-up -->
  <ul>
    <li>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <!-- image -->
        <img src="/images/demos/w3c-valid-css-trans.png" />
        <!-- label -->
        <span>Valid CSS</span>
      </a>
    </li>
    <!-- копируйте <li>...</li> чтобы сделать больше элементов меню -->
  </ul>
</div>

Меню, расширяющееся вниз

.expand-down {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  margin-top:20px;
  height:150px;
  width:500px;
  background: url(/images/macosx-style-background.png) no-repeat;
  margin-bottom:30px;
}
.expand-down * {
  margin: 0;
  padding: 0;
}
.expand-down ul {
  padding-top:10px;
  margin-left:10px;
}
.expand-down ul li {
  float:left;
  list-style-type:none;
}
.expand-down ul li a {
  text-decoration:none;
}
.expand-down ul li a img {
  width:50px;  /* начальная ширина изображения - 50% от его ширины */
  height:50px; /* начальная высоты изображения - 50% от его высоты */
  border:none;
}
.expand-down ul li a span {
  display:none;
}
.expand-down ul li:hover a span {
  display:block;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.expand-down ul li:hover a img {
  width:100px;
  height:100px;
}
/* Увеличиваем пункт меню, стоящий первым справа от выбраного*/
.expand-down ul li:hover + li a img {
  width:60px;
  height:60px;
}
/* Увеличиваем пункт меню, стоящий вторым справа от выбраного*/
.expand-down ul li:hover + li + li a img {
  width:55px;
  height:55px;
}

Меню, расширяющееся вверх

.expand-up {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  height:150px;
  width:500px;
  background: url(/images/macosx-style-background.png) no-repeat;
  overflow:visible;
  margin-bottom:30px;
}
.expand-up * {
  margin: 0;
  padding: 0;
}
.expand-up ul {
  margin-left:10px;
}
.expand-up ul li {
  float:left;
  list-style-type:none;
  padding-top:65px;
  margin-top:25px;
}
.expand-up ul li a {
  text-decoration:none;
}
.expand-up ul li a img {
  width:50px;  
  height:50px;
  border:none;
}
.expand-up ul li a span {
  display:none;
}
.expand-up ul li:hover a span {
  display:block;
  font-size:14px;
  text-align:center;
  color:#fff;
  margin-top:-65px;
}
.expand-up ul li:hover a img {
  width:100px;
  height:100px;
}
.expand-up ul li:hover + li a img {
  width:60px;
  height:60px;
  margin-top:-10px;
}
.expand-up ul li:hover + li + li a img {
  width:55px;
  height:55px;
  margin-top:-5px;
}

Это меню работает в Internet Explorer 7 + и 8 +, Firefox 3 +, Google Chrome, Safari 3.2 +, Opera 9.52 + и Konqueror 3.5.7 +.

Посмотреть пример Cкачать архив

Проблема состоит в том что некоторые браузеры отображают форму неправильно. Это объясняется тем, что по умолчанию форма не наследует CSS-стили семейства и размера шрифта.
Следующий CSS исправляет эту ошибку:

input, textarea, select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

Таблицы

В некоторых браузерах таблицы также имеют свои стили. Вы наверно сталкивались с тем, что текст в ваших таблицах больше чем остальной на странице. Проблема таже – таблицы не наследуют свойства шрифта как и формы.
Проблема решается следующим CSS:

table{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}

1. Ширина

Длина строки текста очень важна. Очень утомительно читать слишком длинные, либо слишком короткие строки. В длинных строках трудно найти следующую, а короткие могут быть использованы только для небольших текстов. Оптимальной считается строка в 40-80 символов, включая пробелы. (Для русского языка идеальной считается строка в два алфавита, т.е. около 65 символов.)

Самым простым способом расчета ширины блока текста является метод Роберта Брингурста. <ширина текста> = <размер шрифта> *30. Т.е. если размер шрифта 10px, ширина блока будет 300px.

p {
     font-size: 10px;
     max-width: 300px;
 }

2. Межстрочное пространство

Межстрочное пространство играет большую роль для читабельности текста. Правильное разделение строк позволяет пользователю проще следить за строкой и улучшает внешний вид текста.

На межстрочное пространство влияет множество факторов: гарнитура, полнота, размер шрифта, длина строки, расстояние между словами и др. Чем длиннее строка, тем больше пространство. Чем больше размер шрифта, тем оно меньше. Правило – устанавливать межстрочное пространство на 2-5 пунктов больше, чем размер шрифта, в зависимости от гарнитуры.

Пример кода:

body { 
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 16px;
 }

3. Кавычки

Кавычки должны располагаться на полях текста, иначе они будут сливаться с текстом, тем самым разрывая левое поле и нарушая баланс текста.

Пример CSS:

blockquote { 
 text-indent: -0.8em;
 font-size: 12px;
 }

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

Сетка базовых линий это основа типографического ритма на странице. Она позволяет читателям легко следить за текстом, увеличивая читабельность. Постоянный вертикальный ритм удерживает текст на постоянной базовой сетке так, что пропорции и баланс сохраняются неизменными по всей странице вне зависимости от размера шрифта, интерлиньяжа или длинны строки.

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное пространство было равено размеру сетки базовых линий.

Пример:

body {
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
 }
p {
 margin-bottom: 15px;
 }

Это позволяет каждому параграфу располагаться на сетке, сохраняя вертикальный ритм текста.

5. Висячие строки

Верхняя висячая строка — строка текста или слово в конце параграфа. Нижняя висячая строка — слово или короткая строка текста в начале или конце колонки, которая отделена от всего остального текста. Верхние и нижние висячие строки образуют неуклюжие куски, прерывают взгляд читателя и влияют на читабельность. Этого можно избежать увеличив размер шрифта, межстрочное пространство, длину строки, расстояние между словами и межбуквенное расстояние или вводя вручную разрывы строки.

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение текста

Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Примеры:

span {
 font-style: italic;
 }
  h1 {
 font-weight: bold; 
 }
 h2 {
 text-transform: uppercase;
 }
 b {
 font-variant: small-caps;
 }

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:

h1 { font-size: 48px; }
h2 { font-size: 36px; }  
h3 { font-size: 24px; }  
h4 { font-size: 21px; }  
h5 { font-size: 18px; }  
h6 { font-size: 16px; }  
p { font-size: 14px; }

8. Рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Источник: smashingmagazine.com

Задача здесь очень простая – я хочу иконку, которая прыгает несколько раз при наведении на неё курсора (в Skype этот значок прыгает если на него нажать, но я думаю прыгать ему лучше при событии hover).
Итак, кнопка будет состоять из изображения и текста.

<a class="button" href="#">
     <img src="download.png" alt="" />Скачать</a>

Зададим стили для кнопки. Ключевым является то, что иконка располагается абсолютно относительно-расположенной ссылки. Подгоним позицию кнопки так, чтобы её тень была внутри блока ссылки. Обратите внимание на то, что в Firefox кнопка будет с закруглениями. (благодаря свойству -moz-border-radius- ).

.button {
     padding: 4px 10px 3px 30px;
     border: solid 1px #8AB134;
     position: relative;
     cursor: pointer;
     background-image: url('images/bkg.png' );
     background-repeat: repeat-x;
     display: inline-block;
     font-size: 11px;
     height: 16px;
     text-decoration: none;
     color: #40740D;
     -moz-border-radius-bottomleft: 5px;
     -moz-border-radius-bottomright: 5px;
     -moz-border-radius-topleft: 5px;
     -moz-border-radius-topright: 5px;
 } 
.button img {
     position: absolute;
     top: -7px;
     left: -8px;
     border: none;
 } 
.button:hover {
     color: #8AB134;
 }

Теперь займемся анимацией. Нам нужно сделать 3 скачка кнопки – один большой и два маленьких. В первый прыжок иконка будет подниматься на 6px, во второй на 3px и в последний прыжок на 2px. После каждого скачка иконка вернётся в своё первоначальное состояние.

$(document).ready(function(){
    $(".button").hover(function(){
        $(".button img")
            // 1 jump 
            .animate({top:"-13px"}, 200).animate({top:"-7px"}, 200)
            // 2 jump
            .animate({top:"-10px"}, 100).animate({top:"-7px"}, 100)
            // 3 jump
            .animate({top:"-9px"}, 100).animate({top:"-7px"}, 100);
    });
});

Код прекрасно работает в Firefox, Safari и IE7+. Меня не волнует работает ли он в IE6.
Посмотреть пример Cкачать архив

1. Информационные сообщения

Цель информационных сообщений – информирование пользователей о чем-то актуальном. Как правило, такие сообщения голубого цвета, потому что люди ассоциировать этот цвет с информацией, независимо от его содержания. Это может быть любая информация, относящаяся к пользователю.

Например, информационные сообщения могут показывать некоторую справочную информацию или какие-нибудь советы.

2. Сообщение об успехе

Такие сообщения отображаются после успешной операции пользователя. Например, сообщение: “Ваш профиль был успешно сохранен, подтверждение было отправлено на адрес электронной почты, который Вы указали”. Это означает, что каждая операция в этом процессе (сохранение профиля и отправка электронной почты) успешно выполняется.

Многие разработчики применяют в этом случае информационное сообщение, но я предпочитаю использовать отдельный тип, используя зелёные цвета и зелёный значок с галочкой.

3. Предупреждающее сообщение

Предупреждающее сообщение должно отображаться для пользователя, когда операция не может быть завершена без его участия. Например, “Ваш профиль был сохранен успешно, чтобы его активировать вы должны перейти по ссылке, отправленной Вам на адрес электронной почти, который вы указали”. Обычное предупреждение имеет желтый цвет и значок в виде восклицательного знака.

4. Сообщения об ошибках

Сообщения об ошибках должны отображаться, когда по каким-либо причинам операция не может быть завершена. Например, “Ваш профиль не может быть создан”. Красный очень подходит для этого, поскольку люди ассоциируют этот цвет с любого рода предупреждениями.

Процесс

Теперь, когда мы знаем как должны выглядеть сообщения для пользователя, давайте посмотрим, каким образом реализовать это с помощью CSS.
Разметка HTML будет выглядеть так

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

CSS-класс устанавливает нужные нам границы, отступы, бэкграунды, иконки для соответствующих сообщений:

body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

Иконки я взял в коллекции, из предыдущей статьи.

Посмотреть пример Cкачать архив

Постовой:
ремонт стиральных машин ZANUSSI. Выгодные условия ремонта и обслуживания.

Обычные селекторы

В практике верстки веб-страниц чаще всего применяются селекторы типов и нисходящие селекторы . Селектор типа используется для присвоения стиля всем элементам заданного типа, например всем гиперссылкам, абзацам, заголовкам. Для создания селектора типа нужно всего лишь поместить в таблице CSS имя элемента (т.е. типа) перед определением стиля, как в приведенных ниже примерах.

p {color : black;}
а {text-decoration: underline ; }
h1 { font-weight: bold;}

Нисходящие селекторы позволяют присваивать стили элементам, вложенным в заданные элементы или группы элементов. Нисходящий селектор создается путем добавления пробела между двумя селекторами. В следующем примере заданный стиль будет присваиваться только гиперссылкам (дескриптора), вложенным в элементы списков (дескриптор li). Следовательно, данный стиль не повлияет на гиперссылки, расположенные в простых абзацах (дескриптор p).

Для более специфичного задания элементов используются селекторы идентификаторов и классов. С их помощь можно присваивать стили элементам, имеющим указанное имя идентификатора или класса.

#intro {font-weight: bold; }
.datePosted {color: green; }

Псевдоклассы

В некоторых случаях элементу нужно присвоить стиль не на основе структуры страницы, а по другим признакам, например в зависимости от состояния элемента формы или гиперссылки. Это можно сделать с помощью селектора псевдоклассов.

/ * Присвоение синего цвета непосещенным гиперссылкам * /
a:link { color: blue; }
/ * Присвоение зеленого цвета посещенным гиперссылкам * /
a:visited { color: green; }
/ * Присвоение красного цвета гиперссылке ,
          на которую наведен указатель мыши, и активным гиперссылкам */
a:hover, a:active { color: red; }
/ * Присвоение красного цвета строке таблицы,
          на которую наведен указатель мыши * /
tr:hover { background-color: red; }

Директивы :link и :visited являются псевдоклассами гиперссылок. Их можно подключать только к гиперссылкам. Директивы :hover, :active и :focus являются динамическими псевдоклассами. Теоретически их можно подключать к любому элементу. Однако, к сожалению, динамические псевдоклассы поддерживаются только несколькими современными браузерами. Браузеры IE6- обращают внимание на селекторы :active и :hover, только если они подключены к гиперссылкам, а селекторы :focus игнорируются ими начисто.

Универсальный селектор

Это один из наиболее мощных и наименее популярных типов селекторов. Он служит как бы метасимволом, замещающим любой доступный элемент. Как и метасимвол в текстовом коде, универсальный селектор обозначается символом звездочки. Обычно универсальный селектор применяется для стилизации каждого элемента страницы. Например, с помощью следующего правила можно отменить вывод внешних и внутренних пустых полосок для каждого элемента страницы.

* {
padding: 0;
margin: 0;
}

В сочетании с другими селекторами универсальный селектор можно применить для стилизации всех дочерних элементов заданного элемента.

В нестандартном режиме обычно эмулируется поведение устаревших браузеров, таких как IE4.0 или NN, что позволяет предоставлять посетителю устаревшие сайты.

Наиболее очевидное отличие между стандартным и нестандартным режимами состоит в способах вывода эле ментов патентованной модели контейнеров Microsoft Windows браузерами Internet Explorer. Когда IE6 появился на рынке, в нем было введено использование правильной модели контейнеров в стандартном режиме, а устаревших моделей контейнеров – в не стандартном . Для обеспечения обратной совместимости с сайтами, созданными для IE5 и более низких версий, в браузерах Орега 7 и выше тоже при меняется вывод контейнеров устаревших моделей IE в нестандартном режиме.

Другие, менее заметные отличия специфичны для браузеров различных типов. Например, для некоторых браузеров символ # перед шестнадцатеричным значением цвета не обязателен. В других же предполагается, что в таблицах CSS безразмерная длина измеряется в пикселях, в третьих размер шрифта ключевых слов увеличивается на единицу и т.д.

Браузеры Mozilla и Safari могут работать ещё в одном, третьем режиме, который называется “почти стандартный”. От стандартного он отличается лишь некоторыми малозначительными правидами обработки таблиц.

Постовой:
Хотите скачать кисти для Фотошопа? Вам сюда.