Здравствуйте уважаемые начинающие веб-мастера.
Мы уже делали изогнутый блок с помощью псевдоэлементов :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>
В этом варианте есть один недостаток — это обязательный тёмный общий фон, так как тень под уголком, верхний левый угол, и общий фон, выполняются одним цветом.
И если общий фон под страницей будет задан в светлых тонах, то тень будет не видна.
Так что помимо размеров, поломайте голову, как устранить этот недостаток.
О том, как сделать изогнутые блоки, применяя псевдоэлементы :after и :before читайте в статье Как сделать тень для текста, картинки, блока.
Желаю творческих успехов.
Перемена
Режиссёр актёру:
-Изобрази в глазах скрытую радость.
-Не то. Представь, что у соседа собака сдохла.
-Ну нет,перебор! У тебя на целых три собаки, или даже на тёщу тянет.
«Что-то у меня сегодня суицидное настроение» — подумал админ, и забанил сам себя.
Как сделать красивую заглавную букву CSS < < < В раздел > > > Как добавить фрагмент текста в CSS
Что такое псевдо-элемент CSS;
Как сделать тень для текста, картинки, блока;
Как добавить фрагмент текста в CSS;
Вот тут прокрутка , а вот тут код готового сайта на чистом html, и там же в меню после статьи код сайта на php и код блочного сайта.
Здравствуйте, я учусь на программиста и как раз проходим Web-программирование. Особого обучения нет, просто «бросили в воду» и сказали чтобы выплывали сами. Нужно создать сайт, потихоньку с этим продвигаюсь, но на вашем сайте нашел нужную мне функцию. Поле, в котором написаны коды, которые еще мотать можно вверх-вниз. Можно узнать как это сделать? Пожалуйста…
Вы уж как то мудрёно спрашиваете. По простому, :after создал верхний синий треугольник (под цвет фона), а :before нижний треугольник с тенью (под цвет страницы). :after и :before создают псевдоэлементы (треугольники) в начале и в конце блока reg, которые позиционируются абсолютно. Вот и всё.
Про то как создаются треугольники через CSS, лучше всего показано здесь
Понятно, что after и before сформировали контент спозиционированный абсолютно, но не понятно, что сделало диагональный скос? Если можно объясните, пожалуйста.