От автора: видели когда-нибудь вебсайт, показывающий слегка повернутые изображения-пиктограммы? Это простой эффект, придающий налет зрительной индивидуальности. Притом, если вы не можете добиться этого поворота с помощью CSS, то трудитесь слишком тяжко! Узнайте, как сделать вращение в CSS3 правильно!
Введение
Галереи изображений с повернутыми пиктограммами почему-то встречаются нечасто, а ведь это простой прием создания стиля своей веб-страницы. Однако если не сделать все правильно, получение и поддержка этого эффекта может оказаться серьезной трудностью!
Для его построения вы можете обратиться к созданию повернутых пиктограмм в Photoshop’е. Однако в долгосрочной перспективе это может оказаться сложным. Недостатки создания повернутых пиктограмм таким методом включают:
Постоянство углов: Если не все изображения повернуты под одним углом, теряется визуальной постоянство страницы. Это означает поддержание PSD каждой отдельной пиктограммы, тщательно повернутой под постоянным углом. Вы можете, например, открыть PSD и осознать, что забыли угол вращения своих пиктограмм.
Генерация пиктограмм в CMS: Если вы пользуетесь CMS (такой, как WordPress), ваши пиктограммы, скорее всего, создаются автоматически. Применив вышеописанный метод PSD, вам придется создавать вручную и выгружать в свою CMS каждую пиктограмму в отдельности. Кроме того, если у вас уже есть существующий сайт, но вы хотите применить к пиктограммам эффект поворота, то придется создать их все заново в Photoshop’е, а затем опять выгрузить!
Долгосрочная управляемость: Скажем, вы сделали все свои пиктограммы слегка повернутыми, а теперь хотите их перестроить и перепланировать свою галерею. Это означает, что придется заново их все сгенерировать. Если вы управляли пиктограммами в Photoshop’е, то значит, придется подогнать и заново сохранить каждую отдельную пиктограмму.
Разве не здорово, если можно было бы представить это небольшое вращение одной строкой кода? Так можно сделать поворот в CSS! Давайте узнаем, как.
Шаг 1: Понимание своей цели
Краткий обзор того, что мы пытаемся выполнить, раскрывает следующие шаги:
Создайте изображение-пиктограмму в Photoshop’е (не повернутую)
Вставьте пиктограмму с помощью тэга img
Замаскируйте ее соответственно с помощью CSS (обдумайте применение масок Photoshop’а)
Поверните пиктограмму внутри маски с помощью CSS3
Чтобы убедиться, что наша галерея нормально деградирует, шаги 1-3 будут выполнены с помощью CSS. Шаг 4 (эффект поворота) – с помощью CSS3.
Шаг 2: Признание размера пиктограммы и увеличения угла поворота
Перед созданием пиктограмм нужно определить, насколько большой каждая из них будет на экране.
Если наши пиктограммы слишком маленькие, а поворачиваем мы их под слишком большим углом, то в некоторых углах окажется пустое пространство. Как здесь:
Так, для тщательного заполнения области маски можно заключить, что чем больше повернута пиктограмма, тем большей она должна быть. В математических терминах, чем больше угол поворота пиктограммы, тем больше должен быть ее размер (и наоборот).
Помните о важном: изображение-пиктограмма всегда будет больше, чем маска изображения (размер пиктограммы > размер маски)
Предупреждение тем, кого отпугивает математика
В шагах 3-6 описывается, как математически высчитать пропорциональные размеры маски изображения и пиктограммы. Полагаю, совсем нет необходимости во вращении изображений с помощью свойства CSS transform. Наоборот, целью является помочь вам понять, как правильно определить размер элементов, чтобы можно было вращать их на все 360°. Так гарантируется, что у вас не окажется уродливых пустых углов.
Шаг 3: Пропорциональное соответствие
Чтобы избежать показа в маске пустого пространства, нужно определить ОДНО из следующего:
Размер действительной пиктограммы
Размер маски изображения (видимой части пиктограммы)
Так как пиктограмма и маска изображения пропорционально соответствуют по размеру, если вы устанавливаете размер одного, то можете высчитать размер другого.
Шаг 4: Определение размеров
В этом примере мы собираемся сначала определить маску своего изображения. Установив размер маски изображения, можно применить к расчету размера пиктограммы немного математики:
Определите размер маски изображения: 180×240 px
Найдите длину стороны по диагонали
— Примените теорему Пифагора ( a2 + b2 = c2 )
—- Первая сторона (a) равна 180px
—- Вторая сторона (b) равна 240px
—- Итак, 1802 + 2402 = c2 (длина по диагонали)
—- 90,000 = c2
—- 300 = c (возьмите квадратный корень каждой из сторон)
— Длина по диагонали (c) равна 300
Длина по диагонали – важное число. Чтобы нашу пиктограмму можно было вращать на все 360°, ее самая короткая сторона должна равняться самой длинной стороне маски изображения. (Даже если вам это не нужно, обеспечение поворота на 360° даст возможность в будущем менять его угол без необходимости изменения размеров пиктограмм).
Шаг 5: Расчет размера пиктограммы
Как видите, самая короткая сторона пиктограммы должна равняться самой длинной стороне маски. Если это будет не так, у нас останутся пустые пространства. Помните: размер пиктограммы пропорционально больше размера маски изображения.
Рассчитать размер пиктограммы, чтобы она идеально подошла, легко, когда мы знаем измерения маски изображения. Просто берем самую большую сторону маски (диагональ) и равняем по ней самую короткую сторону пиктограммы.
Самая большая сторона маски (300) равна самой короткой стороне пиктограммы (x)
Чтобы найти длину пиктограммы, воспользуйтесь пропорциональным соотношением
— 180 : 300 (высота маски : высота пиктограммы)
— 240 : y (длина маски : длина пиктограммы)
Чтобы решить пропорцию, перемножьте крест-накрест
— 180y = 72,000
y = 400 (длина пиктограммы)
Теперь размеры маски и пиктограммы определены. Мы знаем, что если маска изображения у нас 180x240px, то изображение-пиктограмма внутри нее должно быть 300x400px, давая возможность вращения на 360°.
Подходящее примечание: Так как размеры маски изображения и пиктограммы пропорционально равны, эта математика также будет работать, если установить сначала размер пиктограммы! Для определения нужных размеров мы применим ту же теорему Пифагора и пропорции.
Шаг 6: Наконец немного HTML
Теперь, когда известны все размеры, давайте создадим повернутые пиктограммы, начав с базового HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>Rotated Thumbnails with CSS3</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="wrapper"> <h1>Rotated Thumbnails with CSS3</h1> <label>Transform Angle: </label> <input id="rotation_amount" value="15" /> <button>Update</button> <span id="error_message"> Number values only</span> <br /> <a href="1.jpg" class="mask"><img src="1.jpg" /></a> <a href="2.jpg" class="mask"><img src="2.jpg" /></a> <a href="3.jpg" class="mask"><img src="3.jpg" /></a> <a href="4.jpg" class="mask"><img src="4.jpg" /></a> <a href="5.jpg" class="mask"><img src="5.jpg" /></a> <a href="6.jpg" class="mask"><img src="6.jpg" /></a> <a href="7.jpg" class="mask"><img src="7.jpg" /></a> <a href="8.jpg" class="mask"><img src="8.jpg" /></a> <a href="9.jpg" class="mask"><img src="9.jpg" /></a> <div style="clear:both;"></div> </div> <!-- #/wrapper --> </body> </html> |
Эта основная разметка HTML включает следующее:
input – Даст пользователю возможность менять угол вращения. Кроме того, мы установим атрибут value так, чтобы он равнялся тому же количеству, которое мы изначально установим в своем CSS (в данном случае 15).
span – Это сообщение об ошибке будет скрыто из виду. С помощью jQuery мы покажем его, если пользователь напишет в поле ввода что-нибудь, кроме числа.
img – Это наши пиктограммы, которые можно привязать к чему вам угодно.
clear:both – Очищает наши плавающие пиктограммы
class=mask – Класс маски изображения
Шаг 7: CSS Основные стили страницы
Давайте применим к своей странице немного основных стилей, чтобы структурировать и упростить ее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { margin:0; padding:0; background:#eee; font-family:Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; } #wrapper { width:840px; margin:0 auto; background:#fff; border:1px solid #ccc; padding:25px; border-top:none; } #error_message { color:red; display:none; font-size:.8em; } |
Обратите внимание, что здесь мы скрыли свое error_message по умолчанию, так как позднее мы переключим ее видимость в jQuery.
Добавьте немного эффектов CSS3
Давайте добавим еще несколько деталей, чтобы подчеркнуть свои основные стили
|
1 2 3 4 5 6 7 8 |
#wrapper { border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow:0 0 5px #ccc; -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; } |
Теперь наш контент отцентрирован при наличии хорошей разбивки и нескольких эффектов CSS3, усиливающих стили страницы.
Шаг 8: CSS Стили маски изображения
Давайте применим к своим пиктограммам маску изображения. В HTML мы обернули каждую пиктограмму в тэг-привязку и назначили ему класс mask, который будем использовать в своем CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.mask { position:relative; height:180px; width:240px; float:left; overflow:hidden; margin:15px; border:5px solid #f6f6f6; box-shadow:0 0 1px #000; -moz-box-shadow:0 0 1px #000; -webkit-box-shadow:0 0 1px #000; } |
Вот описание примененных нами свойств CSS (и почему мы их использовали):
position:relative – Наши тэги img будут расположены абсолютно внутри маски изображения
height, width – Ранее мы определили размеры маски изображения. Именно туда помещаем эти измерения.
float:left – Дает изображениям «плавать» так, чтобы те демонстрировались в виде галереи.
overflow:hidden – Как было рассчитано ранее, наши пиктограммы будут размером 300x400px. Тем не менее, мы покажем только их часть (180x240px). Это свойство действует как маска, скрывая ту часть пиктограмм, которая простирается за размеры 180×240.
margin – Разделяет наши изображения
border, box-shadow – Создает двойную границу (в поддерживающих браузерах). Свойство border дает нам толстую грязно-белую границу вокруг изображения, тогда как box-shadow – тонкую черную границу вокруг толстой грязно-белой.
Шаг 9: CSS Размеры пиктограмм
Установите размеры пиктограмм в соответствии с теми, которые мы рассчитали в Шаге 5.
|
1 2 3 4 |
.mask img { height:300px; width:400px; } |
Шаг 10: CSS Центрирование пиктограмм
Прямо сейчас наши пиктограммы размещены относительно (верхнего левого края).
Нам нужно, чтобы пиктограмма располагалась по центру горизонтально и вертикально внутри маски.
Чтобы добиться этого, применим следующие правила CSS:
|
1 2 3 4 5 6 7 |
.mask img { position:absolute; margin-top:-150px; /* половина высоты */ margin-left:-200px; /* половина ширины */ top:50%; left:50%; } |
Вот описание сделанного нами:
position:absolute – Располагает пиктограмму абсолютно внутри маски изображения
margin – Мы устанавливаем отрицательные поля, равные точно половине высоты и ширины изображения (300×400), затем устанавливаем свойства позиционирования top и left, что перемещает элементы точно в центр.
Шаг 11: CSS Вращение пиктограмм
Для поворота элементов мы применим свойство CSS3 transform. Так, наш CSS будет включать все префиксы браузеров
|
1 2 3 4 5 6 7 |
.mask img { -webkit-transform: rotate(15deg); -moz-transform:rotate(15deg); -o-transform:rotate(15deg); -ms-transform:rotate(15deg); transform:rotate(15deg); } |
CSS здесь весьма прост. Мы просто помещаем угол поворота в скобки, за чем следует “deg”.
В этом примере мы использовали в качестве значения поворота 15, но можно вставить и другое число. Так как размеры маски и пиктограммы тщательно просчитаны, гарантировано место для вращения на все 360°! Положительное целое число поворачивает изображение вправо, отрицательное – влево.
Шаг 12: CSS Эффект проведения мышью над изображением
Дополнительно мы собираемся добавить строку простого CSS, меняющую цвет границы, когда пользователь проводит мышью над изображением.
|
1 |
.mask:hover {border-color:#ddd;} |
Шаг 13: jQuery Динамическая смена значения поворота
В качестве маленького бонуса мы дадим пользователю возможность вписать в поле ввода значение, меняющее угол поворота CSS. Так, во-первых, давайте добавим jQuery в конец страницы прямо перед закрывающим тэгом body вместе со ссылкой на свой пользовательский сценарий:
|
1 2 |
<script src="//code.jquery.com/jquery-1.6.1.min.js"></script> <script src="js.js"></script> |
Шаг 14: jQuery Document Ready
Теперь давайте установим jQuery, когда документ готов:
|
1 2 3 |
jQuery(document).ready(function($) { // здесь код }); |
Шаг 15: jQuery Исходная функция
Мы создаем функцию для каждого раза, когда по кнопке “update” (обновить) щелкают мышью.
|
1 2 3 |
$('button').click(function() { // здесь код }); |
Шаг 16: jQuery Хранение текущего значения поворота
Нам нужно сохранять числовое значение CSS текущего угла поворота в переменную.
|
1 |
var rotation_angle_value = $('#rotation_amount').val(); |
Этот код находит id rotation_amount (которое мы назначили input) и получает его текущее значение. Если помните, мы установили исходный атрибут value на равный 15 (такой же, как в коде CSS для угла поворота).
Шаг 17: jQuery Применение функции isNaN()
Нам нужно сделать введенное пользователем значение новым углом вращения. Однако следует убедиться, что пользователь случайно не ввел нечисловое значение. Вот где в дело вступает функция javascript isNaN(). isNaN() расшифровывается как “is not a number” («не число»). Эта функция делает именно то, что подразумевает ее название: проверяет, не является ли передаваемое ей значение “не числом”.
Поэтому мы применим функцию isNaN() и передадим ей значение угла вращения (введенное пользователем). Если оно не является числом, мы покажем сообщение об ошибке.
|
1 2 3 4 5 |
//проверьте, является ли введенное пользователем значение числом или нет if (isNaN(rotation_angle_value)) { //не число $('#error_message').show(); //остальной код здесь } |
Шаг 18: jQuery Обновление угла поворота
Если введенное пользователем значение оказалось не числом, то показано сообщение об ошибке. Теперь применим предложение else для тех случаев, когда они ввели числовое значение. Сначала скроем сообщение об ошибке.
|
1 2 3 |
else { $('#error_message').hide(); } |
Так как угол поворота множество раз сохранен в нашем CSS (благодаря различным префиксам браузеров), то нужно обновить ВСЕ эти значения с помощью jQuery. Поэтому сделаем следующее: сохраним синтаксис значения CSS в переменную (с новым значением угла). По сути дела, мы пишем rotate(15deg) и заменяем значение в ’15′ значением пользователя.
|
1 |
var rotation_angle = 'rotate(' + rotation_angle_value + 'deg)'; |
Затем создаем объект CSS с родственными значениями. Определяем каждое из свойств CSS (префиксы браузеров для transform), затем вставляем значение в качестве только что определенной нами переменной.
|
1 2 3 4 5 6 7 |
var updated_css = { '-webkit-transform' : rotation_angle, '-moz-transform' : rotation_angle, '-o-transform' : rotation_angle, '-ms-transform' : rotation_angle, 'transform' : rotation_angle, } |
Теперь просто передаем переменную, хранящую свойства CSS и значения в jQuery и обновляем свой CSS!
|
1 |
$('.mask img').css(updated_css); |
Шаг 19: jQuery Окончательный код jQuery
Вот как выглядит весь наш jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
jQuery(document).ready(function($) { $('button').click(function() { //получите значение угла поворота var rotation_angle_value = $('#rotation_amount').val(); if (isNaN(rotation_angle_value)) { //не число $('#error_message').show(); } else { //число $('#error_message').hide(); //сохраните синтаксис значения CSS и новое значение угла поворота var rotation_angle = 'rotate(' + rotation_angle_value + 'deg)'; //сохраните свойства CSS и значения var updated_css = { '-webkit-transform' : rotation_angle, '-moz-transform' : rotation_angle, '-o-transform' : rotation_angle, '-ms-transform' : rotation_angle, 'transform' : rotation_angle, } //обновите CSS $('.mask img').css(updated_css); } }); }); |
Заключение статьи по поворотам изображений в CSS
Надеюсь, вы узнали что-то полезное; часто можно избежать негибких дизайнов в Photoshop’е, применяя прямо в браузере техники CSS3. Спасибо за внимание, на этом рассказ о поворотах в CSS3 окончен!
Автор: Jim Nielsen
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
