01 di 04
Creazione Cross-Browser Linear Gradients cù CSS3
Linearii Gradienti
U tipu più cumuni di gradienti chì vede hè un gradiente lineale di dui culori. Questu significa chì u gradientu mudene in una linea recta chì cambiatà gradualmentamente da u primu culore in a secunna sopra a strada. L'imaghjina nantu à sta pagina mostra un gradiente simplici di left-to-right # 999 (gris fosc) per #fff (biancu).
E gradienti lineali sò a più faciule di definisce, è anu più supportu in i navigatori. Coghji lineari CSS3 sò sopurità in Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, è Safari 4+. Internet Explorer pudendu aghjunghje gradienti cù un filtru è i soporta da volta à IE 5.5. Questa ùn hè micca CSS3, ma hè una opzione per a compatibilità in u vostru navigatore.
Quandu define un gradiente avete bisognu di definisce parechje cosi diversi:
- Qualessu tipu di gradimentu hè hè lineale o radial
- Hè u gradientu duverà accade
- Induve chì u gradientu pare
- Chì sò i culori sò in u gradientu è duvissi stà accuminciatu è si firmavanu
Per definisce gradienti lineali cù CSS3, scrivite:
gradientu lineale ( angolo o latitude o cantonu , culore, stop di color )
- Prima di definisce u tipu di gradientu cù u nome lineale -gradient.
- Allora pudete definisce u puntu di inizziu è puntuale di u gradientu in una di duie manere: l'angolo di a linea in diploma da 0 à 359, cù 0 gradi punendu direttamente. O cù a funzione "di u cantu è a cantina", cum'è quellu, right, bottom, è cima. Queste esse spiegatu in più detail nantu à a pagina dopu. Se si abbandunate quì, u gradientu falà da a cima à u fondu di l'elementu.
- Allora pudete definisce u culore in u stilu. Defini u culore in u stoppiu cù u còdice di u culore è u percentualitate opcional. U percentuale dice à u navigatore induve nantu à a linea per cumincià o finiscinu cu quellu culore. U difettu hè di pusà i culori uniformi à longu u filu. Puderete più nantu à i stile di culore nantu à a pagina 3.
Cusì, per definisce u gradientatu sopra cun CSS3, scrivite:
linear-gradient (left, # 999999 0%, #ffffff 100%);
E di stabilitu com'è u sfondate di una DIV scrivite:
div {
fonti d'imagine: linear-gradient (left, # 999999 0%, #ffffff 100%;
}
Extensions Browser per CSS3 Linear Gradients
Per fà u gradientu per travaglià u navigatore, hà bisognu di utilizà estensione di navigatore per a più di i browsori è un filtru per Internet Explorer 9 è più bassu (in veramente 2 filtri). Tuttu chistu piglià i stessu elementi per definisce u vostru gradimentu (solu chì pudete solu definisce gradienti di 2 culori in IE).
Cunsigliu di i filtri è l'estensione Internet - L' Internet Explorer hè u più impurtante di sustegnu, perchè hai bisognu di trè linea distinti per soporta a versioni di u browser. Per piglià u gradientu grisu à u gradu biancu scriveva:
/ * IE 5.5-7 * /
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
L' estensione Mozilla -L'estru -moz- hè cum'è a propietata CSS3, solu cù l'estensione -moz-. Per scopre u gradient above per Firefox, scrivite:
-moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
L'estrazione di l' Opera L'estensione -Oo aghjusta gradienti à Opera 11.1+. Per scuperta u gradientu sopra, scrivite:
-o-linear-gradient (left, # 999999 0%, #ffffff 100%);
Webkit Extension- The -webkit- pruttice travaglia assai di a propietata CSS3. Per definisce u gradientu per u Safari 5.1 o Cromu 10 più scriverete:
-webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
Ci hè ancu una versione più vechja di l'extensionu Webkit chì travaglia cù Chrome 2+ è Safari 4+. In questu define u tipu di gradiente cum'è un valore, più di u nome di a prupositu. Per piglià u gradientu grisu à u biancu cù questa extensione, scrivite:
-webkit-gradient (lineale, left top, right up, colore-stop (0%, # 999999), colore-stop (100%, # ffffff));
CSS3 CSS Linear Gradientu CSS
Per un sustegnu tutale di u travagliu per trasfurmà u gradientu grisu à u biancu quì sottu primu includeu un cordu solidu di ricerca per i navigatori chì ùn anu micca soporta gradienti, è l'ultimu elementu duverà esse l'altru CSS3 per i navigatori chì sò cumpletu. Cusì, scrivite:
Fondo: # 999999;
Fondo: -moz-linear-gradient (left, # 999999 0%, #ffffff 100%);
Fondo: -webkit-gradient (lineale, left top, right top, color-stop (0%, # 999999), color-stop (100%, # ffffff));
Fondo: -webkit-linear-gradient (left, # 999999 0%, #ffffff 100%);
Fondo: -o-linear-gradient (left, # 999999 0%, #ffffff 100%);
Fondo: -ms-linear-gradient (left, # 999999 0%, #ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
Fondo: linear-gradient (left, # 999999 0%, #ffffff 100%);
I pagi seguenti in stu tutorialu spiecanu a parte di u gradientu in più dittori, è l'ultima pagina apale à una strumentu chì hè un modu excelente per creà gradienti CSS3 automaticamente.
Vede stu gradientu lineale in accustu cù solu CSS.
02 di 04
Crea gradienti diagonali-L'Angolo di u Gradimentu
I punturi di inizziu è persone determinate l'angolo di u gradientu. A gradienti linearii sò di a cima di u fondu o di l'uce di diritta. Ma hè pussibule di custruisce un gradimentu chì si move in una linea diagonale. L'imaghjina nantu à sta pagina mostra un gradimentu simplice chì si move in un angle 45degree in l'imagine da diritta à left.
Angles per definisce a linea Gradient
L'angolo hè una linea in un cercolu imaginariu in u centru di l'elementu. 0deg points up, 90deg points a right, 180deg points down, 270deg points à left. Pudete definisce alcunu angleu da 0 a 359 gradi.
Avete nutatu chì in un quadru, un angolo di 45 gradu si move da u cantu superiore left to the bottom right, ma in un rectangulu, i punti di inizzi è finale sò pocu fora di a forma, cum'è pudete vede in l'imagine.
U modu più cumuni per definisce un gradientu diagonal hè di definisce una cantone, cumu a righione di u ghjustu è u gradientu si move da quella angula à a rilla opposta. Pudete definisce a postione di partenza cù e seguenti chjavi:
- cima
- diritta
- fondu
- manca
- centru
È ponu esse cumminati per esse più specifici, cum'è:
- a destra
- a manca left
- centru superiore
- fondu perfettu
- fondu falu
- fondu fundatu
- centru ghjucatu
- left centre
Quì hè a CSS per un gradiente simili à quellu in u persu, rossu à u blanc, movendu da l'angulu di u rightu à u fondu falu:
Fondo: ## 901A1C;
fonti-image: -moz-linear-gradient (u topu di u dirittu, # 901A1C 0%, # FFFFFF 100%);
articulu di u fondu: -webkit-gradient (lineale, cumincianu righjuntu, sopra à manca, culore (0, # 901A1C), culore (1, #FFFFFF));
Fondo: -webkit-linear-gradient (u top, # 901A1C 0%, #ffffff 100%);
Fondo: -o-linear-gradient (u top, # 901A1C 0%, #ffffff 100%);
Fondo: -ms-linear-gradient (u top, # 901A1C 0%, #ffffff 100%);
Fondo: linear-gradient (u top, # 901A1C 0%, #ffffff 100%);
Pudete avè avutu chì ùn sò micca filtri IE in stu esempiu. Hè perchè IE solu permette parechji tipi di filtri: cima di fondu (u default) è sulla a diritta (cù u GradientType = 1 cambià).
Vede stu gradientu lineale diagonale in accustu cù solu CSS.
03 di 04
Color Paraves
CSS3 di gradienti lineali, pudete aghjunghje parechji culori à u gradientu per creà effetti ancu fancieri. Per aghjunghje queste culori, aghjunghjenu culori addizzjonali à a fine di a vostra prupietà, siparati da persone. Puderete annunzià nantu à a linea chì i culori cume accumincianu o finiscinu ancu.
I filtri Internet Explorer sò solu appruvanu dui specje di culore, perchè quandu si custruisce stu gradimentu, devenu solu u primu è u sicondu culori chì vulemu vede.
Quì hè a CSS per u gradientu di 3 culore:
fondu: #ffffff;
Fondo: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
Fondo: -webkit-gradient (lineale, left top, right up, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
Fondo: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Fondo: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Fondo: -ms-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
Fondo: linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Vede stu gradientu lineale cù trè stanzi di culore in l'accustu cù solu CSS.
04 di 04
Facenu i Gradienti di facilmente
Ci hè dui siti chì vi ricumandemu per aiutà à custruisce i gradienti, tutti avianu i benefizièghjani è i disunori, ùn aghju micca truvatu un gradatore chì faci tuttu.
Ultimate CSS Gradient Generator
Stu generaturi gradienti hè assai populari da perchè elabureghja in modu simili per i pruduttori di gradiente in programmi cum'è Photoshop. Mi piace ancu perchè vi dà tutte l'estensione CSS, nò solu Webkit è Mozilla. U prublema cù questu generatori hè chì solu compone sopra gradienti horizontale è verticale. Se vulete mette in gradienti diagonali, avete per andà à l'altru generatori. Avveraghju.
CSS3 Gradient Generator
U generatore mi hà pigliatu un pocu di più per capiscenu di u primu, ma ùn sustene u cambiamentu di a direzione à una diagonal.
Se sapete di un altru CSS Gradient Generator chì vi piace megliu chè quellu, fate un avanti .