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);"> </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 { .toggleOFFright { |