Играем с CSS3

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

Создание основы

В этом примере мы сделаем чтобы наши фотографии выглядели как фотографии-полароиды с подписями. Html-разметка:

<div class="polaroid pull-right"> <img src="seal.jpg" alt=""> <p class="caption">Нашли эту милашку на прогулке в Новой Зеландии!</p> </div>

Обратите внимание, что мы используем класс pull-right. Это сделано для того, чтобы отделить логику размещения от логики внешнего вида. Класс polaroid не содержит информации о размещении и может быть использован везде, где может понадобиться такой эффект внешнего вида. Этот класс задаёт соответствующие отступы и размеры.

.polaroid { width : 150px; padding : 10px 10px 20px 10px; border : 1px solid #BFBFBF; background-color : white; -webkit-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow : 2px 2px 3px rgba(135, 139, 144, 0.4); }

Эффект снимка-полароида достигается с помощью внутренних отступов и границы. Кроме того, мы применили эффект тени, с помощью свойства box-shadow.

Свойство box-shadow принимает 4 значения: 3 значния - это длина, а четвёртое - цвет. Первое значение - горизонтальное смещение тени. Положительное значение располагает тень справа, отрицательное - слева. Второе значение - вертикальное смещение тени. Положительное значение - тень снизу. Если оба эти значения равны нулю, то тень разбрасывается на все стороны. Последнее значение длины - это размытость тени.

Поворот

Для браузеров, которые поддерживают свойство поворота (сейчас это WebKit и FF3.5+), мы можем добавить некоторых визуальных примочек, например поворот изображения, используя свойство transform из стандарта CSS3.

-webkit-transform : rotate(9deg); -moz-transform : rotate(9deg); transform : rotate(9deg);

Угол поворота может быть задан в градусах и в радианах (rads и grads). Webkit также поддерживает плавный поворот, FireFox, к сожалению, пока нет.

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

.pull-left.polaroid { -webkit-transform : rotate(-9deg); -moz-transform : rotate(-9deg); transform : rotate(-9deg); }

Множественные классы не работают в IE6, как и свойство transform, пока не работает ни в одной версии этого браузера. Приведённый код - хороший пример: браузеры, которые не поддерживают свойство box-shadow или свойство transform, будут по-прежнему показывать картинку с эффектом полароида.

Результат.

Анимация

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

Продолжаем!

В следующем примере, Изображение находится в гипер-ссылке и, когда курсор мышки находится над изображением, оно из повёрнутого становится вновь прямым.

Html-разметка

<a href="#" class="polaroid"> <img src="raft.jpg" alt=""> White water rafting in Queenstown </a>

И соответствующий CSS

a.polaroid { /* ... */ -webkit-transform : rotate(10deg); -webkit-transition : -webkit-transform 0.5s ease-in; } a.polaroid:hover, a.polaroid:focus, a.polaroid:active { /* ... */ -webkit-transform : rotate(0deg); }

Свойство -webkit-transition - это то самое свойство, которое и даёт нам анимацию. Оно принимает 3 аргумента: имя свойства для изменения, время анимации и имя "функции изменения" (которая влияет на ускорение анимации, для плавных эффектов).

-webkit-transition влияет только на изменения указанного свойства. В "чистом" CSS, это делается с помощью динамических "псевдо-классов". Вы можете изменять свойства используя javaScript, но это выходит за рамки нашей статьи.

Результат.

Располагаем снимки по таблице

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

В этом примере используется более тёмный цвет для тени с большим коэффициентом прозрачности. В нашем случае, поскольку тень будет отбрасываться не на сплошной фон, а на перекрывающиеся изображения, это добавляет естественности.

-webkit-box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3);

При наведении курсора, изображение будет поворачиваться, как и в предыдущем примере. К тому же необходимо добавить установку свойства Z-index, чтобы активная фотография показывалась выше остальных.

Результат.

И на последок

В этом примере, мы сэмулируем поднятие фотографии. Сделаем это следующим образом: немного увеличим фотографию, сдвинем тень и сделаем её чуть больше.

Скриншот 1 показывает дефолтное состояние, на втором - эффект из прошлых примеров, а на третьем - эффект, который мы хотим сделать в этом примере.

a.polaroid { /* ... */ z-index : 2; -webkit-box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow : 2px 2px 4px rgba(0, 0, 0, 0.3); -webkit-transform : rotate(10deg); -moz-transform : rotate(10deg); transform : rotate(10deg); -webkit-transition : all 0.5s ease-in; } a.polaroid:hover, a.polaroid:focus, a.polaroid:active { z-index : 999; border-color : #6A6A6A; -webkit-box-shadow : 15px 15px 20px rgba(0, 0, 0, 0.4); -moz-box-shadow : 15px 15px 20px rgba(0, 0, 0, 0.4); box-shadow : 15px 15px 20px rgba(0, 0, 0, 0.4); -webkit-transform : rotate(0deg) scale(1.05); -moz-transform : rotate(0deg) scale(1.05); transform : rotate(0deg) scale(1.05); }

Как вы заметили, в этом примере используется другая функция для трансформации, функция scale, которая изменяет размер заданного свойства. Другие функции трансформации - это искажение, перемещение или же вы можете задать свою трансформацию с помощью матрицы преобразования.

Смещение тени, в этом примере, как и радиус её размытости, резко возросли, кроме того она потемнела и стала более прозрачной.

И поскольку мы хотим чтобы эффекты применились с анимацией, мы передаём свойству -webkit-transition значение all, обеспечивающие что любое изменение свойства будет анимировано.

Результат.

Окончательный результат.

Disclamer: вопрос к читателям.
Переводил для хабра статью, дальше песочницы не пошла. Статья о ASP.NET MVC 2, посвящена шаблонам редактирования и отображения, немного выпадает из общей тематики сайта, а потому вопрос: будет ли кому интересно в этом блоге почитать об этом?

Опубликовано: 17.12.2009 Просмотров 31573 Ссылка на оригинал Tweet it!
9 comments  

тыдыщ

2009.12.18 20:01

 ая яй! а если признаться, что спер материал? понятно, что камент мой не опубликуешь. Ну хоть ссылочку на оригинал поставь ;)
 

basilkot

2009.12.18 20:02

  • Ссылочка чуть выше вашего комментария :)

Евгений

2009.12.21 11:33

 Добрый день! Спасибо, что делаете столь важное и нужное дело, неся css в массы =)

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

Подписался через rss, буду ждать дальнейших обновлений.

Всего доброго!
 

basilkot

2009.12.21 14:17

  • Спасибо! :)

    Без вас бы и не заметил :)
    Сейчас исправим!

Алексей

2010.01.30 17:08

 Теперь и Opera поддердивает это частично
-o-transform: rotate();
 

pinnokio

2010.02.05 20:58

 для можно использовать
filter:progid:DXImageTransform.Microsoft.Matrix(M11='x', M12='x', M21='x', M22='x', SizingMethod=«auto expand»);

где:
M11 = cos (угла в градусах)
M12 = -sin (угла в градусах)
M21 = sin (угла в градусах)
M22 = cos (угла в градусах)

и будет вам счастье :)
 

basilkot

2010.02.06 02:46

  • видимо вы хотели написать "для IE" :)

pinnokio

2010.02.06 02:54

 да, именно так. спасибо за уточнение :)
 

john

2010.07.11 18:53

 Как сделать наклонный градиент, заданный в градусах, для webkit, как здесь? http://emfire.ru/
 

basilkot

2010.07.11 19:52

  • я думаю стоит поэкспериментировать, но как вариант можно сделать так:

    -webkit-gradient(
    linear,
    left bottom,
    right top,
    color-stop(0.2, rgb(29,150,182)),
    color-stop(0.6, rgb(56,180,219)),
    color-stop(0.8, rgb(84,216,255))
    )

    конечно не угол задаётся, а направление, но если подобрать удачные соотношения сторон бокса, то можно получить требуемый угол :)

    либо сделать, как это сделано на том сайте, картинкой.

john

2010.07.11 20:38

 Да, на том сайте картинка, и только для ФФ на CSS3 выводится... Не продумали webkit`овцы такую тему... жаль... В ФФ то все просто... 50deg...
 

basilkot

2010.07.11 20:55

  • Ну почему не продумали.. в фф сделали в градусах, в вебките - пропорции. ты же можешь указывать не просто "left, top", но и проценты.

    Смотри, есть отличный сайт:

    http://www.westciv.com/tools/gradients/index.html

    ты можешь подобрать угол наклона для тех самых 59 градусов.

Не представился

2010.07.11 23:50

 О спасибо за сайтик! Его не встречал. )

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

В общем webkit не дураки, уверен их вариант тоже обоснован.
 

Мишка

2010.10.15 01:09

 basilkot, не подскажете, как сделать такой же эффект у панели шапки - http://www.urealty.ru - по средствам css?
 

basilkot

2010.10.15 05:53

  • эмм.. какой эффект?

Оставить после себя комментарий

user

2016.09.11

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!