Вторник, 27 Марта 2012 07:53

Css3 генераторы

Written by 
Оцени эту запись
(2 Голоса)

css3 генераторыСейчас модно использовать в верстке все прелести css3. Точнее, дизайнеры любят рисовать всякие скругления, градиенты и т.д. Известно, что IE подобные прелести не воспринимает. В сети есть множество примеров вариантов создание скругленных углов - они отличаются количеством использованых картинок и количеством кода. Но часто но разным причинам достаточно использования CSS3, т.е. важно корректное отображения сайта в разных браузерах, но можно пожертвовать красивостью его в IE.

 

Ресь именно о таком случае. В данном посте хочу рассказать о CSS3 генераторах кода. Я таким часто пользуюсь.

 

 

 

Мы рассмотрим генераторы для:

  • border-radius
  • background-gradient
  • box-shadow

 

1. Border-radius - Border-radius.com

Здесь можно задать размер радиуса скругления и получить готовый кроссбраузерный код. Углы могут быть одинаковые или разные.

Например, радиус скругления равен 1 для всех углов:

 

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

border-radius: 1px; 

 

А если скруглить только левый верхний и правый нижний, то код будет иметь вид:

 

-webkit-border-top-left-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-bottomright: 1px;
border-top-left-radius: 1px;
border-bottom-right-radius: 1px;

 

Напомню, что в IE углы будут прямые.

 

2. Background gradient - Gradients.glrzad.com

Здесь указывается цвет и его расположение. Можно изменять количество точек цвета, направление градента и т.д. Очень полезно для верстки объемных кнопочек и разного рода заливок. 

Например, код градиента от черного (внизу) до белого (вверху) будет иметь вид:

 

background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,0,0)), color-stop(1, rgb(255,255,255)) );

 

Пользоваться такой штукой удобнее, чем руками писать такой кусок кода) Не забывайте, что IE опять таки такое счастье не понимает. Потому советую для него прописывать простой фон:

background: #999;

 

Вместе получится:

 

background: #999;

background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); 

background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); 

background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); 

background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); 

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,0,0)), color-stop(1, rgb(255,255,255)) ); 

 

В таком случае, в всех нормальных браузерах получить красивый градиент, а в IE просто серый фон. Серым я его сделала, так как он средний между нашими градиентными цветами - черным и белым.

 

3. Box-shadow - Css3generator.com

Здесь мы указываем внутрення тень или внешняя, смещение тени по вертикали и горизонтами, размер и размытие тени, а также ее цвет и прозрачность.

 

-webkit-box-shadow: 3px 1px 5px 3px rgba(0, 0, 0, 1);

-moz-box-shadow: 3px 1px 5px 3px rgba(0, 0, 0, 1);

box-shadow: 3px 1px 5px 3px rgba(0, 0, 0, 1);

 

В этом коде 3px и 1px - смещение тени (горизонтальное и вертикальное соответственно),  дальше 5px и 3px - ее размер и размытие, rgba(0, 0, 0, 1) - цвет (первые 3 цифры, по RGB) и прозрачность(значение от 0 до1).

 

Вообще, по этой ссылке есть много разных CSS3 генераторов, но по предыдущим описанным пунктам мне привычнее пользоваться указанными ссылками. А здесь еще есть text-shadow, font-face, transform и т.д.

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов