Офис НП 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 
08 Февраль 2013 14:41:29
3721 Прочтений
Подхлядел йа как-то на одном сайтеге симпатяшное украшательство в виде верхнего бордюра, который как бы нависал над усем сайтом, придавая ему более кошерный вид. Стало интересно, шо же это за чудо дизайнерской идеи. Оказалось- добавлен псевдокласс before к body. Вот код CSS и скриншот, сделанный папараци с проезжающего мотоцикла на камеру мобильного телефона:
В общем, можно подобное сделать и с псевдоклассом after но если высота страницы небольшая, меньше высоты окна арбузера, то данный элемент внизу будет смотреться весьма бестолково. Дерзайте, экспериментируйте!
Код: 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 но если высота страницы небольшая, меньше высоты окна арбузера, то данный элемент внизу будет смотреться весьма бестолково. Дерзайте, экспериментируйте!
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
19296 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
54157 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
13484 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
15758 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
116194 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
12209 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
19528 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
22397 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
6750 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
32122 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
10531 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
16393 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
104703 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
7966 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
21595 | 13 | Pisatel 03. апреля 2015 |