На многих сайтах можно увидеть тексты с эффектом выдавливания или однопиксельной тенькой. На самом деле, сделать такой эффект не очень сложно. Попробуем?
Для начала определимся с целью. Нам необходимо сверстать текст таким образом, чтобы полчилось, как на картинке ниже
Понятно, что саму теньку мы будем делать за счёт дублирования текста. Поэтому HTML-код должен быть приблизительно следующим образом:
<div class="shadowedText">
<div class="shadow">Текст</div>
<div class="text">Текст</div>
</div>
Тут, всё, вроде бы, просто. Div с классом shadowedText будет сообщать нам, что текст в нём будет с тенькой, shadow - сама тень, а text - ну, понятно. Почему тень идёт раньше текста? Потому что текст мы будем накладывать на тень.
Теперь пришло время заглянуть в таблицу стилей и прописать всё необходимое там:
.shadowedText { position:relative;
}
. shadowedText .shadow { color: #333;
}
. shadowedText .text { color: #eee;
position: absolute;
top: 0;
margin: -1px 0 0 -1px;
}
Итак, поскольку текст мы будем накладывать сверху на тень, то нам нужно определиться с точкой отсчёта, откуда будем позиционироваться. Для этого shadowedText-у мы ставим свойство position: relative. Относительно самой тень особо нечего сказать, она просто темно-серая. Ну, а сам текст будет позиционироваться абсолютно относительно shadowedText-a, и для смещения иметь отрицательные отступы: по одному пикселю вверх и влево.
Вот, собственно, и всё.
Теперь взглянем на это всё ещё раз. Что плохо? А плохо то, что у нас текст надо дублировать. Тут и поисковики могут взбудоражиться, да и код становится не очень красивым. Что делать? Использовать jQuery. Отличная библиотека, написанная на Javascript, которая уже не раз меня выручала. Итак, корректируем цель - нам надо, чтобы не только результат был приемлемым, но и чтобы HTML-код при этом выглядел достойно.
Мы не будем исправлять CSS, ведь он вполне нас устраивает.
Переделывать будем HTML-код:
<div class="shadowMe">Вписываем сюда наш текст</div>
Симпатично с точки зрения HTML? Мне кажется, что вполне. Зачем мы создали лишний класс shadowMe? А вот зачем... В шапку страницы дописываем подключение библиотеки jquery...
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
...и следующий скрипт:
<script type="text/javascript">
$(document).ready(function(){ $(".shadowMe").each(function() { $(this).wrap("<div class=\" shadowedText \"><div class=\"text\"></div></div>"); $(this).parent().before("<div class=\"shadow\">"+$(this).parent().html()+"</div>"); });
});
</script>
Что делает этот скрипт. После загрузки документа для всех элементов с классом shadowMe он выполняет следующие операции:
- обёртывает его уже знакомыми классами shadowText и text;
- Перед дивом с классом text вставляет див класса shadow, куда копирует содержимое text-a.
По-моему, получилось вполне себе изящное решение, единственный недостаток которого в том, что для людей, не использующих JavaScript, тени не будет. Ну, да это было и так понятно.
Может возникнуть вопрос: зачем копировать содержимое text-a, ведь нам, по идее, нужно было содержимое класса shadowMe. Тут проявляется универсальность данного метода. Дело в том, что теперь мы можем сделать с тенью любой текст на сайте, в том числе и заголовки, для которых размер шрифта может не совпадать со стандартным.
То есть конструкции вида
<h1 class="shadowMe">Текст</h1>
...или даже ...
<div class="shadowMe">
<h3>Вот пробуем затенить целый блок</h3>
<p>Вроде нормально получилось, не?</p>
</div>
...будут работать.
Отмечу, что данное решение будет работать также и для эффекта выдавливания текста. Для этого надо всего лишь поменять цвета тени и текста.
Вы можете проверить результат выполнения скрипта.
comments powered by Disqus