В прошлых уроках мы рассматривали как повернуть текст и как добавить тень с помощью 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

Для того, чтобы поменять фоновый цвет при выделении текста со стандартного на желаемый, будем использовать псевдо-элемент ::selection (с псевдо-классом :last-child мы уже сталкивались ранее, когда создавали древовидный список).

К сожалению, ::selection используется только в CSS3 и поддерживается далеко не всеми браузерами, на данный момент - FireFox, Safari и Opera 9.5

Плюс этого приема в том, что можно логически выделять на страницах нужные блоки. Вот есть у вас сайт с автомобильной тематикой, продвигаете вы внутреннюю страницу (или даже рекламируете ее с помощью контекста), чтобы компенсировать потраченные деньги, нужно, чтобы посетители конвертировались в покупателей. Для этого мы берем какой-то логически законченный блок текста, пусть он будет о плюсах покупки автомобилей в Мурманске. Чтобы привлечь к нему внимание, надо его аккуратно выделить и стилизовать. Вот в этом случае на и поможет фоновая заливка. дело в том, что люди при чтении текста имеют привычку выделять текст по мере чтения. Просто так удобней воспринимать. А вот теперь представьте, что помимо просто фоновой заливки, клиенты заметят при выделении не стандартный синий с белым, а фон, стилизованное под общую цветовую гамму сайта.

Собственно как можно изменить фон выделенного текста

Сегодня мы рассмотрим урок по созданию древовидного списка, каждый из пунктов которого соединяется линиями.

Если не засорять код чем-то лишним, то в идеале он будет выглядеть следующим образом:

[php]
<ul class="tree">
<li>Продукты
<ul>
<li>Молочные
<ul>
<li>Молоко</li>
<li>Кефир</li>
</ul>
</li>
.
.
.
</ul>
[/php]

Как оформить древовидный список с помощью css