-
.
ottimo tutorial ye, potrà essere d'aiuto a molti utenti! -
.
Un nuovo layout
Layout ≠ Skin
La prima domanda che a questo punto potresti farti è la seguente: cos'è un layout? Qual è la differenza tra skin e layout? Che cosa cambia nel Colori e Stili?
La risposta è: tutto e niente. Il Colori e Stili rimane invariato, le istruzioni che stanno alla base sono sempre le stesse. Ma ciò che preme farti sapere è la differenza tra skin e layout.- La skin è la pelle. Viene realizzata tramite codice CSS ed è fondamentale per rivestire la base, lo scheletro stesso della pagina. È il famoso contenuto del Colori e Stili;
- Il layout è l'ossatura. Viene realizzato tramite codice HTML ed è fondamentale per creare la base su cui rivestire. Nel circuito abbiamo campi piuttosto limitati di HTML, questo perché il circuito e il suo staff preferisce mantenere una base uguale per tutti.
Da questo puoi dedurre che il codice HTML nasce per descrivere la struttura di una pagina, mentre il codice CSS nasce per determinarne l'aspetto. L'HTML da solo sarebbe come un uomo senza pelle, statico, privo di un rivestimento. Il CSS da solo sarebbe come un uomo senza ossa, flaccido, privo di un sostegno. Per questo è fondamentale che i due codici uniscano le proprie forze per formare un tutt'uno chiamato sito (forum in tal caso).Tabelle? Siamo nel ventunesimo secolo!
Chiarito ciò, la domanda diventa un'altra: perché un nuovo layout?
La risposta è: per evolversi. Per adeguarsi agli standard del giorno d'oggi. Per stare al passo coi tempi. Il vecchio layout - che sarà sempre disponibile - presenta una struttura ormai obsoleta. Realizzata anni fa per basi css2 e html meno elaborato. È quindi chiaro che il circuito cerchi di soddisfare le esigenze dell'utente e dello skinner, offrendogli qualcosa di nuovo.
Appunto per questo si è passati da una struttura tabellare, che sfrutta il tag table, ad una struttura ad elenchi, che sfrutta il tag ul insieme al tag div, il division block per eccellenza.
Per fare un esempio pratico. Questa è una riga sezione con struttura tabellare (vecchio layout):HTML<table>
<tr id="fID"><td class="aa"><div class="icona_on"></div></td><td class="bb"><div><h2 class="web"></h2><div class="desc"></div></div></td><td class="xx"></td><td class="yy"></td><td class="zz"></td></tr>
</table>
Mentre questa è una sezione ad elenchi (nuovo layout):HTML<ul>
<li id="fID" class="off"><div class="aa"></div><div class="bb"><h3 class="web"></h3><h4 class="desc"></h4></div><div class="yy"><div class="topics"></div><div class="replies"></div></div><div class="zz"><div class="when"></div><div class="where"></div><div class="who"></div></div></li>
</ul>
come anche potrai notare sono state aggiunte nuove classi.Div... agare
In un rapido excursus intendo anche darvi alcune delle caratteristiche più importanti del tag div e del tag ul.- Il tag div è un tag Division Block, a dimostrazione del fatto che tutto ciò che lo segue va direttamente a capo. Il vantaggio sta di fatto nel contenuto, che appartiene ad un unico blocco, diversamente dal tag table che seziona il blocco e ne divide il contenuto in parti uguali. Può essere posizionato ovunque, perché sarà il codice CSS a definirne le caratteristiche, evitando quindi l'inserimento di ulteriori tag;
- Il tag ul è importante perché garantisce un sistema ordinato e funzionale come table, con il vantaggio di fornire una duttilità di gran lunga superiore rispetto alla controparte in celle.
Responso
Il responso è senza dubbio positivo. Un sistema strutturale migliore e più curato, una maggiore libertà di agire, nuove classi e un concept improntato al moderno. Come per ogni cosa nuova, però, bisogna imparare e farci l'abitudine.« Lezione Precedente - Lezione Successiva »
Edited by .|Ye|. - 7/2/2012, 17:06 -
.
lo fai apposta?
ti ho pure risposto, ogni tanto leggere il regolamente non farebbe male -
.
Utilizzare font non installati negli altri computer - @font-face
IntroPremetto che il codice non è compatibile con ForumFree
Il codice è ora compatibile
Spesso ci si chiede quale font usare dato che per assicurare la compatibilità con tutti i computer la gamma di font si restringe moltissimo.
Tutto ciò è acqua passata grazie ad un'utilissima funzione del CSS3 che ci consente di utilizzare font non presenti nei computer altrui (e farli visualizzare correttamente come vorremmo noi!).
Ecco un esempio che vi fa rendere l'idea per bene: link
Come potete vedere il font che ho utilizzato per scrivere "Provaaaaaa" non è uno dei font standard come Times New Roman o Courier New ma bensì l'"Aikelso".
Preparazione
Per inserire un font non presente nei computer altrui e farlo visualizzare abbiamo bisogno o di un sito che offra download diretti dei font (quindi il download deve contenere solo il font e non una cartella .zip o .rar) oppure di uno spazio web dove upperete il font, come nel mio caso.SPOILER (clicca per visualizzare)NB se il font che utilizzerete lo upperete nel vostro spazio web il font NON si deve trovare nella cartella C:/Windows/Fonts o non riuscirete a selezionarlo
Il codiceCODICE@font-face {font-family: aikelso; src:url("http://m1ck1.altervista.org/CSScodes/AIKELSO-B.TTF")}
Analisi
@font-face non va modificato
font-family: aikelso; ci consente di scegliere il nome del font, modificate "aikelso" con il nome che volete richiami il font.
src:url("http://m1ck1.altervista.org/CSScodes/AIKELSO-B.TTF") serve a selezionare il link dove si trova il nostro font, modificate "http://m1ck1.altervista.org/CSScodes/AIKELSO-B.TTF" con il link dove si trova il vostro font.
Una volta inserito il codice nel CSS del proprio sito sarà possibile utilizzare ovunque il font, così, per esempio:HTML<span style="font-family: aikelso">Provaaaaaa</span>
dove modificheremo "aikelso" col nome scelto nel CSS
Compatibilità
Guida esclusiva per lo Skin Factory, vietato copiare senza permesso o spacciare per vostra
Edited by M1ck1 - 16/6/2011, 13:18 -
.Gradienti lineari in CSS3
Introduzione
Qualcosa di davvero interessante nel CSS3 è il supporto per i Gradienti Lineari.
I gradienti sono supportati in FF3.6+, Safari 2+ e Google Chrome.
La sintassi per le sfumature lineari varia leggermente tra Firefox e Safari/Chrome.
Per Firefox il codice è il seguente:CODICEbackground: -moz-linear-gradient(left bottom, #aaeeff, #CECECE 30%, #3399cc);
Mentre per quanto riguarda Safari e ChromeCODICEbackground: -webkit-gradient(linear, left bottom, right top, from(#aaeeff), to(#3399cc), color-stop(0.3, #CECECE));
Analisi codice
FirefoxCODICEbackground: -moz-linear-gradient /* Questa prima parte è per il supporto su Firefox
(left bottom, /* Questa parte indica la posizione da cui partirà il gradiente
#aaeeff, /* Questo è il primo colore
#CECECE /* Questo è il secondo colore
30%, /* Mentre qui troviamo la parcentuale del colore, ovvero dalla distanza in cui partirà la sfumatura del colore sovrastante (#CECECE)
#3399cc); /* Infine qua troviamo il colore di destinazione
Safari/ChromeCODICEbackground: -webkit-gradient /* Questa prima parte è per il supporto su Safari/Chrome
(linear, /* Tipologia di gradiente
left bottom, /* Questa parte indica la posizione da cui partirà il gradiente
right top, /* Questa invece è la parte che indica la posizione dove finirà il gradiente
from(#aaeeff), /* Colore di partenza
to(#3399cc), /* Colore di destinazione della sfumatura
color-stop(0.3, /* Come potete intuire indica quando si ferma il secondo colore, quello che segue (il contrario del codice di Firefox). Si usano numeri decimali, corrispondenti della percentuale
#CECECE)); */ E infine il colore "di mezzo"
Altre risorse
Anteprima link.
Generatore link (per facilitarsi la vita, è inoltre presente un supporto per Internet Explorer)
Tutorial originale link (Più dettagliato con anche alcuni esempi già pronti)
Edited by M1ck1 - 21/6/2011, 14:29
Votes taken by M1ck1 |
