Dog ear effect, або ефект загнутого куточка на css.

Відео: Загорнутий кут на фото / УРОКИ PHOTOSHOP

Всім привіт. Сьогодні я покажу, як зробити так званий Dog Ear Effect. Як це виглядає, ви можете бачити на зображенні до статті.

Отже, для початку напишемо структуру html. Вона у нас буде дуже проста: блок з 2 класами і стилі підключимо.

Відео: Загнутий куточок на зображенні

 
lang="En"gt; 




 
charset="UTF-8"gt; 
Dog Ear Effect 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Box dog-ear"gt;Тут якийсь довгий текст в нашому блоці ...

html структура написана. Можна перейти до файлу style.css

.box { 
 position: relative- 
 background:# edeff0- 
 width:180px- 
 height:180px- 
 padding:20px- 
 border-radius:5px- 
 border-bottom:4px solid # ccc- 
 margin:20px- 
} 
 
.dog-ear:before, 
.dog-ear:after { 
 content:``- 
 display: block- 
 right:0- 
 top:0- 
 position: absolute- 
} 
 
.dog-ear:after { 
 border-top:20px solid transparent- 
 border-left:20px solid rgba(0,0,0,.8) - 
} 
 
.dog-ear:before { 
 border-bottom:20px solid transparent- 
 border-right:20px solid # fff- 
}

Код досить прозорий, але трохи пояснити, думаю, варто.

Стилі, які застосовані до класу .box, просто задають оформлення нашого блоку. Ось, що виходить

блок

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

Тепер задаємо окремо стиль для : after. За допомогою border ми створюємо трикутник, заливаємо його чорним кольором з прозорістю .08 і отримуємо наступне

блок 2

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

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

Поділися в соціальних мережах:

Схожі