Главная > CSS/Style Sheets > Создание эффекта подогнутых уголков на CSS3

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


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

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

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

HTML

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

<div class="tucked-corners-top">
<div class="tucked-corners-bottom">
<!-- content here -->
</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; /* 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. Это вызывает ситуацию, которую вы можете видеть ниже:

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

Мы решили воспользоваться следующим 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- и без нее дают разные результаты.
Вернуться назад