Записки лондонского фрилансера

5 простых, но полезных свойств CSS для дизайнеров и верстальщиков

Опубликовано admin в категориях Переводная статья, Дизайн

Краткий перевод статьи “5 простых, но полезных свойств CSS” (оригинал статьи “5 Simple, But Useful CSS Properties”, урл статьи http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/).

Все 5 представленных свойств существуют не только в новой версии CSS3, но и в CSS2.
Они широко поддерживаются различными браузерами. Несмотря на свою очевидную полезность, используются они достаточно редко. Речь идет о: clip, min-height, white-space, cursor и display.

1. CSS Clip

Хотелось бы остановиться на этом свойстве отдельно в одном из ближайших постов с конкретными примерами создания превью имиджей в портфолио.

2. Min-height

Свойство min-height позволяет задать минимальную высоту элемента. Может быть очень полезным в том случае, если вам надо выдерживать структуру (сетку) сайта - например, чтобы текстовая область не была по высоте меньше боковой колонки.

Код:
.with_minheight {
min-height: 550px;
}


min-height не поддерживается IE6, однако это можно обойти следующим образом:

.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}

3. White-space

Функция white-space определяет, как пустое пространство будет окружать элемент (текст). Например, white-space: nowrap не будет позволять тексту заходить на предыдущую строку

Код:

em {
white-space: nowrap;
}

4. Display inline / block

block-тэги располагают элементы на новой строке, inline - на той же строке. Примеры block-тэгов: < div >, < h1 > и < p >.
Примеры inline-тэгов: < em >, < span >, < strong >. Однако элементы можно расположить по-своему, определив опции inline или block.
Иными словами, даже несмотря на наличие тэга < p >, два элемента можно расположить в одной строке:

Код:


.block em {
display: block;
}

.inline h4, .inline p {
display: inline;
}
К сожалению, с IE опять возникают проблемы.

5. Cursor

Если курсор находится над активной кнопкой, он будет менять внешний вид. Если кнопка неактивна, курсор будет оставаться стрелкой (по умолчанию).

Код:


.disabled {
cursor: default;
}

.busy {
cursor: wait;
}

.clickable:hover {
cursor: pointer;
}

Еще немного постов для кодеров и умных дизайнеров:
Юзабилити: увеличение кликабельной зоны
Объемные буквы без Фотошопа (letterpress effect)