Loading
Condividi
Contattami
Scroll verso il basso
//Logo Netflix in codice Html e CSS

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 😀

 

  • 781 views
  • 0 Commento

Leave a Reply

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Categorie 02.

Ogni articolo equivale a 2 ore di lavoro

Chi sono 03.

Alessandro Albergo
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

Privacy & Cookie Policy  | © Alessandro Albergo 2022 | Theme created and designed with   by AA.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

 

Contattami
Chiudi
DutchEnglishFrenchGermanItalianSpanishSwedish