Створіть простий ефект загнутого куточка на CSS

11

Від автора: На цьому тижні у нас ще один цікавий і нескладний проект, який ви можете зробити для практики. В цей раз ми створимо ілюзію сторінки із загнутим куточком.

З допомогою псевдо елементів CSS, ми створимо трикутники, розмістивши їх таким чином, щоб створився загнутий кутик. Коли ми закінчимо, ви зможете просто задати клас будь div елементу, щоб додати цей ефект.

Концепт

Створіть простий ефект загнутого куточка на CSS

Подивитися демо

Нещодавно я вирішив додати трохи виразності звичайного контейнера з текстом і вирішив спробувати загніть один з куточків. За допомогою зображення, це досить просте завдання. Однак, якщо ми спробуємо піти по шляху CSS, це зажадає трохи більше часу і зусиль.

Метод, який я виробив, звичайно не новий, але я подумав, що він досить цікавий для того, щоб ним поділитися. Загалом, все, що нам потрібно додатково до прямокутного блоку – це два трикутника. Ми розмістимо ці трикутники згідно малюнку нижче.

Створіть простий ефект загнутого куточка на CSS

Як тільки ми розмістимо трикутники, ми задамо верхньому трикутнику той же колір, що і фону і, раптово, у нас з’явиться симпатичний ефект загнутого куточка. Дуже легко!

Створіть простий ефект загнутого куточка на CSS

Тепер, коли у нас є план, ми можемо почати створювати фігури за допомогою CSS. Стандартні можливості CSS не мають вбудованих методів для створення трикутників, тому нам доведеться використовувати кордону.

HTML

Для початку створіть div такий як той, що показаний нижче. Я додав заголовок параграфу, один клас для загальної стилізації сторінки, який можливо ми захочемо використовувати десь ще (tl – означає «top left» – верхній лівий, ми створимо ще один клас для верхнього правового куточка пізніше).

Headline

Lorem ipsum dolor sit amet…

Це все, що нам потрібно зараз. Давайте перейдемо до CSS і застосуємо стилі!

CSS сторінки

Що стосується CSS, то ми почнемо з того, що напишемо код для загального вигляду нашої маленької сторінки без загнутого куточка. Я почав з того, що поставив симпатичний темний колір фону, а потім продовжив написання стилів для самого класу сторінки. Задамо ширину, висоту і зовнішній відступ, а потім зробимо фон білим.

В якості додаткового кроку, я задав ледь помітний фоновий градієнт. Як завжди, це вимагає безбожно великої кількості коду, щоб градієнт правильно відображався у багатьох браузерах. Якщо вам здається, що воно того не варто, просто пропустіть градієнт.

body {
background: #272822;
}
.page {
background: #fff;
width: 250px;
height: 330px;
margin: 50px;
/* Опціональний градієнт */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: програми:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#e5e5e5′,GradientType=0 ); /* IE6-9 */
}

Тепер, коли основним контейнера задані стилі, час трохи поліпшити текст. Що стосується заголовка h2, я зробив його симпатичним і великим і розташував його досить далеко від верхнього краю, щоб він не заважав згину сторінки. Також, я використовував шрифт з колекції Google – Lilita One. Підключення цього шрифту робиться дуже просто – скопіюйте і вставте код за посиланням.

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

.page h2 {
padding: 85px 0 0 20px;
font: 400 35px/1.5 ‘Lilita One’, Helvetica, sans-serif;
}
.page p {
padding: 10px 20px;
font: 12px/1.5 Helvetica, sans-serif;
color: #4b4b4b;
}

Перевірка прогресу

До цього моменту, у вас повинна бути симпатична маленька сторінка, така як показано нижче. Не так вже й багато, але початок непоганий.

Створіть простий ефект загнутого куточка на CSS

Трикутники на CSS

Перш ніж ми рушимо далі, нам потрібно навчитися створювати трикутники на CSS. Для початку створіть пустий div і задайте йому клас «triangle». Тепер задамо нульові ширину і висоту, але при цьому верхня та ліва кордону будуть дуже широкими (використовуйте два різних кольори). Ось що у вас повинно вийти:

Створіть простий ефект загнутого куточка на CSS

Як бачите, ми створили квадрат, розділений по діагоналі на 2 частини від нижнього лівого кута до верхнього правого. Кожна межа відповідає одному трикутнику. Тепер дивіться, що станеться, якщо одну з меж ми зробимо прозорою:

Створіть простий ефект загнутого куточка на CSS

Ось так, вийшов трикутник на чистому CSS. МИ навіть можемо змінити напрямок трикутника, застосувавши кордону до інших сторін:

Створіть простий ефект загнутого куточка на CSS

Переконайтеся, що ви робите прозорою кордон тієї сторони, де має проходити гіпотенуза трикутника. Якщо ви хочете, щоб трикутник дивився праворуч, зробіть прозорою праву межу. І навпаки. Якщо хочете, щоб гіпотенуза була зверху – зробіть прозорим нижню межу.

Подивіться на цей приклад, щоб побачити всі чотири варіанти в дії.

Згин сторінки

Тепер прийшов час використовувати наші знання для створення згину сторінки. Щоб досягти цього, нам потрібно зробити три кроки. Перший, ми застосуємо стилі до класу «foldlt», який ми створили раніше. Потім, ми додамо один трикутник, використовуючи псевдо елемент :before. Нарешті, ми додамо другий трикутник, використовуючи псевдо елемент :after.

.foldtl {
position: relative;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}

Як ви можете побачити, все, що ми застосували до основного класу – це відносне позиціонування (для того, щоб змогти задати абсолютне позиціонування трикутниках) і задали тінь. Замітка на полях: це ефект набагато простіше без тіней, але я хотів переконатися, що ви знаєте про те, що він все ж працює. Вам тільки потрібно переконатися, що тінь відкидається правильно і не виступає занадто далеко за краю згину.

Тепер час створити наш перший трикутник. Викличте псевдо елемент :before, з порожнім значенням властивості content, задайте абсолютне позиціонування, а потім застосуйте код для трикутника, який ми вивчили раніше.

.foldtl:before {
content: «»;
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-left: 70px solid transparent;
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

Як бачите, я задав розмір в 70px і колір кордону #eee, який трохи темніше, ніж колір сторінки, тому що, це трикутник, який створює ефект згину. Знову, тінь необхідно розташувати досить далеко для більш природного вигляду.

Створіть простий ефект загнутого куточка на CSS

Відрізаємо куточок

На завершення, нам потрібно розташувати другий трикутник так, щоб він обрізав лівий верхній кут. Цей трикутник використовує синтаксис практично аналогічний попередньому, тільки колір трикутника повинен збігатися з кольором фону, заданим тегу body, напрямок трикутника зберігається.

Виявляється, що цей крок насправді не потрібен, дивіться секцію Оновлення нижче.

.foldtl:after {
content: «»;
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-top: 69px solid #272822;
border-right: 69px solid transparent;
}

Тепер наш ефект загнутого куточка закінчено! Ось як він виглядає:

Створіть простий ефект загнутого куточка на CSS

Перевертаємо

Тепер, коли ми добилися ефекту загнутого куточка для лівого верхнього кута, час перевернути його і подивитися, чи зможемо ми досягти такого ж ефекту і для правого верхнього кутка. Синтаксис практично ідентичний, тільки посуньте трикутники вправо і переверніть їх.

.foldtr {
position: relative;
-webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
-moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
}
.foldtr:before {
content: «»;
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-right: 70px solid transparent;
-webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
.foldtr:after {
content: «»;
position: absolute;
top: 0%;
right: 0%;
width: 0px;
height: 0px;
border-top: 69px solid #272822;
border-left: 69px solid transparent;
}

Єдина річ, яка може вам тут перешкодити, це тіні, вам також потрібно їх перевернути, інакше візуальний ефект буде зруйнований. Картинка нижче показує, що я маю на увазі:

Створіть простий ефект загнутого куточка на CSS

Подивіться на цей ефект в дії

Тепер, коли ми закінчили, час протестувати наш код. Пам’ятайте, що псевдо елементи :before :after не будуть працювати належним чином в IE7 і більш ранніх версіях. Є можливості це виправити, використовуючи JavaScript, якщо вас це турбує.

Подивитися демо

Створіть простий ефект загнутого куточка на CSS

Оновлення

Ось у чому справа, коли ви працюєте над проектом як цей, вам здається, що все правильно, але коли ви повертаєтеся до нього пізніше, ви усвідомлюєте, що ви все зробили не так! І це те, що сталося тут. Після цієї публікації я помітив, що раз трикутник поділяє квадрат на 2 частини, то мені може зовсім не знадобитися псевдо елемент :after. Інформація вище вельми корисна для вивчення, тому я залишу її без змін, але нижче я наведу приклад того, про що кажу.

Все що потрібно, це встановити межі, що утворює другий трикутник не прозорий фон, а відразу колір фону підкладки, тоді ми відразу відрізаємо куточок за меншу кількість кроків.

.foldtl {
position: relative;
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
.foldl:before {
content: «»;
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-left: 70px solid #272822; /*Set to background color, not transparent!*/
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

Вік живи, вік учись. Завжди є сенс ще раз пройтися по вже написаному кодом і переконатися, що він написаний кращим чином. Іноді можна зробити дурні помилки. Не турбуйтеся, практично завжди є спосіб написати код краще і кожен раз, коли ви його знаходите, ви підвищуєте свої навички розробника.