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

 

Давайте рассмотрим несколько примеров:

Применение различных шрифтов

 

body { 
background: 
url(../images/top-left.png) bottom left fixed no-repeat, 
url(../images/top-right.png) bottom right fixed no-repeat; 
url(../images/bottom-left.png) top right fixed no-repeat, 
url(../images/bottom-right.png) top left fixed no-repeat, 

 

Текстовые тени

p {text-shadow: #003471 /* цвет тени */ 2px /* смещение вправо */ 5px /* смещение вниз */ 2px /* размытие*/;}

 

Закругленные углы

Теперь это не доставит вам абсолютно никаких усилий

div { 
border: 2px solid #434343; 
padding: 10px; 
background: #e3e3e3; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
width: 500px; 

 

Градиентная заливка

<div class="gradients" style="background-image: -webkit-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red); background-image: -moz-linear-gradient(0, pink, blueviolet, blue, green, yellow, orange, red);"> &nbsp;</div>

 

Колонки:

<div style="-moz-column-width: 200px; -webkit-column-width: 200px; column-width: 200px; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-rule: 2px dashed #7D26CD; -webkit-column-rule: 2px dashed #7D26CD; column-rule: 2px dashed #7D26CD;">Текст</div>

 

Разговорные блоки

<blockquote><p>Quote</p></blockquote> 

 

Переключатели ONN и OFF

toggleONleft {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
padding: 0px 8px 0px 12px;
-moz-border-radius-topleft: 0.5em;
-moz-border-radius-bottomleft: 0.5em;
-webkit-border-top-left-radius: 0.5em;
-webkit-border-bottom-left-radius: 0.5em;
border-top: 4px solid #aaa;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #ccc;
-moz-border-top-colors:#aaa #bbb #ccc #ddd;
-moz-border-left-colors:#aaa #bbb #ccc #ddd;
-moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
-moz-border-right-colors:#aaa #bbb #ccc #ddd;
background-color: #ddd;
display: inline;
}

.toggleOFFright {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
color:#414141;
padding: 0px 12px 0px 8px;
-moz-border-radius-topright: 0.5em;
-moz-border-radius-bottomright: 0.5em;
-webkit-border-top-right-radius: 0.5em;
-webkit-border-bottom-right-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#aaa #fff #fff #fff;
-moz-border-right-colors:#aaa #dedede #efefef #fafafa;
-moz-border-left-colors:#aaa #dedede #efefef #fafafa;
-moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
background-color: #fff;
display: inline;
}

 

 

Хотите, перезвоним вам за 35 секунд?
ЗАКАЗАТЬ ЗВОНОК
Хотите, перезвоним вам за 35 секунд?
Это абсолютно бесплатно!