<h1>MIAMI</h1>
:root {
--stroke-color: hsl(311, 75%, 74%);
--background-color: hsl(184, 93%, 62%);
}
@font-face {
font-family: Gluten;
src: url("fonts/Gluten-VariableFont.ttf");
font-display: block;
}
body {
display: grid;
place-items: center;
width: 100%;
height: 100vh;
background-color: var(--background-color);
margin: 0;
}
h1 {
width: min-content;
margin: 0;
font-size: clamp(5rem, 23vw + -0.1rem, 15rem);
letter-spacing: 0.75rem;
font-family: Gluten, Grandstander, cursive;
color: transparent;
-webkit-text-stroke: var(--stroke-color) 0.2rem;
-webkit-background-clip: text;
background-clip: text;
background-image: url("img/miami.jpg");
background-position: center;
background-size: cover;
filter: brightness(1.1) drop-shadow(-2px -2px 0.2rem var(--stroke-color))
drop-shadow(2px 8px 0.2rem var(--stroke-color));
}
What is this? Miami Beach? 🦩👀
The word Miami is written in a bubble-shaped typeface. The text has a pink stroke and is filled with an image of beach scene. The letters have slight repeating shadows that gives them the appearance of an atoll.
Two non-standard properties are required to achieve this: -webkit-background-clip
and -webkit-text-stroke
. The drop-shadow()
filter function is used for the shadows.