Создание эффекта подогнутых уголков на CSS3

angleНедавно мы наткнулись на интересный эффект подогнутых уголков от Joshua Hibbert. Это было круто! Размышляя над его реализацией, первое, что пришло нам в голову, было найти альтернативное решение, которое позволило бы нам использовать текстуру в качестве фона для блока.

Для этого альтернативного эффекта подогнутых уголков на CSS3 мы использовали технику скошенных углов от Lea Verou.

1354097098_css3-tucked-corners-01

HTML

Следующая разметка довольно сильно сходится с решением от Joshua Hibbert. Здесь не нужно ничего менять или улучшать. На первый взгляд вы, возможно, подумаете, что мы сюда что-то добавили, но на самом деле нам понадобится лишь то, что представлено ниже, для создания четырех уголков при помощи псевдо-элементов в CSS.

CSS-код

Расширенный селектор [class*=’tucked-corners-‘] будет выбирать только те элементы, которые где-либо в качестве значения атрибута класса будут иметь строку tucked-corners-.

.tucked-corners-top {
    position: relative;
    width: 500px; min-height: 200px;
    margin: 100px auto; padding: 20px;
    background-color: #fff; /* Fallback */
    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, /* All the four corners */
[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; /* Do not show on IE9 #needed */
}

.tucked-corners-top::before, /* Top left & top right */
.tucked-corners-top::after {
	top: -10px;
}

.tucked-corners-bottom::before, /* Bottom left & bottom right */
.tucked-corners-bottom::after {
	bottom: -10px;
}		

.tucked-corners-top::before, /* Top left & bottom left */
.tucked-corners-bottom::before {
	left: -42px;
}

.tucked-corners-top::after, /* Top right & bottom right */
.tucked-corners-bottom::after {
	right: -42px;
}

.tucked-corners-top::before { /* Top left */
	transform: rotate(-45deg);
}

.tucked-corners-top::after { /* Top right */
	transform: rotate(45deg);			
}

.tucked-corners-bottom::before { /* Bottom left */
	transform: rotate(-135deg);
}

.tucked-corners-bottom::after { /* Bottom right */
	transform: rotate(135deg);
}

В случае с IE9

Как вам уже известно, IE9 не поддерживает градиенты на CSS3, но он поддерживает параметр box-shadow. Это вызывает ситуацию, которую вы можете видеть ниже:

1354097017_css3-tucked-corners-02

Мы решили воспользоваться следующим CSS-хаком для того, чтобы скрыть тень псевдо-элементов. К сожалению, в IE9 мы никак не можем реализовать этот эффект.

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
   box-shadow: none\9; /* Do not show on IE9 #needed */
}

На этом всё

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

Также для себя мы выяснили, что в жизни встречаются такие моменты, когда в голове лучше бы иметь запасные планы и варианты. Всегда будет полезно покопаться в памяти в поисках подходящего варианта!

Дополнительная информация

Точки остановки градации в данном эффекте: 45deg, 135deg, 255deg и 315deg, так как значениями параметра background-position являются bottom left, bottom right, top right, top left.

С версии 16.0 Firefox поддерживает множество CSS3-параметров без префиксов, включая даже градиенты. Здесь отличная новость в том, что их алгоритм градиентов изменился, так как объявления с приставкой -moz- и без нее дают разные результаты.
 

Источник урока: www.coolwebmasters.com

Урок для Вас подготовлен командой сайта www.red-star.pro.