Створимо заголовок 1-го рівня h1 з тінню. Для створення тіні в заголовку створимо ще 2 дочірні елементи span, які містять однаковий текст, але елемент, що створює тінь, розташовується зі зміщенням.
Зверніть увагу на порядок запису елементів у коді прикладу. Елемент з класом "ten" йде раніше за елемент з класом "text". Саме це є причиною того, що тінь розташовується ніби "під" текстом, частково його перекриваючи.
Обидва дочірні елементи повинні мати абсолютне позиціонування — це дасть нам можливість керувати їх взаємним розташуванням.
Щоб координати дочірніх елементів відлічувалися не від верхнього лівого кута сторінки, а відносно заголовка, в якому вони розташовані, цей заголовок повинен мати відносне (або абсолютне) позиціонування. Ми скористаємось відносним позиціонуванням, оскільки в цьому випадку немає потреби вказувати точні координати елемента.