Personalizzazione Di Brandguide Utilizzando Css – Getty Images Media Manager

Benvenuto nella nuova esperienza di Brandguide! Questo articolo, così come Per iniziare con Brandguide eBrandguide Building and Styling ti guideranno attraverso come migrare i tuoi contenuti alla nuova esperienza. Le funzionalità di modifica sulla tua Brandguide esistente andranno via il 1 settembre 2023. Il 1 dicembre 2023 l'editore di Brandguide ereditato non sarà più disponibile.

CSS o “Cascading Style Sheets” è un linguaggio di design che viene utilizzato dagli sviluppatori web per creare un aspetto uniforme e visivamente piacevole attraverso diverse pagine di un sito web. HTML determina in gran parte il contenuto testuale, ma CSS determina la struttura, il layout e l'estetica del sito web.

CSS Syntax

La sintassi CSS consiste in un insieme di regole. Queste regole hanno 3 parti: un selettore, una proprietà e un valore.

Selector {
property: value;
}

Il selettore rappresenta l'elemento HTML che vuoi stile. La proprietà si riferisce ad un aspetto specifico dell'elemento HTML come colore, font-family o margine. Ogni proprietà utilizzata nel CSS ha un insieme di valori accettati, ad esempio un codice esadecimale o un valore in pixel.

Il selettore può avere più proprietà e coppie di valori che sono separati da semi-coloni. Ad esempio, i seguenti applicheranno i valori indicati delle proprietà a tutti i tag h1:

h1 {
font-family: comic sans;
font-size: 12px;
color: blue;
}

Selettori CSS Comuni

Selettore Tipo CSS

Il selettore di tipo CSS seleziona tutti gli elementi di un tipo specifico all'interno della pagina web.

Ecco alcuni esempi di selettori di tipo comuni:

p: Seleziona tutti i tag di paragrafo.
a: Seleziona tutti i collegamenti ipertestuali.
h1: Seleziona tutti i tag dell'intestazione h1.
span: seleziona tutti i tag di calibrazione.
corpo: Seleziona tutti gli elementi all'interno del corpo della pagina web.
pulsante: seleziona tutti i pulsanti sulla pagina web.
li: Seleziona tutti gli elementi dell'elenco.

Selettore Classe Css

Una classe CSS è un attributo usato per definire un gruppo di elementi HTML. Ciò consente di personalizzare più elementi utilizzando un singolo selettore. Possiamo farlo digitando un carattere di periodo (.) davanti al nome della classe nel nostro CSS. Ad esempio, per modificare il carattere dell'intestazione del campione e il paragrafo seguente:

<h1 class="i-am-a-class">header
paragrafo

Useremmo il seguente CSS per colpire tutti gli elementi con una classe di i-am-a-class:

.i-am-a-class {
font-family: helvetica;
}

Selettore ID CSS

Un ID CSS è un attributo utilizzato per definire un singolo elemento univoco sulla pagina web. Per selezionare un elemento con un id specifico, digitare un simbolo di hash (#) davanti all'id. Ad esempio, per modificare il carattere del paragrafo seguente:

paragrafo

Utilizzeremmo il seguente CSS per mirare solo l'elemento con un id di i-am-an-id:

#i-am-an-id {
font-family: helvetica;
}

CSS Properties

Proprietà testo

font-family: Set the text font e.g."Arial" or "Times"
font-size: Imposta la dimensione del carattere ad es.5px o 1em
font-weight: Imposta il peso del carattere o "audacia" es."grassetto" o 200
color: Set the color of the text e.g.blue, #add8e6 or rgb(135,206,250)
line-height: Vertical space between lines e.g.5px or 1em
letter-spacing: Space between characters e.g.5px or 1em
word-spacing: Space between words e.g.5px or 1em

Proprietà sfondo

background-color: Set the element background color e.g.blue, #add8e6 or rgb(135,206,250)
background-image: Imposta un'immagine di sfondo basata sull'url e.g. url('sample-image.jpg')
background-position: Imposta la posizione di partenza di un'immagine di sfondo, ad esempio center o 50%

Proprietà Spaziatura

Le seguenti proprietà accettano auto, inherit, % o qualsiasi unità di lunghezza CSS

height: Imposta l'altezza dell'elemento
width: Imposta la larghezza dell'elemento
padding: Imposta lo spazio di riempimento dell'elemento
margin: Imposta lo spazio margine dell'elemento

Lunghezza e unità

px: Pixel (1px = 1/96 di 1 pollici)
em: Relativo alla dimensione del carattere dell'elemento (3em = 3 volte la dimensione del carattere corrente)
vw: Relativo all'1% della larghezza della vista
vh: Relativo all'1% dell'altezza della vista
%: Relativo all'elemento padre

Trovare Elementi Utilizzando Chrome DevTools

Chrome DevTools è una serie di strumenti di sviluppo web integrati direttamente nel browser Google Chrome. Possiamo utilizzare questi strumenti per individuare rapidamente elementi HTML e stili CSS esistenti su qualsiasi sito web.

1. Per accedere a DevTools, è possibile fare clic con il pulsante destro del mouse sulla pagina e selezionare "Ispeziona", o utilizzare comandi brevi come Comando + Opzione+C (Mac) o Controllo+Maiusc+C (Windows, Linux, Chrome OS).

2. Una volta aperto il pannello DevTools, selezionare lo strumento Ispezione nella parte superiore della pagina.

3. È quindi possibile fare clic sull'elemento sulla pagina che si desidera stile. I selettori che possono essere usati per personalizzare questo elemento verranno evidenziati sotto la scheda elementi. La scheda Stili qui sotto rivelerà le regole di stile CSS che sono attualmente applicate a quell'elemento.

4. In questo esempio cambieremo il colore del collegamento di navigazione a #6b646b utilizzando la classe "nav-link" che abbiamo trovato utilizzando l'ispettore DevTools. Aggiungeremo anche il "! mportant" proprietà fino alla fine della dichiarazione di sovrascrivere tutto lo stile precedente per quella proprietà sull'elemento.

5. Una volta che il CSS è stato aggiornato e le modifiche sono state salvate, vedrai che il colore del testo di navigazione è cambiato a #6b646b:

Aggiungere Caratteri Di Terze Parti

@font-face è una regola CSS che ti dà la possibilità di importare e utilizzare caratteri di terze parti sulla tua Brandguide. Ti consigliamo di aggiungere il tuo carattere tramite CSS al livello globale di impostazione (al contrario del livello di blocco).

Puoi aggiungere un carattere di terze parti in due modi.

Copia e incolla un URL

La prima opzione è quella di navigare nella libreria di caratteri scelta e selezionare il carattere che si desidera aggiungere alla vostra Brandguide e copiare e incollare l'url. Questo processo è descritto di seguito.

Syntax

Puoi copiare la sintassi qui sotto e aggiungerla alla sezione CSS personalizzata della tua Brandguide. Questo è l'unico CSS che dovrai importare il carattere. Per importare un tipo di carattere diverso, è sufficiente modificare la famiglia di caratteri, l'URL sorgente e il formato in quello del tipo di carattere scelto.

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

Trovare l'URL e il formato del carattere:

1. Passa alla tua libreria di caratteri scelta e seleziona il carattere che vuoi aggiungere alla tua Brandguide. Nel nostro caso, stiamo per selezionare "Soddisfy" da Google Fonts.

2. Una volta selezionato, dovrai copiare e incollare l'URL @import in una nuova scheda del browser.

3. Questo ti porterà a una pagina contenente l'URL e il formato necessari per importare il carattere nella tua Brandguide.

4. Copiare l'URL src e incollarlo nel codice @fontface insieme alla famiglia di caratteri. Quindi incolla il codice nella casella CSS. Le tue modifiche verranno automaticamente aggiornate.

Seleziona Aggiorna CSS per salvare le modifiche.

Il carattere appena importato popolerà nel menu a discesa Tipo predefinito nel flyout Impostazioni globali.

Conversione del carattere in formato WOFF o WOFF2

La seconda opzione di tipo personalizzato è quella di convertire il carattere in un formato woff o woff2. Questo è un formato di carattere web che è più compatibile per i browser rispetto ai formati di file di testo ttf/otf. Questo processo è descritto di seguito.

Caratteri Proprietari

1. Converti il carattere in un formato woff o woff2. Questo è un formato di carattere web che è più compatibile per i browser rispetto ai formati di file di testo ttf/otf.

2. Carica il carattere in una sezione file all'interno della Libreria.

3. Aprire l'asset, passare alla scheda incorporata e selezionare Copia collegamento.

4. Vai al flyout delle impostazioni globali. Puoi copiare la sintassi qui sotto e aggiungerla alla sezione CSS di Global Settings flyout. Questo è l'unico CSS che dovrai importare il carattere. Per importare un tipo di carattere diverso, è sufficiente modificare la famiglia di caratteri, l'URL sorgente e il formato in quello del tipo di carattere scelto. Una volta che la sintassi viene introdotta, le modifiche verranno salvate.

@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}

5. I caratteri importati in questo modo non risulteranno nella visualizzazione a discesa del tipo di carattere predefinito. Invece, dovrai applicare manualmente il carattere all'interno della sezione CSS. Di seguito è riportato un esempio di applicazione del carattere Bold Web ai tag di paragrafo importati.

p {
font-family: 'boldweb';
color: #333;
}

Aggiunta Video

Puoi aggiungere un video alla tua Brandguide seguendo questi passaggi:

Aprire la modalità asset per il video.
Vai alla scheda Incorpora.
Individuare il codice di inserimento video e selezionare Copia collegamento.
Incolla il codice nel blocco HTML.