Меню сайта
Категории раздела

Краткий обзор CSS3

Просмотров: 425 | Добавил: Mr_Djun | Загрузок: 0 | Комментарии: 2


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

Границы
Закругленные углы

Code
.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

Градиентные границы

Code
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Тени

Code
.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

Текстовые эффекты в CSS3
Тень от тектса

Code
.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Перенос длинных слов

Code
.text_wrap {
word-wrap: break-word;
}

Пользовательский интерфейс
Растягивание блоков

Code
.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both; //или inline
overflow: auto;
}

Размеры блоков

Code
.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

Выделение

Code
.ui_outline {
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

Свойство background-clip

Позволяет наложить любое изображение на текст, границы или тень, реализую при этом что-то похожее на маску в Photoshop.

Code
.background_clip {
background: url(green-background.png), black;
border: 5px solid black;
padding: 5px;
-webkit-background-clip: text, border;
color: transparent;
}

Селекторы
Выбор по свойствам элемента

Code
[att^=val]
элемент, значение свойства (att) которого начинается с 'val'.

[att$=val]
значение свойства (att) которого заканчивается на 'val'.

[att*=val]
элемент, значение свойства (att) которого содержит по крайней мере одно вхождение подстроки 'val'.

Автор статьи: Павел Марковнин

Всего комментариев: 2
2 ТЕСТ   (07.08.2010 13:24)
Спасибо!

1 Mr_Djun   (28.07.2010 13:47)
Очень полезная информация smile

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини-чат
Наш опрос
Кто вы?
Всего ответов: 423
Статистика


фарфор мейсенский
недвижимость в германии
скачать chrome
Онлайн всего: 1
Гостей: 1
Пользователей: 0