<div class="poster">
<div class="poster__text">
<h1 class="destination" data-place="new york">New York</h1>
<span class="destination" data-place="new york" aria-hidden="true">New York<span>
</div>
</div>
$text-c: #fefefe;
.poster {
position: relative;
height: 100vh;
overflow: hidden;
&::before,
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&::after {
background: linear-gradient(135deg, saturate(#a83c97, 30%) 40%, saturate(#ca3f7b, 40%) 40%) no-repeat;
}
@supports (mix-blend-mode: darken) {
&::before,
&::after {
filter: contrast(2) brightness(.8);
}
&::before {
background: url('https://unsplash.it/1300/1200?image=818') no-repeat center center / cover;
}
&::after {
background: linear-gradient(135deg, #db2797 40%, #b04c72 40%) no-repeat;
mix-blend-mode: darken;
}
}
@media screen and (min-width: 600px) {
width: 65vh;
height: 92vh;
margin: 4vh auto;
border: 2vmin solid #fefefe;
box-shadow: 0 10vh 20vh -10vh rgba(0, 0, 0, .5);
}
}
// text container
.poster__text {
position: relative;
z-index: 1;
opacity: .9;
transform-origin: bottom right;
transform: rotate(-15deg) translate(-10%, -50%);
}
// base text
.destination {
position: relative;
display: block;
margin: 0 4vmin 0 0;
font-size: 8vmin;
text-align: right;
font-weight: bolder;
text-transform: uppercase;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-moz-text-stroke-color: $text-c;
-webkit-text-stroke-color: $text-c;
-moz-text-stroke-width: .025em;
-webkit-text-stroke-width: .025em;
&::before,
&::after {
content: attr(data-place);
position: absolute;
right: 0;
}
&::before {
top: 90%;
}
&::after {
top: 180%;
}
}
h1.destination {
top: 50vmin;
}
span.destination {
top: 8vmin;
// text with fill
&::after {
text-shadow: 0 1em $text-c;
}
}
* { box-sizing: border-box; }
body {
background-color: #1b0c37;
color: $text-c;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.