Нужно сделать будто текст обрезан фоном, каким методом лучше это реализовать?
4
-
1а что вы уже попробовали? – michael_best 31 окт '18 в 18:39
-
Общую идею посмотрите тут, ничего сложного. Второй вариант с помощью Photoshop, что тоже очень просто. Делать не буду, напраления мысли достаточно. – user262779 31 окт '18 в 18:45
-
Я бы вырезал планету из макета вместе с эффектом и позиционировал над текстом, возможно понадобится z-indexю Или же как вариант поигрался бы с linear-gradient на тексте – SimaDmtr 31 окт '18 в 20:48
-
пример - jsfiddle.net/soledar10/rb2ko93s – soledar10 1 ноя '18 в 5:57
добавить комментарий
|
2 ответа
Как например и наглядный пример к общим рекомендациям и ответам (использовать слои из фона, текста и самой планеты):
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.box {
background: #000 url(https://coubsecure-s.akamaihd.net/get/b106/p/coub/simple/cw_timeline_pic/ff77a61c166/daf19b6c402918c47de82/big_1473285305_1382492342_image.jpg) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.box-inner {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 10px 10px;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
color:#fff;
font-family: sans-serif;
}
.box h1 {
text-transform: uppercase;
margin: 10px 0px;
}
img {
max-width: 100%;
width: 100%;
}
.mars {
position: absolute;
z-index: 3;
right: -10px;
bottom: -50%;
width: 70%;
}
.mars img {
display: block;
position: relative;
float:right;
z-index: 3;
}
.mars:after {
content:'';
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
right: 10px;
bottom:10px;
box-shadow: -25px -25px 300px #fd3001;
border-radius: 50%;
}
<div class="box">
<div class="box-inner">
<h1>Путешествие</h1>
<span>на красную планету</span>
</div>
<div class="mars">
<img src="https://vignette.wikia.nocookie.net/elderscrolls/images/a/a3/TESBloodmoonIcon.png/revision/latest?cb=20151229100452&path-prefix=it" alt="">
</div>
</div>
Несколько вариантов есть:
Картинка
Ну думаю понятно, просто это всё добавить картинкой.
Слой и градиент
первый слой - фон, второй слой - текст, третий слой планета. И на второй слой, текст, мы добавляем градиент.. Но получается, что текст будет svg'ный.
Снова слои
Такие же слои как и во втором варианте, только без градиента на тексте.
Градиент будет идти уже от слоя планеты, т.е. градиент будет поверх текста.