Эффект подсунутых уголков на CSS

В данном уроке мы разберемся, как создавать эффект подсунутых уголков для блоков. Такое оформление материалов отлично подойдет для проектов с дизайном старых фотоальбомов.

 

Разметка HTML

Нам потребуется два элемента, потому что для эффекта используется четыре угла, создаваемые с помощью псевдо-элементов.

	<div class="tucked-corners-top">
		<div class="tucked-corners-bottom">
			<!--  Содержание располагается здесь -->
		</div>
	</div>

 

CSS

Селектор [class*='tucked-corners-'] предназначен для выбора элементов, которые имеют строку tucked-corners- в имени класса.

.tucked-corners-top {
    position: relative;
    width: 500px; min-height: 200px;
    margin: 100px auto; padding: 20px;
    background-color: #fff; /* Обратная совместимость */
    background:	linear-gradient(45deg,  transparent 10px, #fff 10px),
		linear-gradient(135deg, transparent 10px, #fff 10px),
		linear-gradient(225deg, transparent 10px, #fff 10px),
		linear-gradient(315deg, transparent 10px, #fff 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);			
}

[class*='tucked-corners-']::before, /* Все четыре угла */
[class*='tucked-corners-']::after {
	content: '';
	position: absolute;
	height: 20px; width: 80px;
	box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
        box-shadow: none\9; /* Не выводить в IE9 */
}

.tucked-corners-top::before, /* Верхний левый и верхний правый */
.tucked-corners-top::after {
	top: -10px;
}

.tucked-corners-bottom::before, /* Нижний левый и нижний правый */
.tucked-corners-bottom::after {
	bottom: -10px;
}		

.tucked-corners-top::before, /* Верхний левый и нижний левый */
.tucked-corners-bottom::before {
	left: -42px;
}

.tucked-corners-top::after, /* Верхний правый и нижний правый */
.tucked-corners-bottom::after {
	right: -42px;
}

.tucked-corners-top::before { /* Верхний левый */
	transform: rotate(-45deg);
}

.tucked-corners-top::after { /* Верхний правый */
	transform: rotate(45deg);			
}

.tucked-corners-bottom::before { /* Нижний левый */
	transform: rotate(-135deg);
}

.tucked-corners-bottom::after { /* Нижний правый */
	transform: rotate(135deg);
}

 

Случай IE9

IE9 не поддерживает градиенты CSS3, но он поддерживает свойство box-shadow. В итоге получается следующее:

Мы просто отключаем тени в IE9, так что эффект в данном браузере не будет выводиться:

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
	box-shadow: none\9; /* Не выводить в IE9 */
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Yj1Ojl3LXUc/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект подсунутых уголков на CSS | | 2012-11-14 21:49:09 | | Статьи Web-мастеру | | В данном уроке мы разберемся, как создавать эффект подсунутых уголков для блоков. Такое оформление материалов отлично подойдет для проектов с дизайном старых фотоальбомов. Разметка HTMLНам | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: