Ciao amici di YCLAS! Questa settimana condividiamo alcuni consigli e buone idee per migliorare l'aspetto del tuo sito usando il codice CSS.
Devi sapere che l'aspetto del tuo sito determinerà se gli utenti e i clienti restano, o se ne vanno in cerca di un sito con un aspetto migliore.
Prima di tutto, devi attivare l'uso del CSS nel pannello del tuo sito; Clicca Qui per vedere come attivare e aggiungere CSS personalizzato su YCLAS.
Iniziamo!
Sfondo
Oggi, i migliori siti web usano sfondi sfumati, è un cambio di colore semplice e morbido, se usi quelli giusti il tuo sito assumerà uno stile moderno, qui hai 3 diversi sfondi moderni:
Gradiente #1 (Colori Pacifico)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Gradiente #2 (Colori Intensi)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Gradiente #3 (Colori Morbidi)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Font
Il font del tuo sito gioca un ruolo fondamentale, ti consigliamo di usare font Sans-Serif, come:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Questi sono font comodi per gli occhi.
Bordi degli elementi
Un altro consiglio è usare bordi arrotondati per gli elementi, questo rende il tuo sito semplice e moderno; per ottenerlo, usa questo codice:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Puoi modificare il colore (solid black) e il raggio (8px) del bordo.
Barra di navigazione
La barra di navigazione è una delle cose più importanti di un sito web. Una barra di navigazione ben fatta aiuterà gli utenti a navigare correttamente sul tuo sito. Ecco una Barra di Navigazione Sticky-Active/Current; farà muovere la tua barra di navigazione e la farà rimanere in alto in base alla posizione dello scroll:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Puoi cambiare i colori (Sfondo, Testo, e Collegamento Attivo/Corrente), e ridimensionare (Padding) la barra di navigazione.
Immagini Responsive
Immagini! Oggi le immagini sono essenziali in tutti i siti web, e siamo abituati a vederle ovunque; ma non basta metterle sul tuo sito, devi impostarle come immagini responsive per avere un aspetto migliore su qualsiasi dispositivo. Per ottenerlo, usa questo codice per tutte le immagini che vuoi rendere responsive:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
La X rappresenta l'URL dell'immagine, in IMG Width e IMG Height devi scrivere la dimensione originale dell'immagine.
Layout del sito
Bene, questa è la distribuzione degli elementi principali del tuo sito, per esempio l'Header; l'header è il primo elemento che qualsiasi utente vede quando entra nel sito, quindi deve essere facile da capire e semplice. Ecco un codice CSS per un header con immagine e testo:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
La X rappresenta l'URL dell'immagine, in Padding puoi impostare la dimensione dell'immagine dell'header, e in Header Text puoi scrivere ciò che vuoi mostrare sopra l'immagine dell'header.
Un altro elemento principale del tuo sito è il Footer, posizionato in fondo alla pagina, importante quanto l'header. Puoi usare questo codice per un footer con un bell'aspetto:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Puoi cambiare il colore e la dimensione (padding) del footer.
CSS moderno nel 2026: cosa è cambiato da questi consigli
Gli snippet sopra mostrano ancora le idee di base, ma il CSS si è evoluto molto da quando è stato scritto questo articolo. I browser oggi condividono una base comune di funzionalità, e il tema su cui funziona il tuo sito decide quali selettori il tuo CSS può colpire. Ecco cosa sapere prima di incollare qualsiasi cosa nel tuo CSS personalizzato.
Verifica il supporto dei browser con Baseline
Baseline, definito dal W3C WebDX Community Group, etichetta una funzionalità come "appena disponibile" (newly available) una volta che funziona in tutti i browser principali (Chrome, Edge, Firefox e Safari, su desktop e mobile). Diventa "ampiamente disponibile" (widely available) 30 mesi dopo, quando la maggior parte dei siti può usarla senza preoccuparsi dei browser più vecchi. MDN mostra lo stato Baseline in cima a ogni pagina di riferimento. Queste sono le funzionalità che sostituiscono la maggior parte degli espedienti descritti sopra:
| Invece di... | Usa oggi | Stato Baseline (MDN) |
|---|---|---|
| Ripetere colori hex in ogni regola | Proprietà personalizzate CSS (variabili), ad es. var(--nova-accent) | Consolidata da tempo |
| Scegliere a mano le tonalità per il hover | color-mix(), ad es. l'accento mescolato con il 18% di nero | Ampiamente disponibile (in tutti i browser principali da maggio 2023) |
| Classi extra o JavaScript per stilizzare un elemento genitore | :has(), ad es. form:has(:invalid) button { opacity: .6; } | Ampiamente disponibile (in tutti i browser principali da dicembre 2023) |
| Selettori lunghi e ripetuti | Nesting CSS con & | Ampiamente disponibile (in tutti i browser principali da dicembre 2023) |
| Media query legate alla larghezza dello schermo | Container query (@container), così una card si adatta alla colonna in cui si trova | Ampiamente disponibile (in tutti i browser principali da febbraio 2023) |
Elementi di menu con float (li { float: left; }) | Flexbox: display: flex; gap: 8px; | Consolidata da tempo |
Parti dal tuo tema, non da una pagina vuota
L'attuale guida di Yclas attiva il CSS personalizzato in Design > CSS personalizzato, con l'interruttore "Usa CSS personalizzato". Avvisa anche che i nomi delle classi variano tra i temi, quindi una regola scritta per un tema potrebbe non fare nulla dopo un cambio di tema. Selettori generici come #grad o ul non fanno nulla oppure restilizzano ogni elenco del sito, quindi punta sempre alle classi che il tuo tema usa davvero (clicca con il tasto destro su un elemento e scegli Ispeziona nel tuo browser per trovarle).
I nuovi siti Yclas usano il tema Nova, costruito su variabili CSS. Per cambiare il colore principale, usa l'impostazione del colore d'accento nelle opzioni del tema invece del CSS: pulsanti, link ed evidenziazioni lo seguono tutti, e la tonalità per il hover viene calcolata automaticamente. Per altre modifiche, sovrascrivere una variabile è più sicuro che riscrivere le regole, perché una riga cambia ogni elemento che la usa:
:root {
--nova-radius: 10px; /* card e pulsanti più arrotondati o più squadrati */
--nova-radius-sm: 6px;
}
Altre due regole ti terranno fuori dai guai. Il campo del CSS personalizzato accetta solo CSS, quindi non includere i tag <style>, <head> e altri tag HTML mostrati in alcuni snippet sopra. E controlla ogni modifica anche su un telefono, oltre che su un computer, prima di salvare.
Prova questi consigli e facci sapere se funzionano per te!
Nota: l'uso del codice CSS richiede alcune competenze ed esperienza, se non hai mai usato il CSS ti consigliamo di usare alcuni Tutorial CSS e Guide CSS per ottenere ciò che stai cercando. Se non vuoi usare il CSS, puoi usare i nostri temi, offriamo una varietà di template personalizzati per il sito Clicca Qui Per Vederli.
Cordiali saluti,
Il team YCLAS.
