Ruby on Rails c нуля!

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

RGBA

RGBA – это новый способ задания цвета, где к привычному для нас RGB, было добавлено A – alpha, т.е. прозрачность.
Формат задания цвета RGB (red-green-blue):

#container{background: rgb(13, 100, 50)}

Формат задания цвета RGBA (red-green-blue-alpha):

#container{background: rgba(13, 100, 50, .5)}

Как можно было догадаться, прозрачность может принимать значение от 0 до 1, причем 0 – это полная прозрачность, а 1 – это полная непрозрачность.

Формат задания цвета RGBA может, как не сложно догадаться, использоваться не только при задании цвета фона, но и при задании цвета текста, рамок, тени и т.д.

Text-Shadow

Свойство Text-shadow позволяет добавить нашему тексту на веб странице тень и назначить ей определенные свойства, а свойства у text-shadow следующие: смещение по х-координате, смещение по y-координате, размытие и, конечно же, цвет тени. Пример использования свойства text-shadow:

#container{text-shadow: 1px 1px 0 rgba(255, 0, 0, .5)}

Если смещению по x-координате присвоить отрицательное значение, то тень сместится в левую сторону, а если смещению по y-координате дать отрицательное значение, то тень, как и ожидалось сместится в вверх.
У свойства text-shadow есть одна интересная особенность, мы можем для каждого текстового блока задавать несколько теней, разделяя задание параметров для каждой запятой. Пример:
#container h1{color:rgba(0, 0, 0, 1); text-shadow: 1px 1px 2px #000, -1px -1px 2px #fff}

Border –Radius

Свойство border-radius позволяет нам создавать скругленные углы у блочных элементов без использоования спрайтов или другой графики. Пример:

#container{border-radius: 15px}

Также можно определить различный радиус скругления для каждого угла блочного элемента:

#container{border-top-left-radius: 40px; border-top-right-radius: 20px; border-bottom-right-radius: 10px; border-bottom-left-radius: 4px }

Или более удобным и коротким способом:

#container{border-radius: 40px 20px 10px 5px}

Радиусы скругления определяются в часовом порядке, начиная с левого верхнего угла. Если вы попытались повторить пример, но у вас ничего не вышло с вашими, казалось бы современными браузерами, которые должны бы поддерживать свойство border-radius, не расстраивайтесь. Дело в том, что для Mozilla – браузеров необходимо добавить к свойству border-radius прифекс -moz-, т.е: -moz-border-radius: 40px 20px 10px 5px;, а для браузеров на движке Webkit необходимо добавить префикс –webkit-: -webkit-border-radius: 40px 20px 10px 5px; . Вот теперь все в порядке. Для того, чтобы скругленные углы были видны во всех браузерах (а точнее в браузерах поддерживающих CSS3), нам необходимо прописать свойство border-radius три раза: стандартное определение свойства, определение свойства для браузеров на движке Gecko и 3й раз для браузеров, работающих на движке Webkit. Пример:

#container{border-radius: 20px; -moz-border-radius:20px;-webkit-border-radius: 20px}

Свойство Box-Shadow

Свойство box-shadow создает тень для блочных элементов и определяет ее параметры. Атрибуты свойства box-shadow абсолютно такие же, как и уже знакомого нам text-shadow, а именно: смещение по x-координате, по y-координате, размытие и цвет тени. Пример:

box-shadow: 1px 1px 2px #555;

Как и свойство border-radius, свойство box-shadow необходимо определять 3 раза:

#container{ box-shadow: 1px 1px 2px #555; -moz-box-shadow: 1px 1px 2px #555; -webkit- box-shadow: 1px 1px 2px #555;}

Свойство box-shadow может, так же, как и text-shadow определяться несколько раз для одного элемента. Это полезно, например, если нам необходимо создать иллюзию объемности блочного элемента. Пример:

#container{
Background: rgba(220, 100, 135, 1);
Border-radius: 15px;
Box-shadow: -2px -2px 0 #fff, 2px 2px 0 rgba(160, 70, 95, 1), 3px 3px 10px rgba(0,0,0, .5)}

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

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

За основу данного поста была взята следующая статья: