Урок 14. Объемные заголовки

Идея создания объемного заголовка достаточно проста: достаточно несколько надписей с одинаковым содержанием наложить друг на друга с некоторым сдвигом по координатам.

<html>
    <head><title>3D-эффект</title>
    <style>
      p {font-family: sans-serif; font-size: 72px; font-weight: 800; color: #00aaaa;}
      p.highlight {color: silver}
      p.shadow {color: black}
    </style>
    </head>
    <body bgcolor="#aeb98c">
    <!-- Тень -->
    <div style="position:absolute; top:5; left:5">
      <p class="shadow">Объемный заголовок</p>
    </div>
    <!-- Подсветка -->
    <div style="position:absolute; top:0; left:0">
      <p class="highlight">Объемный заголовок</p>
    </div>
    <!-- Передний план -->
    <div style="position:absolute; top:2; left:2">
      <p>Объемный заголовок</p>
    </div>
    </body>
</html>

Теперь рассмотрим функцию, которая создает заголовок с заданными параметрами. Эта функция вставлена в HTML-документ, создающим три заголовка с различными параметрами.

<html>
	<head><title>3D-эффект</title></head>
	<body>
    <script>
        function d3(text,x,y,tcolor,fsize,fweight,ffamily,zind) {
            /* text - текст заголовка
               x - горизонтальная координата (left)
               y - вертикальная координата (top)
               tcolor - цвет переднего плана
               fsize - размер шрифта (pt)
               fweight - вес (толщина шрифта)
               ffamily - название семейства шрифтов
               zind - z-Index */
            if (!text) return null;
            // значение параметров по умолчанию: 
            if (!ffamily) ffamily = 'arial';
            if (!fweight) fweight = 800;
            if (!fsize) fsize = 36;
            if (!tcolor) tcolor = '#00aaff';
            if (!y) y = 0;
            if (!x) x = 0;
 
            var sd = 5, hd = 2 // сдвиг тени и подсветки
            var xzind = ""
            if (zind) xzind = "; z-Index:" + zind
            var xstyle = 'font-family:' + ffamily + '; font-size:' + fsize + '; font-weight:' + fweight + ';'
 
            var xstr = '<div style="position:absolute; top:' + (y + sd) + ';left:' + (x + sd) + xzind + '">'
            xstr += '<p style="' + xstyle + 'color:darkred">' + text + '</p></div>'
 
            xstr += '<div style="position:absolute; top:' + y + ';left:' + x + xzind + '">'
            xstr += '<p style="' + xstyle + 'color:silver">' + text + '</p></div>'
 
            xstr += '<div style="position:absolute; top:' + (y + hd) + ';left:' + (x + hd) + xzind + '">'
            xstr += '<p style="' + xstyle + 'color:' + tcolor + '">' + text + '</p></div>'
 
            document.write(xstr)
        }
 
        d3("Привет!", 50, 15, 'red', 40, 800, 'sans-serif')
        d3("Это не графика", 50, 50, 'blue', 72, 800, 'Times')
        d3("Это текст", 10, 80, '#00aa00', 92, 900, 'Courier New')
    </script>
	</body>
</html>