Позиционирование элементов
Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow
Конечно, неказистые страницы с предыдущих рисунков создавались лишь с целью продемонстрировать возможности языка по позиционированию элементов. Вы сами решите, какие средства и для чего будете использовать на своей Web-странице.
С помощью свойств позиционирования нетрудно создавать для надписей эффект трехмерности. Идея состоит в том, чтобы вывести одинаковые по содержанию тексты слегка сдвинутыми друг относительно друга и окрашенными в различные цвета. Попробуйте в качестве упражнения написать соответствующую программу. На рисунке показано примерно то, что должно получиться. Ниже рисунка приведен один из возможных вариантов программы, которая создает "трехмерную" надпись.
Рис. 668. Пример создания трехмерного текста с помощью CSS
<HTML> <HEAD> <TITLE>3d эффект</TITLE> <STYLE> P { font-family: "sans-serif"; font-size: 96; color: red } P .highlight { color: silver } P .shadow { color: darkred } </STYLE></HEAD> <BODY BGCOLOR="#509090"> <DIV STYLE="position:absolute; top:5; left:5; width:600; height:100; margin:top:10"> <P CLASS=Shadow>Объемный текст</P> <DIV STYLE="position:absolute; top:0; left:0; width:600; height:100; margin:top:10"> <P CLASS=highlight>Объемный текст</P> <DIV STYLE="position:absolute; top:2; left:2; width:600; height:100; margin:top:10"> <P>Объемный текст</P> </DIV></BODY> </HTML>Обратите внимание, что этот способ создания эффектных заголовков значительно экономнее, чем использование графических файлов с аналогичным содержанием.