Сайт посвященный WEB Дизайну
Статьи по:





Rambler's Top100

Автоматическая регистрация. Простая установка. Подробная статистика.

Закажи рекламу на Rambler.ru, Mail.ru, Aport.ru! От 5 долларов за все!

JavaScript: Простые визуальные эффекты

Объемный заголовок

Объемные (выпуклые) заголовки довольно эффектны на веб-страницах. Зачастую они создаются как графические файлы, которые вставляются в HTML-документ с помощью тега <IMG>. Однако во многих случаях более экономичным является решение, основанное на использовании таблиц стилей.

Идея создания объемного заголовка довольно проста: достаточно несколько надписей с одинаковыми содержанием наложить друг на друга с некоторым сдвигом по координатам. Потребуются как минимум две такие надписи. Одна из них предназначена для создания эффекта тени (задний план), а вторая располагается над первой. Можно использовать еще одну такую надпись для создания эффекта подсветки. С эстетической точки зрения наилучший эффект достигается путем подбора цветов надписей (игрой света и тени) с учетом цвета фона. С технической точки зрения нужный эффект получается применением таблиц стилей. Приведем пример HTML-документа, в котором объемный заголовок создается с помощью трех наложенных друг на друга надписей . Таблица стилей определяется для тега абзаца <Р>. В данной таблице задаются цвет и параметры шрифта надписей. Позиционирование надписей производится параметрами атрибута STYLE контейнерных тегов <DIV>, в которые заключены теги абзаца.

<html>
<HEAD><TITLE>3d эффект</TITLE><HEAD>
<! Каскадная таблица стилей для абзаца>
<style>
p {font-family:sans-serif; font-size:72; font-weight:800; color:red}
P.highlight {color:yellow}
P.shadow {color: #990000}
</STYLE>
<BODY >
<!-- Тень-->
<DIV STYLE = "position:absolute; top:5; left:5">
<P CLASS = shadow>0бъeмный заголовок</Р>
</div>
<!-- Подсветка-->
<DIV STYLE = "position:absolute; top:0; left:0">
<p CLASS = highlight>0бъeмный заголовок</Р>
</div>
<!-- Передний план-->
<DIV STYLE = "position:absolute; top:2; left:2">
<P>0бъeмный заголовок</Р>
</div>
</BODY>
</html>

Пример работы данного скрипта приведен ниже
ПРИМЕР

Hosted by uCoz