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 і отримуємо наступне
Як бачите, все вже майже готове, але нам заважає маленький незогнутий трикутник. Що ж робити? А виправити це дуже просто. За допомогою : before ми створюємо такий же за розмірами куточок і заливаємо білим кольором, тобто кольором нашої сторінки. Якщо у вас сторінка, наприклад, зеленого кольору, то не забудьте поміняти колір на зелений і в : before.
Ось така ось проста стаття, але, спираючись на неї, ви тепер можете зробити класний ефект загнутого куточка, який ви часто можете бачити на різних сайтах. Дякую за увагу і удачі!
- Синій екран смерті 0x000000fe
- Синій екран смерті 0x00000120
- Як створити "вислизати" меню на css.
- Як зробити слайдер на чистому css3 без використання jаvascript.
- Як зробити тінь на css
- Як зробити аккордіон на чистому css3.
- Як зробити вигнуту тінь на чистому css3.
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як зробити трикутники на чистому css.
- Nodejs. Як створити "список справ". Частина 1.
- Як зробити фотографію з вашої веб-камери на jаvascript.
- Підменю на css
- Драйвера для андроїд пристроїв
- Множинні фони в css3.
- Закруглені кути через css
- Чуйний "липкий" підвал сайту.
- Коментарі у вигляді бульбашки.
- Верстаємо круглі кнопки на css3.
- Закруглені кути на css3.
- 10 Корисних sass міксини.
- Приклади тіней на css.