Css свечение


Css свечениеВ предыдущем уроке по 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 эффект для текста

 

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

3D эффект для текста

 

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.


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

Если вы являетесь пользователем Твиттера, возможно вы уже видели анимированный, синий эффект свечения, который имеют поля формы входа в аккаунт Твиттера.

Создаем эффект свечения для полей HTML форм при помощи CSS

Сейчас мы создадим такой же эффект анимации при помощи свойства transition и эффект свечения при помощи свойства box-shadow.

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

1

Для начала зададим полям формы анимацию:

С помощью свойства transition мы создадим анимацию, чтобы свечение возникало плавно, в то время когда поле формы становится активным. Кроме этого здесь мы используем свойство outline чтобы убрать свечение для браузеров Safari и Chrome, в которых данный функционал предусмотрен по умолчанию.


Теперь, кода мы все подготовили, можно приступать к созданию эффекта свечения, при помощи свойства box-shadow, которым задается тень различным объектам. Но у нас свечение не будет выглядеть как тень, потому что мы будем использовать ярко-синий цвет. Кроме этого, мы используем RGB коды цветов, так мы сможем регулировать уровень прозрачности. Значения HTML и RGB кодов цветов, вы сможете найти в таблице HTML кодов цветов.

Код будет выглядеть так:

Кроме свечения можно скруглить углы поля формы, при помоши свойства border-radius.

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

В результате у вас должно получиться, что-то вроде этого:

2

Весь код будет выглядеть так:

Материал подготовлен сайтом: WebMasterMix.ru
Источник

  • Горизонтальное выпадающее меню на CSS 3
  • CSS прозрачность — кросс-браузерное решение
  • Создаем глянцевое CSS меню
  • Графическое CSS меню
  • Селекторы CSS

webmastermix.ru

Эффекты текста HTML и CSS | Свет и Тень

 

Текст (text) с тенью (shadow) ранее можно было встретить практически на всех сайтах, такое свойство было очень модным в свое время.


зьмем например графический редактор, в каждом редакторе используется данный эффект и выглядит он просто и стильно. Поэтому свойство text-shadow добавляли на сайты, вне зависимости от того было ли это проявлением необходимости и подходило ли к стилю самого сайта. Некоторое время спустя большинство браузеров начали поддерживать свойство текста и тени (text-shadow), но интерес к данному эффекту угас. И в наши дни встречается крайне редко. При том, что текст с тенью имеет много других способов применения и интересных свойств: свечение текста, контурные рамки, размытие текста, тиснение текста, трехмерный текст и др.

Нижеприведенные эффекты текста настраиваются в файлах .CSS или под тегами «style» в HTML страницах.

Использование text-shadow

Свойство используется в любом формате CSS и имеет 4 параметра: смещение по горизонтали и смещение по вертикали, радиус размытия и цвет тени. Полупрозрачную тень можно сделать применив формат rgba. Радиус размытия определяет резкость тени, т.е. чем больше радиус, тем мягче выглядит тень. Смещение тени вправо и вниз имеет положительное значение, обратно влево и вверх имеет отрицательное значение, при этом при необходимости добавить тень вокруг всего текста значение смещения должно равняться 0.

Главным достоинством свойства текста с тенью (text-shadow) является возможность применения нескольких теней, просто добавив дополнительные параметры через запятую. Такая особенность позволит разнообразить эффекты тени.


Как упоминалось выше эффект текста с тенью используется большинством браузеров, исключение составляют IE (internet explorer) до 10 версии.

Контурный текст

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

    Контурный текст создается 2 способами:

  1. Смещение тени равно 0, а радиус размытия 1-2 px (px — pix element — пиксель или пиксел);
  2. Если увеличить уровень размытия текста контур превратиться в эффект свечения.

Рассмотрим пример контурного текста

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:

Css свечение

Я его не закончил, но проблема ясна. У отображаемого элемента (будем называть его ETBR — Element to be Reflected) есть border-radius и box-shadow. Тень блока видна внутри, а не снаружи граничного блока.

В моем собственном методе матрица видоизменяется, вставленная тень блока и непрозрачность заменят box-reflect и mask-image. Ограничения:

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

— Встроенная тень блока не влияет на текст отображаемого элемента (ETBR). Это происходит, если цвет текста не такой же, как фоновый цвет поверхности.

Поиграть с образцом | Полноэкранное изображение

Цвет текста не становится темнее там, где это делает фон. Поэтому, кажется, нельзя получить другой цвет и тень блока одновременно.

Выбор…

Кстати говоря, о матрицах и отражениях…

Css свечение

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

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

Дополнительно: подготовка

Демо-образец начинается с шаблона HTML5…

index.html

…и этого файла CSS.

style.css

И, конечно, в таблицу стилей добавим ссылку:

2D, но 3D

Демо-образец двухмерный. Ни единого 3D-элемента. Мы об этом знаем, но наша цель – заставить их считать, что мы это создали, а затем сфотографировали фронтальный вид.

Css свечение

Если мы хотим заставить их поверить, что это 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 эффекта неонового свечения: красный, голубой, желтый, зеленый, оранжевый и фиолетовый. Эффект применяется к тексту и свечение происходит при наведении. Свечение анимированное, создает эффект затухания и вспыхивания.

Долой слова, вот скрин того, что вы можете увидеть в демо и скачать себе на компьютер, поставив затем один из эффектов себе на сайт

Css свечение

В основе эффекта лежат атрибуты:

   -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); 
<p>Обычная черная тень</p>

 Комбинированный набор теней

p {text-shadow:2px 2px 4px rgba(0,0,0,1), -5px 0 3px rgba(0,255,0,1), 0 -5px 3px rgba(0,0,255,1); 
<p>Комбинированный набор теней</p>

 Эффект свечения текста CSS

p {text-shadow:0 0 10px rgba(255,255,0,0.3), 0 0 6px rgba(255,255,0,0.4), 0 0 10px rgba(255,255,0,0.3); 
<p>Эффект свечения текста CSS</p>

Для создания равномерного эффекта свечения используйте следующие правила: не задавайте сдвигов, задавайте значения размытия в диапазоне от 8-30px, используйте не полностью непрозрачные цвета.

Свойство box-shadow (тень блока через CSS)

Аналогично свойству text-shadow, за исключением того, что задается для тень для всего блока, а не просто текста. Еще одно отличие — возможность задавать внутреннюю тень блокам.

В качестве значения свойство box-shadow принимает составное свойство:

box-shadow:<тип тени> <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>;

  • <тип тени> — позволяет задавать внутреннюю тень, не обязательное значение. При задании inset, делает тень внутри блока
  • <сдвиг по x> — сдвигает тень по оси X, задается чаще всего в px. При задании положительного расстояния сдвиг идет вправо, отрицательное — влево
  • <сдвиг по y> — сдвигает тень по оси Y, задается чаще всего в px. При задании положительного расстояния сдвиг идет вниз, отрицательное — вверх
  • <радиус размытия> — отвечает за степень размытия тени, задается чаще всего в px
  • <растяжение>— отвечает за степень растяжения тени, задается чаще всего в px, при положительном значение растягивает тень, при отрицательном сжимает её
  • <цвет> — соответственно выбирает цвет тени, задается в любом из возможного формата цвета в CSS

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

Различные примеры использования box-shadow

Блок с обычной тенью
div { 	height:100px; 	background:#33FF66; 	width:250px; 	box-shadow: 0 0 8px 0 rgba(0,0,0,1); } 

www.web.cofp.ru

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Параметры text-shadow

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

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

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Контурный текст

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  font: 2em Arial, sans-serif;  text-shadow: red 0 0 2px;  }  </style>  </head>  <body>  <p class="stroke">Контурный текст</p>  </body> </html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  font: 2em Arial, sans-serif;  text-shadow: red 1px 1px 0, red -1px -1px 0,   red -1px 1px 0, red 1px -1px 0;  }  </style>  </head>  <body>  <p class="stroke">Контурный текст</p>  </body> </html>

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

Контур с помощью четырёх теней

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Трёхмерный текст

Рис. 4. Трёхмерный текст

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

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

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .stroke {  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>  </head>  <body>  <h1 class="stroke">Десятикамерный холодильник</h1>  </body> </html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рельефный текст

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  body {  background: #f0f0f0; /* Цвет фона веб-страницы */  }  .stroke {  font: bold 3em Arial, sans-serif;  color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */  text-shadow: #fff -1px -1px 0,   #333 1px 1px 0;  }  </style>  </head>  <body>  <h1 class="stroke">Рельефный текст</h1>  </body> </html>

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

 text-shadow: #333 -1px -1px 0,   #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Css свечение

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .light {  text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */  color: #0083bd;  }  .dark {  text-shadow: red 0 0 10px; /* Свечение красного цвета */  }  </style>  </head>  <body>  <h1 class="light">Светлая сторона</h1>  <h1 class="dark">Тёмная сторона</h1>  </body> </html>

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.

Текст с размытием

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <style>  .blur {  text-shadow: #000 0 0 5px;  color: transparent; /* Прозрачный цвет текста */  }  </style>  </head>  <body>  <h1 class="blur">Нерезкий текст</h1>  </body> </html>

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Текст</title>  <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>  </head>  <body>  <p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с   затратами. Структура рынка, отбрасывая подробности, стабилизирует   департамент маркетинга и продаж, используя опыт предыдущих кампаний.   Построение бренда, безусловно, спонтанно отталкивает конвергентный   PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой   социальный статус, повышая конкуренцию. Торговая марка естественно   обуславливает план размещения, используя опыт предыдущих кампаний.</p>  </body> </html>

htmlbook.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.