—»     —»   Новое увлечение: применяем визуальные эффекты CSS3
  Раздел: Образование и Изучение, CSS/Style Sheets   Комментариев: 2  

Новое увлечение: применяем визуальные эффекты CSS3

Ранее мы уже обсуждали не только создание масштабируемых красивых кнопок, но и также говорили о различных нововведения в области CSS3, которые позволяют ускорить процесс разработки полноценных элементов для веб-страниц. Сегодня мы хотим рассказать Вам о том, как можно использовать CSS3, чтобы приукрасить внешнюю оболочку различными визуальными эффектами.

Не всё в этой статье является практичным, есть даже варианты с багами, но всё это – отличные примеры вариантов разработки веб-дизайна. Для правильной работы большей части этих примеров, Вам нужно будет использовать Safari 4 или Chrome (Firefox 3.тоже может воспроизводить их, но не все; WebKit гораздо развитее, чем Gecko с его поддержкой CSS). Мы расскажем Вам о том, как создавать впечатляющие галереи, разрабатывать анимированные аудио-плееры и делать наложение изображений. Готовы? Тогда начинаем!

Создание галереи в стиле Polaroid

Новое увлечение: применяем визуальные эффекты CSS3

Иногда на сайтах нужно предоставлять очень много фотографий и изображений. Как раз в таких случаях может быть востребована удобная и интересная галерея изображений на CSS3. Довольно часто галереи делаются в стиле фотографий Polaroid, но нам захотелось сделать не простую похожую галерею, а добавить некоторый стиль, которому всего год или два назад потребовалась бы поддержка javascript.

Верстка галереи в стиле Polaroid

Для начала, нам нужно нарисовать небольшой макет для галереи. Нечто очень простое, что могло бы пользоваться API от Flickr. Полная разметка галереи выглядит так:

<ul class="polaroids">
    <li>
       <a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
           <img src="image-01.jpg" width="250" height="200" alt="Roeland!" />
       </a>
    </li>
    <li>
       <a href="http://www.flickr.com/photos/zurbinc/3985295842/" title="Discussion">
           <img src="image-02.jpg" width="250" height="200" alt="Discussion" />
       </a>
    </li>
</ul>

Мы используем элемент заголовка

Основной стиль и ярлыки

Следующим этапом разработки будет реализация простенького вида по типу Polaroid. Поместим изображение в анкор с белым фоном, который выглядит как контейнер для изображения. Это даст нам немного места для заголовков, которые создаются посредством малоизвестных атрибутов CSS: «:after» и «content: attr».

ul.polaroids a:after {
    content: attr(title);
}

Здесь мы говорим браузеру о том, что после того, как он отобразит содержимое анкора, нужно добавить еще кое-какие данные. Далее мы генерируем содержимое с помощью элемента «content: attr(title)», который извлекает определенный атрибут из элемента (в данном случае – заголовок). Более разумно было бы использовать атрибут альтернативного текста, но ни Safari ни Firefox не поддерживают содержимое с этим атрибутом.

Стилизация элемента анкора влияет также на форматирование атрибута заголовка. И, так как мы уже разместили атрибут заголовка изображения ниже, нам не придется повторять этот код в разметке страницы.

Расфасовка изображений

Вряд ли кучка фотографий Polaroid когда-то уложены в аккуратную сетку, они обычно разбросаны по столу. Мы сошлись на том, чтобы немного сдвинуть сетку для каждого изображения: здесь немного повернем, там немного сместим и т.д. Тем не менее, мы не хотим, чтобы все это составляло основу, и воспользовались другим псевдо-классом: «nth-child».

/* By default, we tilt all images by -2 degrees */
ul.polaroids a {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
}

/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
    -webkit-transform: none;
    -moz-transform: none;
    position: relative;
    top: -5px;
}

Как видно, «nth-child» поддерживает несколько разных параметров, включая четные, нечетные и распределение по алгоритму Xn (где X может быть любой переменной). Четные и нечетные не требуют рассмотрения. Xn берет каждый элемент Xth и применяет определенный стиль; в данном примере, каждую третью. В целом, смесь четных, нечетных и такого алгоритма означает, что оформление все равно не будет достаточно разным. Оно будет казаться разным только лишь для обычных пользователей. Вы можете посмотреть пример такого стиля на этой демо-странице.

Здесь используются параметры CSS3: css трансформация (в виде webkit- и -moz-transform). Параметр трансформации может принимать несколько вариантов трансформации. В данном примере мы будем использовать поворот и масштабирование. Вы можете ознакомиться с полным списком в Путеводителе по визуальным эффектам Safari.

Немного анимации в окончании

Последим, что мы сделаем – это реализуем небольшой эффект при наведении на изображение. В данном случае изображение будет увеличиваться и выпрямляться. Мы применим -webkit-transition, которое будет активироваться посредством псевдо-класса «:hover». Посмотрите:

ul.polaroids a:hover {
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -webkit-transition: -webkit-transform .15s linear;
    position: relative;
    z-index: 5;
}

Здесь мы просто заменяем существующий «-webkit-transform» на простое масштабирование изображения (это исключает вращение). «-webkit-transition» сообщает браузерам семейства Webkit о том, что нужно анимировать трансформацию, т.е. плавно перейти с одной формы к другой. «-webkit-transition» очень разносторонняя функция, так как поддерживает параметры цвета, позиции (вверх, вправо и т.д.), и многие другие параметры.

Это был процесс создания галереи в стиле Polaroid. Как только Вы изучите все это, Вы с легкостью сможете принять это на практике, потому что все на самом деле очень просто.



Виниловые альбомы, реализованные с помощью CSS градации

Новое увлечение: применяем визуальные эффекты CSS3

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

Разметка

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

<div class="album">
    <a href=""><img src="/playground/sliding-vinyl/muse-the-resistance.jpg" width="500" height="375" alt="Muse: The Resistance" /></a>
    <span class="vinyl">
        <div></div>
    </span>
    <ul class="actions">
        <li class="play-pause"><a href=""></a></li>
        <li class="info"><a href=""></a></li>
    </ul>
    <div>
        <h5>Muse</h5>
        <small>The Resistance</small>
    </div>
    <span class="gloss"></span>
</div>

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

Создаем пластинку

Новое увлечение: применяем визуальные эффекты CSS3

В действительности здесь был альбом, но мы подумали о том, чтобы создать альбом без использования изображений вообще (мы немного приутихли с читерством, но к этому нужно будет вернуться). В момент, когда панель выезжает, альбом выглядит как фигура слева: стандартная черная пластика с бликами и несколько кнопок управления.

Вы, вероятно, уже заметили, что с внутренней стороны объект немного зазубрен, это потому что он не является изображением – он представляет собой два слоя градации, сгенерированных посредством браузера и назначенных в роли фона самого же объекта. Для реализации этого, требуются не только знания CSS3, но еще и определенный трюк – «multiple backgrounds», что в переводе означает – множественный фон. Посмотрите на CSS-код, посредством которого реализована пластинка:

ul.tunes li div.album span.vinyl div {
    display: block;
    border: solid 1px black;
    width: 112px;
    height: 112px;
    -webkit-border-radius: 59px;
    -moz-border-radius: 59px;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,.5);
    -webkit-transition: all .25s linear;
    background:
        -webkit-gradient(
            linear, left top, left bottom,
            from(transparent),
            color-stop(0.1, transparent),
            color-stop(0.5, rgba(255,255,255,0.25)),
            color-stop(0.9, transparent),
            to(transparent)),
        -webkit-gradient(
            radial, 56 56, 10, 56 56, 112,
            from(transparent),
            color-stop(0.01, transparent),
            color-stop(0.021, rgba(0,0,0,1)),
            color-stop(0.09, rgba(0,0,0,1)),
            color-stop(0.1, rgba(28,28,28,1)),
            to(rgba(28,28,28,1)));
    border-top: 1px solid rgba(255,255,255,.25);
}

В статье мы опустили некоторые аспекты позиционирования и фрагменты скучного CSS-кода (посмотрите демо-вариант с конечной разметкой). Мы хотим сфокусироваться на самых важных аспектах создания альбома: «border-radius» и «-webkit-gradient».

Самой простой задачей было создать округлый объект. Мы просто выставляем параметры «border-radius» на середину значений высоты и ширины объекта. Таким образом, браузер генерирует идеальный круг. Заметьте, что в отличие от Photoshop, если значение «border-radius» больше половины высоты или ширины объекта, то браузер, скорее всего, просто проигнорирует параметры. Это говорит о том, что создание округлого объекта – это самое легкое. Сложнее будет работать над градацией.

В объекте задействованы сразу две градации: одна реализует альбом, как таковой (с серединкой и отверстием), а другая выполняет роль отражения. Начнем как раз с отражения:

ul.tunes li div.album span.vinyl div {
    ...
    background:
        -webkit-gradient(
            linear, left top, left bottom,
            from(transparent),
            color-stop(0.1, transparent),
            color-stop(0.5, rgba(255,255,255,0.25)),
            color-stop(0.9, transparent),
            to(transparent)),
            ...
}

Градация для отражения (блика) представляет собой линейную градацию от верхнего левого угла к нижнему левому, начиная от прозрачного и заканчивая 50% белого (до середины альбома), с уровнем прозрачности в 25%. Мы используем цвета RGBa, потому, что они позволяют нам контролировать как цвет, так и уровень его прозрачности одним параметром.

Сам альбом сделать сложнее, и его внешний вид немного страдает из-за сырой работы радиальной градации.

ul.tunes li div.album span.vinyl div {
    ...
    background:
        ...,
        -webkit-gradient(
            radial, 56 56, 10, 56 56, 112,
            from(transparent),
            color-stop(0.01, transparent),
            color-stop(0.021, rgba(0,0,0,1)),
            color-stop(0.09, rgba(0,0,0,1)),
            color-stop(0.1, rgba(28,28,28,1)),
            to(rgba(28,28,28,1)));
    ...
}

Радиальные градации это как раз то, о чем Вы сразу подумали, и ничем не отличаются от того, что Вы видели в Photoshop. Они начинаются от центра объекта и простираются через всю поверхность объекта в виде окружности. В нашем случае, нам нужно начать с прозрачного значения, а затем постепенно перейти к цельному черному, а закончить очень темным серым цветом.

Расстановка размеров и позиций градаций, вероятно, является самым сложным моментом. Значения атрибута «position:» radial, 56 56, 10, 56 56, 112. Здесь у нас 5 отрезков данных: тип, точка начала, диаметр от начала, конечная точка, диаметр у конечной точки. Как это работает:

* Radial – этим мы указывает тип градации.
* Начинаем с позиции 56 56, что является как раз центром нашего объекта размером в 112 пикселей. Так как нам надо, чтобы градация заканчивалась в этой же точке, мы снова выставляем 56 56.
* Градация начинается со значения диаметра, равному в 10 единиц.
* Конечная точка (56 56) указывает на то, что это у нас концентричная градация.
* 112 – это полный диаметр, как и у объекта.

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

Новое увлечение: применяем визуальные эффекты CSS3

С этого момента, как и при линейной градации, мы сделали несколько блокаторов цвета для того, чтобы перейти от прозрачного к черному и далее к темно-серому цветам. Результатом этих двух фонов (разделенных запятыми, благодаря CSS3), как раз, и является пластинка. Опять же, Вы увидите, что в центре все немного грубо. Но мы уверены, что вскоре будет разработана более привлекательная поддержка.

Кнопки управления представляют собой простые анкоры (с использованием «border-radius») с несколькими изображениями символов (мы же говорили, что придется немного смухлевать). Последним штрихом будет добавление анимации альбома. Будет похоже, как будто он выкатывается из обложки.

Добавляем финальную анимацию

Для достижения эффекта выкатывания, мы объединили эффекты смещения и вращения. Таким образом, получается, что объект двигается вправо и вращается. Посмотрите, как это реализовано:

ul.tunes li div.album span.vinyl {
    -webkit-transition: all .25s linear;
}

ul.tunes li div.album:hover span.vinyl {
    -webkit-transform: translateX(60px);
}

ul.tunes li div.album:hover span.vinyl div {
    -webkit-transform: rotate(120deg);
}

Мы применили «translateX» и «rotate» к двум объектам. Мы применили «translate» вместо стандартного позиционирования, потому что трансформации не воздействуют на DOM, с точки зрения чего, объекты никогда не должны двигаться. Поэтому нам не придется беспокоиться о том, что плавающие элементы будут искажаться или объекты начнут смещать друг друга. Переходы также работают лучше при трансформациях «translate», нежели изменениях точным позиционированием (left: 20px и т.д.).

Есть много способов создания градаций, но также есть достаточно много готовых примеров того, как можно реализовать градации. Вы можете даже контролировать их, используя «transition» или javascript, что даст Вам гораздо больше возможностей.



Создаем наложения при помощи «border-image»

Новое увлечение: применяем визуальные эффекты CSS3

Эта последняя часть, наверное, самая практичная из всех. Параметр «border-image» был разработан совсем недавно, но с его помощью было разработано уже достаточное количество интересных приложений. Мы постараемся объяснить, как это работает и как его можно применить в собственных приложениях.

Разметка наложения

Обычно они состоят из двух частей: фрейм и стеклянное наложение. Разметка для каждой части достаточно проста, она состоит из двух одноуровневых DIV-ов:

<div class="note" id="note1">
    <div class="border"></div>
    <div class="overlay"></div>
    <span class="black circle note">1<span class="wrap"></span></span>
</div>

Когда мы сделаем это наложение, у нас будет несколько целей:

* Они не должны покрывать содержимое, которое расположено под ними.
* Они не должны оказывать влияние на цветовую схему содержимого, которое расположено под ними.
* Они должны выглядеть круто!

Исходя из этих целей, мы продумали наложение, которое будет отображаться в виде стеклянного покрытия с небольшим отливом, что выглядит достаточно привлекательно. Чтобы достичь того, о чем мы ведем речь в этой статье, нам нужно сфокусироваться на фрейме, который мы создали посредством нового параметра «border-image».

Применение «border-image»

Параметр «border-image» иногда не очень ясен: он очень многогранный, но к нему нужно привыкнуть. Вот так выглядит объявление «border-image» для нашего фрейма в виде CSS:

div.note div.border {
    border: 5px solid #feb515;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-image:
        url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
    -moz-border-image:
        url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;
}

Давайте легкие пути оставим в стороне. Элемент границы одновременно и востребован и должен оставаться как запасной вариант, потому что более старые браузеры будут генерировать полезные для наложения границы, но «border-image» требует указать конкретную ширину границы. В прежних статьях мы очень беспокоились об обратной совместимости, но в данном случае нам даже требуется это. Это один из немного примеров прогрессивного расширения – старые браузеры генерируют нечто полезное, но не совсем опрятное. Первая часть – это параметр «border-radius», который мы уже обсуждали.

Сейчас нам надо сконцентрироваться на «border-image». Посмотрите на фигуру справа; заметьте, что градация во фрейме идет сверху вниз? Это простая мелочь, но если применить ее к объекту, которому нужно будет изменяться в размерах, то она окажется очень полезной. Если понять, как правильно применять эти параметры, можно открыть для себя новые возможности в плане разработки кода. Давайте снова взглянем на код «border-image»:

url(/playground/awesome-overlays/border-image.png) 5 5 5 5 stretch;

Синтаксис идентичен как для браузеров семейства WebKit, так и для Gecko. Все очень просто. Усилия требуется лишь для того, чтобы понять, как сделать сам файл изображения.

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

Новое увлечение: применяем визуальные эффекты CSS3

Браузер берет верхний левый угол и использует его в роли верхней левой части границы, затем он растягивает верхнюю центральную часть для покрытия всей верхней части объекта, и так далее по ходу изображения.

Новое увлечение: применяем визуальные эффекты CSS3

Мы создали изображение с прозрачным центром, потому что «border-image» растянет центр изображения по всему объекту (что выглядит несколько парадоксальным для изображения границы, но это делает сам стиль немного многогранным). Вы заметите, что действующая градация есть только в 4 и 6 секторах, потому что только эти части растянуты достаточно для того, чтобы мы смогли видеть градацию. Браузер проделывает отличную работу по растяжке изображений.

Последняя часть объявления «border-image» заключается в размере и стилизации: 5 5 5 5 stretch. Повторяющаяся цифра «5» обозначает размер каждой части объекта. Нам нужна была граница толщиной в 5 пикселей, и мы создали изображение размером 15х15. Если бы мы использовали более маленькое изображение, то браузеру бы пришлось растягивать углы, и без сомнения это выглядело бы менее привлекательно. Последний параметр «stretch» указывает на то, как браузер управляет частями изображения.

Собираем все вместе

Итак, собираем фрейм и стеклянное наложение (которое является полупрозрачным PNG-файлом). Используя различные изображения для границ, мы сделали классы для применения различных цветов (красный, синий и т.д.) в то время, как старые браузеры стабильно отображают фрейм, но без всяких красивостей с градированными границами. Это еще не совсем сложный пример. Вы можете ознакомиться с тем, насколько полезным бывает параметр «border-image», особенно если использовать еще и изображения в формате PNG.



Все эти примеры Вы можете посмотреть на игровой площадке, кроме этого Вы можете более подробно рассмотреть и изучить код. Также, Вы сможете узнать, почему в этом случае наложение было разделено на две части, если пройдете в блог «Notable Behind the Scenes» - часть 1 и часть 2.

CSS3 – Это очень круто!

Правда? Надеемся, что Вам понравились эти примеры, и что Вы и дальше будете следить за обновлениями на нашем сайте, знакомясь с различными параметрами CSS3, что поможет Вам применять их в дальнейшей практике. Также не забывайте подстраиваться под те браузеры, в которых, к сожалению, никогда не будет поддержки всех этих нововведений. Также, если у Вас есть какие-либо предложения или информация по применению параметров CSS3, не забывайте делиться с нами в комментариях к этой статье! Надеемся на Вашу общительность и желание делиться опытом с коллегами!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, Firefox, Google Chrome, Safari
Опубликовал Mysterious Master   Прочитано (раз): 40249   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 марта 2010 @ 00:32
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
Хорошо сделано, особенно идея с пластинками понравилась. Стараюсь следить за развитием css3, но не мог понять зачем делать дифференциацию браузеров вроде и практично, с одной стороны, а с другое - не очень удобно)? Может кто ответит? Остается дождаться когда наконец Опера будет поддерживать все эти нововведения.
Комментарий #2: 7 марта 2010 @ 01:32
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
Цитата: krapan88
но не мог понять зачем делать дифференциацию браузеров

Как по мне, так все упирается в деньги. Это повсеместное явление практически во всём, что не возьми. Единых стандартов, имхо, не будет никогда. smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031