CSS3 для начинающих. Часть 3. Текст в CSS3.

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

Содержание:

1. Эффект вдавленного текста.
2. 6 эффектов с использованием text-shadow
3. Эффект тиснения
4. Поворот текста.
5. Добавление внешней обводки для текста используя text-stroke
6. Эффект выезда пункта меню при наведении без применения JavaScript
7. Стилизация выделения текста в CSS3
8. Интересный эффект с использованием text-shadow

Эффект вдавленного текста.

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

Начнем с простого — нужно заготовить фон для нашего примера. Сделаем в Photoshop картинку размером 100х100 пикселей и зальем ее темно-серым цветом. Добавим немного текстурности, используя фильтр шума.
add noise в photoshop

Далее создадим стандартный HTML документ с несколькими строками текста.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Эффект вдавленного текста

RusDigi.org

 

Эффект вдавленного текста

С помощью css зададим стандартные свойства для текста:

body {
	background: #474747 url(bg_noise.png);
}

h2 {
	font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: center;
}

Теперь у нас все готово для применения свойства text-shadow. Нам нужно задать 4 параметра: размер тени по оси х, расзмер тени по оси у, размытость тени и цвет тени.

color: #222;
text-shadow: 0px 2px 3px #555;

Чтобы добиться эффекта вдавленности текста, мы должны использовать тень, которая по цвету светлее, чем сам текст. В данном случае мы используем цвет #555555, который светлее, чем цвет текста #222222. Размер тени по оси у в 2 пикселя и очень тонкая размытость дает нам нужный эффект.

Примеры реализации вы можете посмотреть тут — несколько самых ярких применений эффекта вдавленного текста.

—>В начало

 

6 эффектов с использованием text-shadow

Со времени появления text-shadow многие веб-разработчики экспериментировали с данным свойством. Целью экспериментов было заменить часто используемые эффекты, созданные с помощью Photoshop, на эффекты, созданные с использованием CSS3 и свойства text-shadow.

Мы рассмотрим несколько таких эффектов: винтаж/ретро, неон, вдавленный, анаглифика, огонь и «настольная игра». Вот как они выглядят:

текстовые эффекты

Начнем мы с эффекта винтажного текста. Задается он вот так:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

А выглядит вот так:

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

Следующий на очереди эффект неонового свечения. Задается он следующим образом:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

Выглядит он так:
эффект неона

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

Далее рассмотрим эффект вдавленности. Останавливаться на нем подробно не будем — он разобран в первой части этого поста. Задается он так:

text-shadow: 0px 2px 3px #666;

Выглядит так:
вдавленный текст

Следующий — эффект аналигфики (anaglyphic). Слово непонятное для русского языка;) Но в общем по картинке смысл ясен. Задается так:

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);


Посмотрим как сделать эффект аналигфики.
Эффект примечателен ем, что напоминает старые 3D изображения. Создается он с помощью объединения применения text-shadow и RGBA. Использование RGBA позволяет задать прозрачность основному тексту и мы можем видеть сквозь него тень.

Следующий на очереди эффект огня.
Задается следующим образом:

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

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

Эффект «настольная игра».
Называется он так потому что напоминает нам оформление многих настольных игр 😉 Задается следующим образом:

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

И выглядит вот так:
эффект "настольная игра"

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

—>В начало

 

Эффект тиснения

Текст с эффектом тиснения применяется на данный момент очень широко. В 2009 году этот эффект был признан трендом года среди веб-дизайнеров. Ярким примером применения эффекта тиснения являются приложения на устройствах Apple. Вот к примеру как выглядит текста на iPhone:
эффект тиснения на iPhone
С помощью CSS3 есть возможность эмулировать такой эффект как тиснение текста. Для этого опять же будет использоваться свойство text-shadow. И самое главное — мы избежим использования Photoshop для придания тексту нужного эффекта.

Рассмотрим два варианта:
1. Светлый текст на темном фоне. Нам нужно использовать text-shadow со смещением по оси y на «-1», при этом используя более темный цвет. В данном примере использован темно синий.
эффект тиснения

text-shadow: 0px -1px 0px #374683;

2. Темный текст на светлом фоне. Здесь мы будем использовать text-shadow с положительным смещением по оси х и цветом более светлым чем текст или максимально близким к белому.
эффект тиснения

text-shadow: 0px 1px 0px #e5e5ee;
—>В начало

 

Поворот текста.

С недавнего времени почти все браузеры стали поддерживать вращение HTML-элементов. Работать данный вариант будет даже в IE 5.5. Давайте сначала возьмем простой HTML-код:


31 July 2009

Порядок отображения даты вы можете выбрать свой. Теперь собственно о CSS3.

Для поворота текста мы будем использовать свойство transform. Для Webkit браузеров и браузера Firefox желательно использовать собственные конструкции:

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

Для того чтобы увидеть поворот элемента нам нужно использовать свойство display:block. Используйте его у того элемента, который вы хотите повернуть. Добавьте display:block в span.

Как будет выглядеть повернутый текст? Ниже вы можете посмотреть как данное свойство отображается в IE, Safari и Firefox’e. Самое большое упущение в том, как рендерится текст в каждом из браузеров. То как это свойство отображается в разных браузерах создает проблему поиска идеального отображения. Возможно в самом ближайшем будущем мы увидим решение этой проблемы разработчиками браузеров.
поворот текста

—>В начало

 

Добавление внешней обводки для текста используя text-stroke

Обводку текста сделать достаточно просто. Давайте для начала зададим цвет текста. В нашем случае пусть будет красный. Далее задаем обводку. Тут 2 параметра: первый — цвет обводки (возмем черный), второй — толщина линии (1px). Для этого примера создадим класс stroke:

.stroke {
 color: #c00; /* цвет текста */
 text-stroke: 1px #000; /* толщина и цвет обводки */
}

Выглядеть эффект будет следующим образом:
обводка текста

Рассмотрим еще один вариант применения данного свойства. Сделаем основной текст прозрачным, а обводку черного цвета. Чтобы сделать текст прозрачным, воспользуемся еще одним свойством CSS3 text-fill-color.

.stroke-transparent {
 text-stroke: 1px #000;
 text-fill-color: transparent;
}

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

—>В начало

 

Эффект выезда пункта меню при наведении без применения JavaScript

Один из интересных эффектов, который появился в CSS3 это возможность сделать выезжающие пункты меню без применения JavaScript. Раньше такой эффект реализовывался с помощью MooTools, jQuery или DojoToolkit. Теперь же мы можем отказаться от JavaScript в пользу CSS3.

Сначала зададим «натуральное» состояние пункта меню:

#animateList li a {
    cursor: pointer;
    -webkit-transition: padding-left 250ms ease-out;
  -moz-transition: padding-left 250ms ease-out;
}

Анимация, которую мы задаем выше довольно обычная и гладкая с использованием смещения (padding). Теперь после того как мы задали обычное состояние пункта меню, давайте зададим состояние, когда наведен курсор мыши (hover):

#animateList li a:hover {
    padding-left: 20px;
}

Теперь когда мы подводим курсор мыши к нашим ссылкам, мы получаем гладкий сдвиг вправо, который происходит в течении 250 милисекунд. Вот и собственно все. И мы не использовали JavaScript!
Пример можно посмотреть тут.

—>В начало

 

Стилизация выделения текста в CSS3

Сейчас речь пойдет о том, как изменить цвет выделения текста. Windows выделяет текст синим цветом, Mac светло-голубым. CSS3 позволяет нам выбрать любой цвет для выделения текста.
Давайте посмотрим как это работает:

/* webkit, opera, IE9 */
::selection { background:lightblue; }
/* mozilla firefox */
::-moz-selection { background:lightblue; }

Также можно использовать свойство selection для определенных областей. Вот пример:

/* webkit, opera, IE9 */
div.highlightBlue::selection { background:lightblue; }
/* mozilla firefox */
div.highlightBlue::-moz-selection { background:lightblue; }

/* webkit, opera, IE9 */
div.highlightPink::selection { background:pink; }
/* mozilla firefox */
div.highlightPink::-moz-selection { background:pink; }

Посмотреть как выглядит это свойство в работе можно тут.

—>В начало

 

Интересный эффект с использованием text-shadow

Собственно это тот самый случай, когда лучше один раз увидеть, чем 100 раз услышать. Нажать сюда

На этом третья часть цикла статей CSS3 для начинающих подошла к концу.

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



Запись опубликована в рубрике CSS3 с метками , , . Добавьте в закладки постоянную ссылку.

11 комментариев: CSS3 для начинающих. Часть 3. Текст в CSS3.

  1. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана

  2. Уведомление: CSS3 для начинающих. Часть 3. Текст в CSS3. | Grabr

  3. Уведомление: Fix: WP - уменьшение количества ревизий (редакций) поста или их отключение | RusDigi.org Блог Гилязетдинова Руслана

  4. Уведомление: CSS3 для начинающих. Часть 3.1. Красивая типография для сайта с помощью CSS3. | RusDigi.org Блог Гилязетдинова Руслана

  5. Уведомление: Плавающая панель без использования JavaScript на чистом CSS. | RusDigi.org Блог Гилязетдинова Руслана

  6. Ssasha Ru говорит:

    красотища какая
    спс за материал

  7. Уведомление: Текст и CSS3: примеры эффектов с использованием text-shadow | RusDigi.org

  8. Александр говорит:

    Достаточно долго искал как можно сделать обводку текста, но наткнулся на этот материал, тут даже интересней все оказалось, спасибо за полезную статью 🙂 Молодцом!!

  9. Уведомление: Дизайн интерьера квартир и домов

  10. Atlon64xp говорит:

    Вы лучше всех объясняете, большое спасибо!!! Сайт в закладки.

  11. Людмила говорит:

     Замечательный сайт. Столько нового! Доступно написано. Спасибо!

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

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