Блог almlex’a

Здравствуйте, довольно давно постов не было, но зато сейчас вас ждёт интересный урок про CSS3.

В этой серии из двух постов мы будем делать красивые, без мусора в коде и почти без графики оверлэи (overlay[er]), самый лёгкий способ понять что такое: оверлей это слой над сайтом, то есть да, _uWnd это оверлеи. Они не обязательно должны быть движимые или с изменяемыми размерами. Поэтому мы только рассмотрим оформление :)

Итак, поскольку CSS3 ещё не пришёл в массы и знакомы с ним не все, давайте рассмотрим его правила, которые мы будем использовать. Но для начала оговорюсь: CSS3 пока поддерживается только со специальными приставками: -moz- для ff и -webkit- для вебкита (хром и сафари), опера не поддерживает.

Пожалуй самый знакомый вам:

{border-radius:/* Значение */;}

Он закругляет углы блока и обводку. Значение = [радиус(число+ед. измерения)], например 5px, 1em, 8pt, 3%.И тут без «но» нельзя, блоки с видимым фоном или обводкой будут торчать из закруглённого блока. Так что их тоже нужно закруглять. Закруглять можно не все углы, а определённые и по-разному.

{
border-radius-topleft:5%; /* верхний левый угол */
border-radius-topright:3em; /* верхний правый угол */
border-radius-bottomleft:13pt; /* нижний левый угол */
border-radius-bottomright:10px; /* нижний правый угол */
}

Идём дальше:

{box-shadow:/* Значение */;}

Делает тень под блоком, если блок с border-radius то и тень с ним. Значение = [верхний отсуп(число+ед. измерения)] [левый отсуп(число+ед. измерения)] [размытие краёв(число+ед. измерения)] [цвет]. То есть выглядеть код будет так:

{box-shadow: 10px 10px 5px #888;}

И пожалуй самое моё любимое:

{/* любое свойство в котором можно использовать цвет, я взял самое очевидное */ color: rgba(/* Значение */);}

Позволяет задавать цвету прозрачность. Значение = [красный(число от 0 до 255)], [зелёный(число от 0 до 255)], [синий(число от 0 до 255)], [прозрачность(число от 0 до 1)]. Выглядеть код будет так:

{
color: rgba(0, 0, 0, 0.8);
/* или например так */
background-color: rgba(255, 0, 0, .6);
}

Теоритическая часть окончена, и скоро будет практическая :)

( Часть вторая )