CSS3 – не тенями едиными

CSS эволюциюнирует с огромной скоростью, и уже грозит приставкой в виде цифры “3?. Огромный потенциал технологии наконец-то начинает реализовыватся. И хотя это все еще очень сыро (о чем говорит хотя бы то, что выпускатся CSS3 будет помодульно), предлагаю оценить некоторые готовые наработки.

 

Теория:

Упор делается на динамику. Собственно, добавленна пара новых селекторов, стилизация форм и других input-элементов во всевозможных состояниях (:active, :hover…), расширенно свойство appearence, добавлен интересный метод использования картинок как границ блока и многое другое. Полный список изменений писать бесполезно – он изменяется на лету. О последних изменениях можно почитать на w3.org, особенно рекомендую про селекторы и User Interface.

 

Практика:

Итак, далее пара работающих примеров из CSS3. Тестировалось все под Firefox 3.5.7, последний Safari тоже должен тянуть, а остальные – уж извините, качайте последний Firefox и наслаждайтесь =)

CSS3 – это вам не щи лаптем хлебать.

 

Закругленные углы и тени:

Тот самый, гуляющий по сети блок, с закругленными углами и тенью

border: solid 1px #FFFFFF;

 -moz-box-shadow: 7px 5px 5px #101010;

 -moz-border-radius:5px;

 -webkit-box-shadow: 7px 5px 5px #101010;

 -webkit-border-radius: 5px; padding: 1px 5px;

Блок под углом:

А это –

Блок, отрисованный

под углом

width: 15em;

 border: solid gray;

 -moz-transform: translate(100px) rotate(20deg);

 -moz-transform-origin: 60% 100%;

 -webkit-transform: translate(100px) rotate(20deg);

 -webkit-transform-origin: 60% 100%;

color:#DD0000;

 padding: 1px 5px;

Полупрозрачный блок:

Блок,

прозрачный на 50%

background-color: rgba(0, 54, 105, .5);

width:250px;

height:100px;

font-size:16px;

padding:3px 5px;

Элементы, меняющие размер при наведении:

-moz-transform: scale(1.50);

-webkit-transform: scale(1.50);

Организация текста в колонки (только для Firefox):

-moz-column-count:3;

-moz-column-rule: solid 1px gray;

-moz-column-gap: 20px;

Итог:

 

Вот такие зарисовки.