Добавляем реализма при помощи CSS3

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

Снимки а-ля Palaroid

Мгновенные снимки Palaroid до сих пор являются очень удобным способом фотографирования. В этом примере мы попытаемся сымитировать снимок Palaroid: добавим вокруг изображения белую рамку, которая будет внизу много шире, чем со всех остальных сторон. Как вы можете увидеть в демо, фото отлично смотрится с тенью позади и динамичным переходом. Итак, код:

img { border: 15px solid #fff; border-bottom: 65px solid #fff; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); }
img:hover { -webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1); -moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1); -webkit-transform: rotate(1deg) scale(1.05); -moz-transform: rotate(1deg) scale(1.05); }

Тень, возникающая при наведении указателя мыши на фотографию, позволяет создать иллюзию того, что снимок был немного приподнят над поверхностью стола.

Кнопочки

Почему в web-дизайне существуют кнопки? Сеть — это достаточно интерактивная вещь, а кнопки являются одним из тех элементов, который придает ей эту самую интерактивность. Они проще для понимания и являются копией реальных кнопок, которые мы используем в повседневной жизни: компьютеры, плееры и т. п., - все эти устройства обладают кнопками.
Для того, чтобы сделать кнопку максимально реалистичной, мы будем использовать CSS3. Для того, чтобы придать кнопке форму круга, мы будем воспользуемся CSS3-свойством border-radius, значение которого установим в половину от ширины и высоты:

button.two { width: 30px; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-indent: -9999px; border: 1px solid #696969; background: #696969 url(power.png) no-repeat 6px 5px; }

Чтобы выделить активное состояние кнопки, будем использовать градиент, который будет идти от темного вверху к светлому внизу. Чтобы сильнее подчеркнуть это активное состояние, применим незначительное преобразование, которое масштабирует кнопку. Фоновое изображение при этом сохранится:

button.two:active { -webkit-transform: scale(0.97); -moz-transform: scale(0.97); background: url(power.png) no-repeat 6px 5px, -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #696969), color-stop(0.72, #2a2a2a) ); background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient( center bottom, #696969 13%, #2a2a2a 62% ); }

Класс с именем «border» мы применим для блока, содержащего кнопку:

.border { margin: 0 auto; height: 42px; width: 42px; display: block; background-color: #fcfcfc; -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, #fcfcfc), color-stop(0.72, #c0c0c0) ); background: -moz-linear-gradient( center bottom, #fcfcfc 13%, #c0c0c0 62% ); -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6); }

Примерчик.

DVD-анимация

CSS3 имеет анимационный модуль, при помощи которого можно делать достаточно интересные эффекты:

a:hover img[alt*="Disc"] { -moz-transform: translate(50px,0) rotate(330deg); -webkit-transform: translate(50px,0) rotate(330deg); transform: translate(50px,0) rotate(330deg); }

В данном случае, при наведении указателя мыши на коробку, из нее вываливается диск, и заваливается обратно, когда указатель мыши убирают.

img[alt*="Disc"] { -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

Пример.