milus

[Решено {интересный эффект}] вопрос на засыпку

Рекомендуемые сообщения

milus    135

всем привет! Недавно бороздил просторы интернета в поисках творческого вдохновения и наткнулся на этот сайт http://www.angelbean.co.uk ну и очень меня заинтересовала реализация одного элемента дизайна. Кто-нибудь может объяснить, что это такое и каким образом оно достигается - я так понимаю это не рисунок, а часть какой-то границы некого контента... У кого есть какие догадки?

post-11677-0-42056300-1328878048_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Svarli    57

Делается это с помощью css, в данном случае сделано с помощью псевдоэлементов :before и :after и следующего кода

#main-nav:before{
	content:"";
	position:absolute;
	display:block;
	left:-32px;
	top:12px;
	border:20px solid #84113b;
	border-right-width:16px !important;
	border-left-color:transparent;
	z-index:-3;
}
#main-nav:after {
	content:"";
	position:absolute;
	display:block;
	right:-32px;
	top:12px;
	border:20px solid #84113b;
	border-left-width:16px !important;
	border-right-color:transparent;
	z-index:-3;
}

Объяснение этому простое, вы поймете, если посмотрите как ведет себя код ниже

.block1 {
	height:0;
	width:0;
	border-width:50px;
	border-style:solid;
	border-color:red blue orange green;
}
результатом этого кода будет вот такой разноцветный квадрат

Изображение

а если изменить код вот так

.block1 {
	height:0;
	width:0;
	border-width:50px;
	border-style:solid;
	border-color:red transparent red red;
}
то получим тоже, что и там на сайте

Изображение

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
milus    135

да спасибо большое - разобрался.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу