Как создать эффект наложения с помощью CSS
Есть несколько способов создания наложений. В этой статье мы покажем, как создать наложение с помощью CSS свойств.
Один из способов создания такого эффекта является абсолютное позиционирование HTML элемента на странице. Необходимо в разметке создать div, потом абсолютно позиционировать его с помощью свойства position, и дальше с помощью свойства z-index задать для div высокий z-index, чтобы он находился поверх всех остальных элементов страницы. Мы зададим более высокий z-index для следующего элемента div, которое откроется сверху наложения.
- Создайте два элемента div с классами "overlay" и "modal".
- Добавьте стиль к классу "overlay".
Для position задайте значение absolute, а z-index установите в 10.
<div class="overlay"></div>
<div class="modal"></div>
.overlay{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
- Добавьте стиль к "modal".
Здесь мы устанавливаем свойство position в fixed а z-index в 11, на 1px выше, чем слой наложения.
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
- Also, set style the body.
Мы устанавливаем position в значение relative.
body{
position: relative;
padding: 20px;
margin:0;
min-height:100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
И так, мы создали наложение. Давайте посмотрим результат!
Пример
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
body{
position: relative;
padding: 20px;
margin:0;
min-height:100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.6);
}
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<h2>Создание наложения с абсолютно позиционированным элементом</h2>
<div class="overlay"></div>
<div class="modal">Lorem Ipsum - это текст-"рыба" </div>
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</body>
</html>
Мы также можем создать наложение при помощи селекторов ::before и ::after.
Стили и решения этого метода во многом похожи на предыдущий. Только здесь необходимо добавить стиль к псевдоклассам ::before и ::after.
Пример
<!DOCTYPE html>
<html>
<head>
<title>overlay div</title>
<style>
body{
position: relative;
padding: 20px;
margin:0;
min-height:100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}
body :after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.3);
}
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<h2>Создание наложения с абсолютно позиционированным элементом</h2>
<div class="modal">Lorem Ipsum - это текст-"рыба"</div>
<div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</body>
</html>