При верстке я всегда использую от макета к макету одинаковое наименование классов и айдишников (id). И дело даже не в том, что лень или не хватает фантазии придумывать каждый раз что-то новое. Вовсе нет. Скорее это обусловлено тем, что в наименования закладывается логическая оставляющая. Привожу примеры наименования блоков (id’шники) с кратким описанием что и к чему:

• #header - для “шапки”
• #footer - для “подвала”
• #center - центральная часть
• #left, #right, #leftside, #rightside - для левого и правого сайдбара
• #content - для контентной части
• #news - новости
• #menu - меню навигации
• #submenu - как правило дополнительное меню, например, меню каталога
• #subscribe - форма подписки
• #feedback - форма обратной связи

Список классов:

• .active - указание на то, что элемент активен (в меню или подменю)
• .left, .right - указание на выравнивание слева, справа (обтекание); стили для картинок с различным выравниванием
• .title - блок заголовка
• .clear - обнуление обтекания
• .logo - логотип
• .phone, .address - блок с телефоном и адресом, как правило в шапке
• .btn - стиль для кнопки (”Отправить” или “Подписаться”)
• .descr, .full - краткое описание, полное описание (например, в каталогах)
• .foto, .gallery, .fotogallery - класс для отображения фотогалереи

Ну это из моей практики, а вот что говорит статистика Далее …

В прошлых уроках мы рассматривали как повернуть текст и как добавить тень с помощью CSS.

Тема сегодняшнего урока: как скруглить углы с помощью CSS.

Для этого существует свойство border-radius. Поэтому если мы хотим всем углам в блоке придать одинаковый радиус скругления, пишем:


border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;


lanjut →

CSS transform позволяет поворачивать, наклонять, перемещать и масштабировать элементы с помощью CSS. Firefox, Opera и Webkit-браузеры, конечно же, поддерживают это свойство. Ну а всеми “любимый” IE, как говорится, опять sucks.

Подробную информацию вы найдете на www.w3.org, указанной выше, а сейчас немного теории и примеров.

Чтобы трансформировать блок, прописываем в CSS к нему следующие параметры:


.classname {
transform: свойство;
-webkit-transform: свойство;
-moz-transform: свойство;
}


Пример трансформации блоков с помощью CSS

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

Внешняя тень


.shadow_out {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}


Внутренняя тень


.shadow_inner {
-moz-box-shadow: 5px 5px 5px #ccc inset;
-webkit-box-shadow: 5px 5px 5px #ccc inset;
box-shadow: 5px 5px 5px #ccc inset;
}

Пример красивого оформления тени с помощью css

Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий “косяк” там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.

Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)

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

1. условные комментарии
2. хаки для CSS

Список условных комментариев и хаков для IE и CSS

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

Demo и Скачать

5 способов оформления ссылок…

Думаю все уже выучили, что семантически правильно представлять меню на сайте в виде списка. Собственно поэтому мы и продолжаем дальше практиковаться в его оформления (первая статья на эту тему была про древовидный список).

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

Как сделать красивое меню на CSS

Не скажу, что мне каждый раз приходиться устанавливать вид курсора. Нет, за последние полгода данная техника пригодилась только два раза. Один раз - при работе с jQuery галереей, вторая раз - при работе уже со второй галереей (опять на jQuery), но это было больше для красоты.

Привожу подборку стилей по определению вида курсора. Вдруг кому понадобится.

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

Ну что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.

Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).

Что нам это дает:

• Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
• Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.

Демо | Скачать

А теперь о том, как сделать градиентный текст на css

1.1 Кодинг: Начинаем

• Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS.
• Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset, обнуляя отступы и поля всех элементов в самом начале файла стилей.
• Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию.

master.css


@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");


<style type="text/css" media="Screen">
/*\*/ @import url("css/master.css"); /**/
</style>


• Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>)


.width100 {width: 100%;}
.width75 {width: 75%;}
.width50 {width: 50%;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

остальные советы по улучшению CSS кода »