Текстовая 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
Просмотров: 27630
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 31 Марта 2010 16:46
    Женек
    нууу, может пригодится...
  • 31 Марта 2010 17:48
    Magneto
    в Google Chrome хорошо работает - плавно увеличивает
  • 31 Марта 2010 19:19
    Денис
    Скорее бы уж опера стала более менее полноценно поддержывать CSS3!
  • 31 Марта 2010 20:12
    Чебурашка
    А у меня наоборот в Опере плавно, а в Мозиле резко )
  • 31 Марта 2010 20:41
    SnAtVB
    Вобще-то в опере все отлично а в мозиле погано =D
  • 31 Марта 2010 21:33
    Shade_of_Eternity
    к меня и там и там неплавно както )))) хотя у меня всегда в опере хуже чем в мозилле, мозилла рулит! В ней только одно плохо - тормозит....
  • 31 Марта 2010 23:11
    qvota
    Денис Скорей оперу обнови и будет счастье тебе. Shade_of_Eternity Опера рулит при любом раскладе (ИМХО) По уроку,это что, еще один рассказ, о том, что может CSS3? Все это, можно делать. средствами обычного CSS. кода на пару строк больше, зато кроссбраузерно.
  • 1 Апреля 2010 01:35
    Alexxhub
    Лиса - просто выскакивает текст Опера 10.51 - плавно Хром - плавно, но сначала образ выезжает, потом тень заполняется.
  • 1 Апреля 2010 16:18
    Shade_of_Eternity
    а ну сори, наверно впервые так что в опере работает норм все а в мозилле нет=))
  • 2 Апреля 2010 20:32
    SnAtVB
    Автор: Shade_of_Eternity (2010-04-01 16:18:21) а ну сори, наверно впервые так что в опере работает норм все а в мозилле нет=)) вы ошибаетесь, как раз в мозиле все по уродски часто а в опере всегда все офигенно PS лично у мя так..
  • 5 Апреля 2010 13:04
    Graf
    Отлично работает: - в Опере, Google chrome, Apple Safari (два последних вообще супер). Mazila и IE - даже не знаю,как их назвать, - "тормоза". Спасибо за урок, - классная вешь!
  • 13 Апреля 2010 14:12
    Alexxhub
    Евгений и вся команда Руселлера поздравляю с возвращением.
  • 13 Апреля 2010 14:21
    Alexxhub
    Евгений смените хотя бы до 25 кб на аватар, а то 10 это как то мало. Так и не получилось вернуть старый аватар.
  • 13 Апреля 2010 15:28
    neverfan
    поздравляю с восстановлением работы сайта Евгений, будь проклят этот макхост...
  • 13 Апреля 2010 17:27
    Николай
    Да славу Богу)) Евгений, какой сейчас у Вас хост? Просто ради любопытства интересно и как прошли восстановления)))
  • 13 Апреля 2010 21:38
    SerZhik
    мне тоже интересно какой теперь у вас хостинг?
  • 15 Апреля 2010 03:54
    Alexxhub
    Опубликуйте хоть новость какую :)
  • 3 Мая 2010 00:43
    Oleg
    Вот сколько уже приходилось использовать CSS3 свойства, так в Опере все супер. А вот в остальных......
  • 23 Июня 2010 10:37
    FeroDaR
    Кстати если в :hover (div:hover {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);text-shadow: 3px 3px 0 #333;}) Добавить туда word-spacing:2px; А в обычный ДИВ добавить word-spacing:-4px; то будет ещё лучше! Только будет работать если слово написано в о т т а к Но тот же word-spacing:-4px; это уберёт. Выходит как-то так: div#shadow span { word-spacing:-4px; font-size:15px; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; } div#shadow span:hover { font-size:18px; word-spacing:2px; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); text-shadow: 1px 1px 2px #333, 2px 2px 3px #333, 0px 2px 4px #555; } <div id="shadow"><span>Т е к с т б о л ь ш о й и с т р а ш н ы й .</span></div>
  • 23 Июня 2010 10:39
    FeroDaR
    З.Ы: где и так должен быть пробел то ставим ещё 1-2 проблела. К примеру: Т е к с т б о л ь ш о й и с т р а ш н ы й .
^ Наверх ^