Logo Netflix in codice Html e CSS
Ciao, oggi ho deciso di condividervi il codice html e css per riprodurre appunto il logo di Netflix. Creazione in 5 minuti .
Ultimamente, dopo aver visto alcuni video da cui ho preso ispirazione, ho pubblicato un post su Instagram in cui provavo a replicare il logo di Netflix in codice html e css.
Il risultato finale del logo era davvero molto simile a quello originale del famigerato marchio cinematografico, infatti ne sono rimasto così sodisfatto da creare un video e ora condividere tutto il necessario per poterlo riprodurre.
PS: Per visualizzare il post pubblicato su instagram clicca qui.
Bene, come al solito ho cercato di ridurre tutto in pochi passaggi e rendere la guida facile facile, quindi vediamo subito come creare il codice html e css per riprodurre appunto il logo di Netflix.
Iniziamo con l’html, ti basterà creare un file con il blocco note, inserire bil codice riportato e salvarlo con estensione html (nomefile.html) dentro una cartella:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Netflix Logo</title>
</head>
<body>
<div class="logo">
<div class="netflix">
<span></span>
<span></span>
<span></span>
</div>
<h3>Netflix</h3>
</div>
</body>
</html>
Adesso all’interno della stessa cartella, creiamo un altro dile chiamato style.css e incolliamoci il seguente codice:
body{
margin: 0;
padding: 0;
display: flex;
justify-content: centet;
align-items: center;
background: black;
height: 100vh;
}
h3{
color: white;
position: absolute;
margin: 0;
padding: 0;
text-align: center;
font-size: 60px;
text-transform: uppercase;
font-family: arial;
letter-spacing: 12px;
font-weight: 800;
}
.netflix{
position: relative;
width: 350px;
height: 500px;
}
.netflix span{
position: absolute;
top: 0;
width: 120px;
height: 100%;
}
.netflix span:nth-child(1){
background: #b00612;
left: 0;
}
.netflix span:nth-child(2){
background: #e50810;
left: 0;
transform-origin: top;
z-index: 1;
transform: skewX(25deg);
box-shadow: 0 0 40px rgba(0,0,0,1);
}
.netflix span:nth-child(3){
background: #b00612;
right: 0px;
}
Salviamo tutte le modifiche. Ora aprendo il tuo file .html con Chrome o con Firefox, vedrai il logo creato! Ricordati di lasciare i file in una cartella, altrimenti dovrai cambiare il path del foglio di stile (.css).
Ti è piaciuto questo articolo ? 🙂
Lasciami un commento per farmelo sapere 😀
- 830 views
- 0 Commento
Ogni articolo equivale a 2 ore di lavoro
Chi sono 03.
Alessandro Albergo
Dopo le mie precedenti esperienze lavorative per alcune aziende in Italia e all’estero, decisi di intraprendere il percorso che da sempre mi affascinava e quindi seguire le miei passioni.
Segui la pagina Instagram per non perdere le news