Hero images
Een Hero-image met een koptekst er overheen. Het plaatje staat in de background van een div. De hoogte van de div kan op 100vh. Die vh betekent "percentage van de viewport". De breedte kan gewoon op 100%. Met background-size:cover vult het plaatje de div in de juiste verhouding.
In de HTML staat het volgende:
<body> <div class="hero"> <h1>another hero</h1> </div>
<div class="main">
blabla
</div>
En in de CSS:
.hero {
background:url(images/bg.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
height:100vh;
padding:55vh 0 0 0;
margin:0;
}
.hero h1 {
text-align:center;
border:2px solid white;
color:white;
margin:0 auto;
width:50%;
min-width:300px;
padding:20px;
height:20vh;
}
.main {
margin:0 25% 100px 25%;
}
Fade effect
De fade is een css-animatie. Aan de body is de eigenschap animation: fade 2s; toegevoegd. fade is een zelfgekozen woord dat met keyframes wordt gedefinieerd. Zie de lessen op aartjan.nl
body {animation: fade 2s;}
@keyframes fade {
from {opacity: 0} to {opacity: 1}
}
Responsive maken
Het geheel kan nog verder responsive worden gemaakt, in dit voorbeeld met deze code, onderaan toegevoegd:
@media screen and (max-width:700px) {
.main { margin:0 5% 100px 5%; }
.hero h1 { width:70%; }
.hero {
height:200px;
margin:0;
padding:80px 0 0 0;
}
}
In dit voorbeeld hierboven is een tweede transparante overlay (met die streepjes) over het plaatje gezet, zodat witte tekst over wit beeld ook leesbaar blijft:
.hero {
background:url(images/bg.png), url(images/bg.jpg);
background-repeat:repeat, no-repeat;
background-size:6px 6px, cover;
background-position:center center;
background-attachment:fixed;
height:100vh;
padding:55vh 0 0 0;
margin:0;
}
.hero h1 {
text-align:center;
border:2px solid white;
color:white;
margin:0 auto;
width:50%;
min-width:300px;
padding:20px;
}
.main {
margin:0 25% 100px 25%;
}