netflix Archivi - Alessandro Albergo https://alessandroalbergo.it/tag/netflix/ Alessandro Albergo, sviluppatore - Frontend e Backend - Bari - Realizzazione siti web Tue, 14 Dec 2021 19:58:32 +0000 it-IT hourly 1 https://wordpress.org/?v=7.0 https://alessandroalbergo.it/wp-content/uploads/2021/03/cropped-aa-giallo-32x32.png netflix Archivi - Alessandro Albergo https://alessandroalbergo.it/tag/netflix/ 32 32 Logo Netflix in codice Html e CSS https://alessandroalbergo.it/logo-netflix-in-codice-html-e-css/ https://alessandroalbergo.it/logo-netflix-in-codice-html-e-css/#respond Sat, 03 Apr 2021 13:23:09 +0000 https://alessandroalbergo.it/?p=3033 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..

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

]]> 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 😀

 

L'articolo Logo Netflix in codice Html e CSS proviene da Alessandro Albergo.

]]> https://alessandroalbergo.it/logo-netflix-in-codice-html-e-css/feed/ 0