| Главная » Файлы » Все Для Ucoz » Скрипты Для ucoz |
Создание полупрозрачной ленточки в углу сайта
| 18.03.2011, 17:22 | |
 В этом уроке Вы научитесь делать полупрозрачную ленточку и размещать ее в левом верхнем углу сайта. Это придаст более престижный и интересный вид Вашему сайту. Итак, приступим! Для начала просмотрите демо получившейся у меня ленточки и скачайте исходные файлы урока: Посмотреть ДЕМО Шаг 1. Размещение ленточки Первым этапом нашей работы будет размещение нашей ленточки. Первым делом Вы должны смастерить такую ленточку или найти подобную где-нибудь в интернете. Итак, размещать в левом углу сайта нашу ленту мы будем с помощью CSS-стилей. В принципе, ничего сложного здесь нет, однако ниже я все-таки приведу код используемых стилей:
Шаг 2. Доработки по размещению. Остался последний этап, в котором нам остается всего лишь доработать html-сторону ленточки. Для этого, сразу после открытия тега body разместите следующий код:
Практически, глядя на вышеприведенный код, все понимают, что это все очень легко, однако мы делаем полупрозрачную ленточку и поэтому изображению мы должны задать несколько стилей, которые помогут добиться той прозрачности которая нужна нам. *filter:alpha(opacity=60) - этим стилем мы задаем видимость изображения на 60% для правильного отображения в Internet Explorer; * opacity: 0.60 - этот стиль задает видимость изображения на 0.6 из 1.0 для правильного отображения в браузере Opera; * -moz-opacity:0.60 - этим стилем задается видимость изображения на 0.6. из 1.0 для правильного отображения в Mozilla Firefox и др... P. S.: Вы можете регулировать видимость изображения, изменяя параметр opacity в первом случае от 0 процентов(невидимый) до 100(абсолютная видимость), во втором случае от 0 единиц(невидимый) до 1.0(абсолютная видимость) Исходники | |
| Просмотров: 272 | Загрузок: 0 | Рейтинг: 0.0/0 | |
| Всего комментариев: 0 | |
