Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле
→ На карте Купить AMWAY в ЯрославлеПриобрести высококачественную продукцию Амвей в Ярославле, получить консультации по бизнесу, заказать продукцию или получить заказ:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Симпатичный бордюр сайта
Сниппет
Делаем симпатичный верхний бордюр сайта. Как мне подсказали на одном умном форуме, этот элемент может быть бесполезен для HTML5, однако не все ж еще на нем умеют размечать...
Симпатичный бордюр сайта
Опубликовал Pisatel Pisatel Добавлено 08-02-2013 14:41 08 Февраль 2013 14:41:29 4041 Прочтений 4041 Прочтений
 printer
Подхлядел йа как-то на одном сайтеге симпатяшное украшательство в виде верхнего бордюра, который как бы нависал над усем сайтом, придавая ему более кошерный вид. Стало интересно, шо же это за чудо дизайнерской идеи. Оказалось- добавлен псевдокласс before к body. Вот код CSS и скриншот, сделанный папараци с проезжающего мотоцикла на камеру мобильного телефона:

Код: CSS



body:before {


content: "";


position: fixed;


top: -10px; /*отступ вверх от тела*/


left: 0;


width: 100%; /*во всю ширину арбузера*/


height: 15px; /*высота бордюра*/


z-index: 1; /*возвышаем над всеми элементами*/


 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);


-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);


box-shadow: 0px 0px 10px rgba(0, 0, 0, .8 ); /*задаем тень блоку с альфа- прозрачностью, на всякий случай для всех арбузов*/


}




В общем, можно подобное сделать и с псевдоклассом after но если высота страницы небольшая, меньше высоты окна арбузера, то данный элемент внизу будет смотреться весьма бестолково. Дерзайте, экспериментируйте!
Понравилась статья?
Метки для данной статьи
Теги:  #css #css3 #body: before #body: after #бордюр #эффекты 
Похожие статьи
Заголовок
Категория
Просмотров
3176
13745
3433
4737
6281
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 22122 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 67394 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 15248 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 17735 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 142650 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 14247 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 22293 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 25973 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 7599 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 36594 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 11704 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 30920 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 126229 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 8801 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 23075 13 Pisatel
03. апреля 2015