Текстовая CSS3 башня

В этом уроке мы создадим интересный эффект с текстом с помощью CSS3.

Совсем недавно я наткнулся на сайт Девида Десандро. В футере присутствует очень интересный эффект при наведении на текст.

Эту технику предельно просто повторить. Давайте взглянем как это сделать.

demosourse

Множество текстовых теней

Наиболее важный момент при осуществлении такого эффекта это свойство CSS3 text-shadow. Оно обычно выглядит так:

.shadow {
   text-shadow: 2px 2px 4px #000;
}

Объяснение:

.shadow {
   text-shadow: [X отступ] [Y отступ] [размер размытия] [цвет];
}

Обратите внимание, что это свойство не имеет приставок для разных браузеров (типа -moz).

Вы можете придавать несколько теней к одному и тому же тексту:

.shadow {
   text-shadow: 1px 1px 0 black, 2px 2px 0 black;
}

Множественные тени можно задать через запятую. В примере выше две тени - одна имеет отступ 1 пикселей по осям без размытия, вторая - 2 пикселя без размытия.

Теперь поняли в чем весь прикол? Мы можем применять множество теней с отступом 1 пиксель друг от друга и таким образом строить "башню" из тени под текстом. По умолчанию, такой эффект будет погружаться все ниже и ниже под текстом, но мы можем сделать так, чтобы он был видимым только при наведении мышки.

.shadow {
   color: white;
   font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
}
.shadow:hover {
   position: relative;
   top: -3px; left: -3px;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
}

Переходы

С помощью кода выше наш текст будет мгновенно вырастать. Но мы можем сделать более плавный переход, так как большинство современных браузеров уже поддерживают команду transition. Эта функция пока еще нуждается в префиксах (3 штуки для разных браузеров):

.shadow { color: white; font: bold 52px Helvetica, Arial, Sans-Serif;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
   -webkit-transition: all 0.12s ease-out;
   -moz-transition: all 0.12s ease-out;
   -o-transition: all 0.12s ease-out;
}
.shadow:hover {
   position: relative; top: -3px; left: -3px;
   text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
}

Обратите внимание, что -moz-transition будет работать только в Firefox 3.7.

Средняя часть футера имеет немного другой эффект. По мере наведения мышки на разные строки текста они растут в размере. Тут применяется еще один CSS3 эффект - transform. Опять же с префиксами.

div:hover {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   text-shadow: 3px 3px 0 #333;
}

Что же будет отображаться в Internet Explorer? Тени работать не будут!!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 31 Марта 2010
Просмотров: 27859
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^