Как сделать страницу с загнутым уголком в CSS :after и :before
Здравствуйте уважаемые начинающие веб-мастера.
Мы уже делали изогнутый блок с помощью псевдоэлементов :after и :before.
Вот ещё один оригинальный эффект, реализуемый с их помощью.
В этой статье мы научимся создавать страницу с загнутым уголком, без фотошопа, и помогут нам в этом псевдоэлементы :after и :before.
Код с комментариями. Этот код можно вставить в Notepad++, открыть картинку в браузере, и доработать размеры, цвета, и расположение уголка.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
/*Общий фон*/
body {
background: #4A8A91;
}
/*Страница*/
.blok {
background: #fff;
width: 250px;
height: 315px;
margin: 100px 0 0 200px;
}
/*Заголовок на странице*/
h1 {
padding: 75px 0 0 40px;
font-family: Arial;
}
/*Текст на странице*/
p {
padding: 0 0 20px 20px;
font-family: Arial;
font-size: 18px;
color: #4b4b4b;
}
/*Блок уголков*/
.reg {
position: relative;
box-shadow: 5px 5px 5px #4A8A91;
}
/*Верхний левый угол, сливающийся с фоном страницы */
.reg:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-top: 63px solid #4A8A91;
border-right: 63px solid transparent;
}
/*Видимый нижний правый угол*/
.reg:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-bottom: 65px solid #F7F7F7;
border-left: 65px solid transparent;
box-shadow: 1px 7px 7px #4A8A91;
}
</style>
</head>
<body>
<div class="blok">
<div class="reg">
<h1>Заголовок</h1>
<p>Здравствуйте уважаемые веб-мастера</p>
<p>Давайте сделаем страницу с загнутым уголком с помощью псевдоэлементов CSS</p>
</div>
</div>
</body>
</html>
В этом варианте есть один недостаток — это обязательный тёмный общий фон, так как тень под уголком, верхний левый угол, и общий фон, выполняются одним цветом.
И если общий фон под страницей будет задан в светлых тонах, то тень будет не видна.
Так что помимо размеров, поломайте голову, как устранить этот недостаток.
Желаю творческих успехов!
для блогов в самый раз
