В предыдущем уроке по CSS мы создали размытие текста, используя свойство тени текста и прозрачный цвет текста. В этом уроке мы воспользуемся подобным способом, чтобы создать анимированные светящиеся ссылки. Тень текста — это многогранное свойство CSS3, которое поддерживается в браузерах без приставок производителей. Но оно не работает в браузере Internet Explorer версий 9 и ниже. Однако, это свойство можно использовать не только для создания теней. На темном фоне белая тень создает эффект свечения.
Этот эффект можно применить для моментов, когда пользователь наводит указателя мыши или выделяет ссылку. С помощью переходов CSS3 можно создать анимированный эффект свечения.
Давайте запишем код. Начнем с кода HTML, применив класс “glow” к ссылке:
Сначала зададим свойства для начального состояние и свойства перехода с приставками производителей. Переход начнется сразу и продолжится полсекунды. Нам больше всего понравилось использовать значение временной характеристики перехода “linear”, оно создает наиболее естественный эффект, но попробуйте и другие значения, такие как “ease”, “ease-in”, “ease-out”, “ease-in-out”, “cubic-bezier”, Вы можете узнать о них больше в уроке о переходах CSS3:
Теперь можно задавать свойства свечения текста. Нам показалось, что одна тень текста со значениями 0 0 8px #fff выглядит слишком тонкой. Две тени дают более интересный эффект, если одна тень белая, а другая — ярко-желтая, и у них немного разные смещения:
Посмотрите демонстрацию работы светящихся ссылок.
Поэкспериментируйте с разными анимациями и значениями свойства тени текста.
Этот анимированный эффект работает в браузерах Firefox, Chrome и Safari всех версий.
Браузер Internet Explorer поддерживает свойство тени текста, только начиная с версии 10. При этом и у поддерживающих версий бывают проблемы с отображением.
Браузер Opera старых версий поддерживает переходы CSS3, но только у некоторых свойств. Цвета поддерживаются, но тени текста не поддерживаются, так что анимация получается скачкообразной. Но в современных версиях этой проблемы нет.
Второй набор ссылок в нашем примере показывает эффект подсветки сзади, создаваемый с помощью изменения цвета текста на цвет фона. Но это делает текст невидимым в браузере Internet Explorer версии 9 и ниже. Чтобы решить эту проблему, можно или воспользоваться библиотекой JavaScript Modernizr, или написать свой код для определения поддержки браузером свойства тени текста, например:
Надеемся, Вам понравился этот способ.
Автор урока Craig Buckler
Перевод — Дежурка
Смотрите также:
www.dejurka.ru
Основы использования теней
Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.
Синтаксис
Для создания тени текста используется синтаксис свойства text-shadow, который приводится ниже. Нужно определить четыре параметра: первые два задают положение тени, третий устанавливает уровень размытия, а четвертый определяет цвет тени.
Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.
Результат использования данного свойства будет выглядеть следующим образом:
Почему используется rgba?
Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.
Данный метод существенно проще, чем другие способы определения цвета. Вам не надо акцентировать внимание на определении оттенка цвета тени, который может быть лишь немного темнее или светлее цвета фона. С rgba вы можете просто использовать белый или черный цвета и увеличить их прозрачность, чтобы добиться нужного оттенка фона при смешении красок.
Вдавленный текст
С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.
Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.
Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.
Четкая тень
Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.
Двойная тень
Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!
Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.
Смещение вниз на большое расстояние
Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.
В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.
Смещение вниз на небольшое расстояние и сильное размытие
Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.
3D текст от Mark Dotto
Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.
Вдавленный текст от Gordon Hall
Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.
Свечение
Супергерой
Множественные источники света
Мягкое тиснение
Заключение
Как и большинство эффектов CSS, тени очень легко реализовать. Но сочетание простых действий могут в результате привести к поразительным эффектам.
ruseller.com
Если вы являетесь пользователем Твиттера, возможно вы уже видели анимированный, синий эффект свечения, который имеют поля формы входа в аккаунт Твиттера.
Сейчас мы создадим такой же эффект анимации при помощи свойства transition и эффект свечения при помощи свойства box-shadow.
Результат того, что может получиться, вы можете видеть на изображении ниже или зайдя на страницу входа в Твиттер.
Для начала зададим полям формы анимацию:
С помощью свойства transition мы создадим анимацию, чтобы свечение возникало плавно, в то время когда поле формы становится активным. Кроме этого здесь мы используем свойство outline чтобы убрать свечение для браузеров Safari и Chrome, в которых данный функционал предусмотрен по умолчанию.
Теперь, кода мы все подготовили, можно приступать к созданию эффекта свечения, при помощи свойства box-shadow, которым задается тень различным объектам. Но у нас свечение не будет выглядеть как тень, потому что мы будем использовать ярко-синий цвет. Кроме этого, мы используем RGB коды цветов, так мы сможем регулировать уровень прозрачности. Значения HTML и RGB кодов цветов, вы сможете найти в таблице HTML кодов цветов.
Код будет выглядеть так:
Кроме свечения можно скруглить углы поля формы, при помоши свойства border-radius.
Примечание переводчика:
В данном случае автор не приводит код стилей, при помощи которых можно создать скругленные углы. Если вы хотите это сделать, то добавьте к коду, приведенному выше следующие свойства и значения:
— где вместо 5px можете установить любое значение, на которое вы хотите скруглить углы.
В результате у вас должно получиться, что-то вроде этого:
Весь код будет выглядеть так:
Материал подготовлен сайтом: WebMasterMix.ru
Источник
- Горизонтальное выпадающее меню на CSS 3
- CSS прозрачность — кросс-браузерное решение
- Создаем глянцевое CSS меню
- Графическое CSS меню
- Селекторы CSS
webmastermix.ru
Эффекты текста HTML и CSS | Свет и Тень
- Подробности
- Категория: вебдизайнер
- Автор: SEO & WEB — KELL4
Текст (text) с тенью (shadow) ранее можно было встретить практически на всех сайтах, такое свойство было очень модным в свое время.
зьмем например графический редактор, в каждом редакторе используется данный эффект и выглядит он просто и стильно. Поэтому свойство text-shadow добавляли на сайты, вне зависимости от того было ли это проявлением необходимости и подходило ли к стилю самого сайта. Некоторое время спустя большинство браузеров начали поддерживать свойство текста и тени (text-shadow), но интерес к данному эффекту угас. И в наши дни встречается крайне редко. При том, что текст с тенью имеет много других способов применения и интересных свойств: свечение текста, контурные рамки, размытие текста, тиснение текста, трехмерный текст и др.
Нижеприведенные эффекты текста настраиваются в файлах .CSS или под тегами «style» в HTML страницах.
Использование text-shadow
Свойство используется в любом формате CSS и имеет 4 параметра: смещение по горизонтали и смещение по вертикали, радиус размытия и цвет тени. Полупрозрачную тень можно сделать применив формат rgba. Радиус размытия определяет резкость тени, т.е. чем больше радиус, тем мягче выглядит тень. Смещение тени вправо и вниз имеет положительное значение, обратно влево и вверх имеет отрицательное значение, при этом при необходимости добавить тень вокруг всего текста значение смещения должно равняться 0.
Главным достоинством свойства текста с тенью (text-shadow) является возможность применения нескольких теней, просто добавив дополнительные параметры через запятую. Такая особенность позволит разнообразить эффекты тени.
Как упоминалось выше эффект текста с тенью используется большинством браузеров, исключение составляют IE (internet explorer) до 10 версии.
Контурный текст
Особенность контурного текста заключается в линии обводящей каждую букву. Цвет линии выбирается отдельно и предназначен для выделения текста эффектным контуром. Применяется в основном только для больших размеров шрифта в заголовках, т.к. основному тексту контур будет только мешать при чтении.
- Контурный текст создается 2 способами:
- Смещение тени равно 0, а радиус размытия 1-2 px (px — pix element — пиксель или пиксел);
- Если увеличить уровень размытия текста контур превратиться в эффект свечения.
Рассмотрим пример контурного текста
HTML5 CSS3 IE9 IE10
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroka { font: 2em Arial, sans-serif; text-shadow: red 0 0 2px; } </style> </head> <body> <p class="stroka">Создание и продвижение сайтов в ИНТЕРНЕТЕ</p> </body> </html>
ОБРАТИТЕ ВНИМАНИЕ! В ПОСЛЕДУЮЩИХ ПРИМЕРАХ СТРУКТУРА HTML СТРАНИЦЫ НЕ БУДЕТ ПОКАЗАНА, ТОЛЬКО НЕОБХОДИМЫЕ КОМАНДЫ.
Контур вокруг текста будет несколько размытым, если необходима четкая линия можно воспользоваться другим способом. Используя 4 резких тени одинакового цвета и смещение разных углов. Тем самым получая выразительный и четкий контур.
<style> .stroka { font: 2em Arial, sans-serif; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style>
Трехмерный текст
Эффект 3D текста. В трехмерности текста используется смещение нескольких теней по горизонтали и вертикали. Что также в основном применимо в заголовках веб-страниц.
Эффект трехмерности зависит от количества теней, чем их больше тем сильнее трехмерность. Установив размытие на 0 и используя тени одного цвета, настраиваем смещение до необходимого вида.
<style> .stroka { font: bold 3em Arial, sans-serif; color: #0d3967; text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, #cad5e2 5px 5px 0; } </style>
Рельеф текста
Эффект рельефа текста или тиснения создается при совпадении цвета фона и текста. Оставляя одну часть текста с одним цветом тени выбираем другой цвет для второй части, тем самым регулируем освещенность букв. Этот эффект использует две тени и выглядит лучше на сером фоне.
<style> body { background: #f0f0f0; /* Цвет фона веб-страницы */ } .stroka { font: bold 3em Arial, sans-serif; color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */ text-shadow: #fff -1px -1px 0, #333 1px 1px 0; } </style>
Свечение текста
Для эффекта свечения тоже используется тень, единственное отличие заключается в ярких и контрастных тонах. Изменив цвет тени и устанавливая радиус размытия получаем эффект свечения, но при этом необходимо учитывать, параметр смещения необходимо приравнять к 0 для равномерного распределения вокруг текста.
<style> .light { text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */ color: #0083bd; } .dark { text-shadow: red 0 0 10px; /* Свечение красного цвета */ } </style> </head> <body> <h2 class="light">Светлая сторона</h2> <h2 class="dark">Тёмная сторона</h2> </body>
Размытие текста
Эффект размытия текста очень прост, ведь тень имеет данное свойство, поэтому необходимо скрыть сам текст. Используя команду для цвета transparent делаем текст прозрачным и на месте букв остается только тень, а регулируя радиус размытия выбираем степень резкости текста.
<style> .stroka { text-shadow: #000 0 0 5px; color: transparent; /* Прозрачный цвет текста */ } </style>
Тень и псевдоклассы
Используя псевдоклассы :hover и :first-letter можно получить великолепные эффекты: свечение при наведении курсора или контурная первая буква абзаца. А свойство текста с тенью (text-shadow) отлично с ними работает.
<style> a:hover { /* Вид ссылки при наведении на неё курсора */ text-shadow: #5dc8e5 0 0 5px; color: #000; } p:first-letter { /* Первая буква абзаца */ font-size: 2em; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style>
- < Назад
kell4.ru
Предпосылки
Изучение данного материала предполагает, что:
— Вы знаете HTML;
— Вы знакомы с селекторами CSS и CSS2;
— Если хотите в точности воспроизвести образец, то должны знать, как работает тень блока box-shadow. Она в этом учебнике не является ключевой, так что вам придется постигать ее самим. Если понадобится объяснение, предлагаю вам взглянуть на статью CSS3 vs. Photoshop : закругленные углы и тени блока.
Box-reflect vs. «Свой метод»
Box-reflect — свойство CSS, как раз предназначенное для этой цели: создания отражений. Мы не станем применять box-reflect и mask-image, потому что:
— На момент написания этой статьи оба свойства поддерживаются только webkit (Chrome и Safari).
— Реализация кишит ошибками, если не сказать более.
Когда Microsoft представил свои эффекты фильтра (вспомните эпоху IE 4, вложенные таблицы для разметки и изображения для отражений), устаревшие фильтры не применялись ко всему данному элементу. Думаю, они использовали некий вид граничного блока из верхнего левого к нижнему правому углу элемента, что имело смысл, так как, насколько я знаю, не было способа выйти за пределы этого блока. Однако, так и не исправили это.
Сейчас, в век Chrome 17, webkit сделал ту же ошибку. Рисунки маски, ключ к -webkit-box-reflect, делают некий вид динамического снэпшота внутри граничного блока, вставляют его снизу и меняют непрозрачность. Я постарался восстановить демо-образец с помощью -webkit-box-reflect:
Я его не закончил, но проблема ясна. У отображаемого элемента (будем называть его ETBR — Element to be Reflected) есть border-radius и box-shadow. Тень блока видна внутри, а не снаружи граничного блока.
В моем собственном методе матрица видоизменяется, вставленная тень блока и непрозрачность заменят box-reflect и mask-image. Ограничения:
— Самое большое ограничение заключается в том, что вставленная тень блока не делает отражение полностью прозрачным. Это сочетание настоящей и фальшивой прозрачности будет работать в большинстве случаях, но не всегда.
— Встроенная тень блока не влияет на текст отображаемого элемента (ETBR). Это происходит, если цвет текста не такой же, как фоновый цвет поверхности.
Поиграть с образцом | Полноэкранное изображение
Цвет текста не становится темнее там, где это делает фон. Поэтому, кажется, нельзя получить другой цвет и тень блока одновременно.
Выбор…
Кстати говоря, о матрицах и отражениях…
«Выбираете синюю таблетку – я показываю, как воссоздать демо-образец шаг за шагом. Выбираете красную – покажу, как сделать отражения чего угодно и расскажу, где можно купить отражающие тени по очень привлекательной цене»
Проще говоря, некоторые из следующих этапов дополнительные, в зависимости от того, желаете ли вы восстановить демо-образец пиксель за пикселем.
Дополнительно: подготовка
Демо-образец начинается с шаблона HTML5…
index.html
…и этого файла CSS.
style.css
И, конечно, в таблицу стилей добавим ссылку:
2D, но 3D
Демо-образец двухмерный. Ни единого 3D-элемента. Мы об этом знаем, но наша цель – заставить их считать, что мы это создали, а затем сфотографировали фронтальный вид.
Если мы хотим заставить их поверить, что это 3D, то должны определить, как объекты располагаются и вращаются в трехмерном пространстве. У демо-образца есть горизонт. Верхние 10% — это черное «небо», прочие 90% — фальшивая трехмерная плоскость. Отображаемый элемент и плоскость перпендикулярны друг другу (под углом 90°), отражение должно быть параллельно отображаемому элементу.
Шаг 1: дополнительный Плоскость и отображаемый элемент
HTML:
Отражаемый элемент (ETBR) – потомок плоскости. Таким образом, он остается в одном и том же положении видимым с плоскости, а свечение остается на плоскости.
Примечание:
— У плоскости есть минимальная ширина min-width и минимальная высота min-height, поэтому отражаемый элемент всегда виден.
— Переполнение overflow-y установлено на hidden, поэтому свечение отражаемого элемента остается на плоскости. (Небо должно быть непроглядно черным.)
— У плоскости нет фонового цвета, она получает свою окраску от свечения, что совершенно бессмысленно, но смотрится лучше всего.
Шаг 2: разметка отражения
Определите место отражаемого объекта (ETBR), скопируйте его, вставьте внутрь самого себя и переименуйте в refl:
Теперь внутри css создайте селектор объекта. Добавьте к селектору #refl, чтобы наши стили применялись к обоим элементам:
По существу, CSS и HTML отражения должны быть такими же, как CSS и HTML отражаемого элемента ETBR. Мы разместим, зеркалируем и приукрасим отражение, начиная с шага 5. А сейчас мы скроем отражение.
Internet Explorer – это всегда Internet Explorer, так что нам придется добавить немного условного HTML:
Вы можете спросить «почему?», просто немного потерпите. Так как вы нетерпеливы, первый раздел Поиграть с образцом будет совершенно черным. Хотите увидеть влияние плоскости? Измените размер.
Поиграть с образцом | Полноэкранное изображение
Шаг 3: дополнительный Основные стили
Здесь объяснения не нужны:
Ну хорошо, немного объясню. Сочетание text-align: center; и display: inline-block; располагает элемент по центру, но это – не поиски Святого Грааля; встраиваемые элементы не могут содержать элементы блоков. Я применил это, потому что не хотел добавлять к образцу тысячи «плавающих» контейнеров. Хотя в общем, это – то, что нужно.
Поиграть с образцом | Полноэкранное изображение
Шаг 4: дополнительный Закругленные углы и свечение
Свечение состоит из трех теней: большой растянутой тени (которая выглядит больше похожей на отражение света на поверхности), настоящего свечения (белой тени с более коротким диапазоном размытия) и черной вставленной тени (которая дает возможность отражаемому элементу ETBR выглядеть, как будто он светится). Как я уже говорил, я не собираюсь объяснять, как работает тень блока box-shadow, а уж радиус угла border-radius сейчас уже говорит сам за себя.
Поиграть с образцом | Полноэкранное изображение
Шаг 5: размещаем отражение
Отобразите селектор #refl, чтобы отражение стало видимым. Так как отражения «ненастоящие», наше отражение не станет частью тракта обработки документов; оно должно «плавать». Очевидный выбор – установить абсолютное позиционирование, это значит, элемент размещается относительно своего родительского элемента. Так как у родительского элемента отражения не существует, он будет расположен относительно тэга body.
Гораздо легче установить отражение относительно реального текста, который тоже является родителем отражения (совпадение?). Чтобы сделать это, сначала нужно «установить» ETBR:
Таким образом местоположение в действительности не меняется, но он теперь расположен. Теперь:
Верх отражения относителен высоты и расположения отражаемого элемента (ETBR). 0% дает нам тот же верх, 200% дает зазор, равный высоте ETBR, а 100% ставит верх отражения в низ отражаемого элемента ETBR. Левое значение то же самое, но принимает процентное отношение ширины.
Поиграть с образцом | Полноэкранное изображение
Шаг 6: современное зеркалирование, размытие и прозрачность
Эти свойства есть почти у каждого часто используемого браузера, от IE6 до Google Chrome. Однако их реализация отличается. Современные браузеры очень прямолинейны, для каждой характеристики свойств: transform, blur и opacity. Еще мы применим box-shadow, но сначала зеркалирование.
Зеркалирование
С помощью transform можно модифицировать элемент до любого параллелограмма, который только можно представить. Я знаю, есть много параллелограммов. Но нам нужно всего лишь зеркалировать отражение, так что большинство функций трансформирования у нас останутся неиспользованными.
Каждый дизайнер должен знать, что масштабирование на -1 по оси Y – то же самое, что зеркалирование. Масштабирование по оси Y – это умножение расстояния между верхом (и низом) и центром. Если по оси Y масштабировать в 2, расстояние между верхом и центром дважды увеличится. Если масштабировать на -1, расстояние останется прежним, но верх будет там, где был низ, а низ – где был верх. Поздравляю, вы теперь знаете, как зеркалировать!
Размытие
Очень скоро все современные браузеры будут поддерживать фильтры -webkit-filter или фильтры SVG. FF, Opera и IE10 уже поддерживают последнее, Safari и Chrome пока только создают напряжение перед их выпуском. Одним из фильтров SVG является старое доброе Гауссово размытие (Gaussian Blur). Он развивается неторопливо, но это что-то…
Создайте файл «filter.svg» в той же папке, где style.css. Его содержимое:
Все как обычно, кроме правил с 6 по 8. Фильтр с названием «blur» (можете назвать его как хотите) размывает 2 px по горизонтали и 3 px по вертикали. А теперь обратно к таблице стилей!
filter.svg#blur означает элемент ‘blur’ in filter.svg. Если бы ID фильтра было ‘anything’, url был бы filter.svg#anything. Радиус размытия определяется в файле SVG. Браузеры Webkit определяют это все в одном правиле.
Прозрачность
Прозрачность гораздо дольше находится в употреблении, так что нам нужно определить всего одно свойство:
Я не могу вложить файл SVG в ссылку «Поиграть с образцом». (Должен держать образец в подчинении, поэтому не могу смешивать семантику и презентацию. Это сильно осложнило бы все…) Но сейчас я не возмещаю размытие SVG…
Поиграть с образцом | Полноэкранное изображение
Оно неполное. Когда на третий день Apple создал отражение, оно должно было стать менее отражательным. Оно должно быть менее четким, чем дальше оно от поверхности. Пусть там будет тьма!
Это работает, только если у поверхности есть плотный цвет, а цвет шрифта похож на него: мы затемним его, добавив другую тень блока. Эта тень блока переписывает старую в селекторе #ETBR, #refl. Мы противодействуем этому, повторно заявляя встроенную тень старого селектора. Вторая тень – это новая тень. Помните, что каждая добавленная к отражению тень зеркалируется.
Офсет Y второй тени равен 50 px, но элемент всегда зеркалируется после применения тени. Тень не движется вниз, она движется вверх.
Смотрите здесь:
Поиграть с образцом | Полноэкранное изображение
Отлично! Теперь рассмотрите это с помощью IE8 (или поверьте мне на слово): это в основном две копии отражаемого элемента ETBR одна над другой, незеркалированные, непрозрачные и не размытые.
Шаг 7: устаревшие фильтры
В начале работы мы добавили несколько условных комментариев; три группы.
— Современные браузеры и IE10, которые не поддерживают старые фильтры IE (IE10 прекратил сопровождение), но поддерживают новые.
— IE8 и ниже, старые IE, поддерживают устаревшие фильтры и не поддерживают новые.
— IE9, понемногу поддерживающий оба вида.
Если бы IE9 не поддерживал новых фильтров, было бы гораздо проще. (Не поймите меня неверно, я счастлив, что Internet Explorer старается измениться. Но было бы легче…) А чтобы еще все усложнить, существуют различия между устаревшими фильтрами в IE9 и IE8. Хватит жаловаться, давайте что-нибудь с этим сделаем. Добавьте для каждой группы по селектору #refl и сдвиньте свойство непрозрачности на modern.
Устаревшим фильтрам не нравится непрозрачность CSS2. И, если говорить о них, то мы собирается употребить следующие:
— DXImageTransform.Microsoft.BasicImage дает нам возможность зеркалировать изображение и меняет его непрозрачность
— DXImageTransform.Microsoft.MotionBlur и DXImageTransform.Microsoft.MotionBlur просто замечательные.
— DXImageTransform.Microsoft.Gradient в качестве заменителя второй тени блока.
Зеркалирование
У первого фильтра, BasicImage, на самом деле имеется свойство «mirror»! ДА-ДА! К сожалению, при установке этого свойства на 1 контент зеркалируется по горизонтали, а не вертикали. Но это не означает его бесполезность для нас. Разворот элемента на 180° и зеркалирование его по горизонтали – то же самое, что зеркалирование его по вертикали. И оно возможно:
Этот разворот не измеряется в градусах: 0 – это 0°, 1 – это 90°, 2 – 180°, а 3 – это 270°. Этого требуют только браузеры-»старички». IE9 поддерживает -ms-transform.
Непрозрачность
Непрозрачность можно определять в том же фильтре…
IE9 (и IE8, но я считаю, что Internet Explorer уже получил достаточно внимания) поддерживает -ms-filter. Значение его – одна большая строка. Она создает понимание со стороны других браузеров (Firefox из-за Internet Explorer’а ходит по пятницам к психиатру).
Размытие
…но нам нужен новый фильтр для размытия. Множественные фильтры, если хотите, чтобы оно хорошо смотрелось. Никаких запятых, никаких filter:s между фильтрами, только промежуток или новая строка. -ms-filter больше не понимает новых строк…
Если один раз сделать размытие с радиусом в 6 px, выглядит это так, будто кто-то сделал 4 копии отражения и сдвинул одну на 6 px вверх, одну на 6 px вниз, одну на 6 px влево и одну на 6 px вправо. Если хотите похвастать перед кем-нибудь в пабе, то должны знать название: размытие блока (Box Blur). При добавлении повторов (делая размытие размытого) Box Blur выглядит, как обычное размытие. Второй повтор – это размытие движения motion blur, потому что оно хорошо смотрится.
Поиграть с образцом | Полноэкранное изображение
На этот раз неверно получились не одна, а две вещи:
1. Размытие сдвинуло отражение на несколько пикселей вверх и вправо в IE9, но в IE8 сдвинуло отражение вниз. Почему? Остается тайной.
2. В IE7 и IE8 отражение везде одинаково прозрачное.
Сначала вторая проблема: так как браузеры-»старички» не поддерживают тень блока box-shadow, мы применим в качестве замены устаревшему альфа-градиенту. Это, насколько я знаю, первые значения типа RGBA в CSS, но если в спецификациях w3c что-либо вообще тогда было сказано о значениях rgba, Internet Explorer все прослушал. Вместо 6 шестнадцатеричных разрядов они использовали 8. Два первых представляют alpha; устаревшие градиенты принимают ARGB вместо RGBA, что, должен заметить, звучит гораздо лучше:
Градиент тоже нужно размыть, так что этим займемся в первую очередь. Градиенты устаревших фильтров по умолчанию вертикальные. startColorstr — цвет градиента вверху, а startColorstr — цвет внизу, но он зеркалирован! #99000000 – то же, что rgba(0, 0, 0, 153). Помните: чем выше мы устанавливаем непрозрачность градиента, тем ниже становится непрозрачность отражения.
Расположение – всего лишь дело метода проб и ошибок. Так как у отражения уже имеется местоположение, установленное в процентном отношении, мы не можем настроить в пикселях с помощью свойств left и top. Вместо того мы применим поле:
Поиграть с образцом | Полноэкранное изображение
Шаг 8: финальные штрихи
Мы изменим две вещи до того, как начнем тратить время на что-нибудь получше, типа просмотра чихающих панд на youtube.
— Расположим отражение по ту сторону отражаемого элемента (ETBR) (в z-пространстве), так как размытое отражение лежит над ETBR и над свечением.
— Сдвинем ETBR вниз. Верх ETBR идеально выравнивается по горизонту, что смотрится очень странно.
Решения проблемы:
— Обычно мы бы установили z-index отражаемого элемента (ETBR) и отражение соответственно на 2 и 1. Но так как за отражением в образце нет других элементов (в z-пространстве), мы можем просто установить z-index отражения на -1.
— Вверху поверхности добавьте отступ. Так как ETBR является потомком поверхности, он сдвинется вниз.
Вот файл CSS.
index.html
filter.svg
webformyself.com
Всем привет. О CSS3 можно говорить много и предела возможностей пока не видно (конечно же они есть, но мы пока еще не все освоили и не все придумали). Тени, уголки, градиенты, изменение цвета изображений — и это только поверхностный уровень возможностей CSS3. Его нужно изучать. Ну а пока я выкладываю очередную сборку CSS3 эффектов с текстом при наведении (конечно можно сделать и не при наведении).
6 CSS3 эффекта неонового свечения: красный, голубой, желтый, зеленый, оранжевый и фиолетовый. Эффект применяется к тексту и свечение происходит при наведении. Свечение анимированное, создает эффект затухания и вспыхивания.
Долой слова, вот скрин того, что вы можете увидеть в демо и скачать себе на компьютер, поставив затем один из эффектов себе на сайт
В основе эффекта лежат атрибуты:
-webkit-animation: -moz-animation: animation:
К каждому примеры применен определенный шрифт (Monoton, Iceland, Pacifico, PressStart, Audiowide и Vampiro One в той последовательности как они показаны на скрине). Скорее всего эти шрифты не поддерживают кириллицу, поэтому советую сразу подумать о своем шрифте.
Чтобы подключить эффекты, нужно
1. Скачать архив
2. Разархивировать его
3. Закачать на сервер файл neon.css
4. Придумать свои стили
И вместо нумерации псевдоклассом nth-child (nth-child1, nth-child2 и т.д.) можно поставить class red, blue и так далее
5. Присвоить class стилизуемому элементу
например:
<h1 class="text-effect">Добро пожаловать</h1>
где атрибут text-effect имеет css:
.text-effect { color: #fff; font-family: Monoton; -webkit-animation: neon1 1.5s ease-in-out infinite alternate; -moz-animation: neon1 1.5s ease-in-out infinite alternate; animation: neon1 1.5s ease-in-out infinite alternate; } .text-effect:hover { color: #FF1177; -webkit-animation: none; -moz-animation: none; animation: none; }
Это пример самого первого эффекта (RED)
Вам нужно просто повнимательнее изучить css файл и все станет понятно. Спасибо за внимания, надеюсь помог. Пока
bayguzin.ru
p {text-shadow:2px 2px 4px rgba(0,0,0,1);