Stampa l-Immaġini tiegħek u Uża Stampi Stili
Ħafna nies jużaw CSS biex jaġġustaw it-test, ibiddlu l-font, il-kulur, id-daqs u aktar. Imma ħaġa waħda li ħafna nies ħafna drabi tinsa hija li tista 'tuża CSS b'immaġnijiet ukoll.
Nibdlu l-immaġni nfisha
CSS jippermettilek taġġusta kif id-dehra turi fuq il-paġna. Dan jista 'jkun verament utli biex iżomm il-paġni tiegħek konsistenti. Billi tistabbilixxi stili fuq l-immaġini kollha, toħloq ħarsa standard għall-immaġini tiegħek. Uħud mill-affarijiet li tista 'tagħmel:
- Żid fruntiera jew kontorn madwar l-immaġini
- Neħħi l-fruntiera kkulurita madwar stampi marbuta
- Aġġusta l-wisa 'u / jew l-għoli tal-immaġini
- Żid shadow drop
- Dawwar l-immaġini
- Ibdel l-istili meta l-immaġini tittajjar
Li tagħti l-immaġni tiegħek fruntiera huwa post kbir biex tibda. Imma għandek tikkonsidra aktar milli sempliċement il-fruntiera - taħseb fuq it-tarf kollu tal-immaġni tiegħek u aġġusta l-marġni u l- ikkuttunar ukoll. Immaġni b'libra sewda sewda tidher sabiħa, imma żżid xi ikkuttunar bejn il-fruntiera u l-immaġni tista 'tidher aħjar.
img {
fruntiera: 1px iswed solidu;
ikkuttunar: 5px;
}
Hija idea tajba li dejjem tgħaqqad stampi mhux dekorattivi , meta jkun possibbli. Imma meta tagħmel dan, ftakar li l-biċċa l-kbira tal-browsers iżidu fruntiera kkulurita madwar id-dehra. Anki jekk tuża l-kodiċi ta 'hawn fuq biex tibdel il-fruntiera, ir-rabta teskludi dik sakemm ma tneħħix jew tibdel il-fruntiera fuq ir-rabta wkoll. Biex tagħmel dan għandek tuża regola tat-tfal tas-CSS biex tneħħi jew tibdel il-fruntiera madwar immaġini marbuta:
img> a {
fruntiera: ħadd;
}
Tista 'wkoll tuża CSS biex tibdel jew issettja l-għoli u l-wisa' ta 'l-immaġini tiegħek. Filwaqt li mhix idea kbira li tuża l-browser biex taġġusta d-daqsijiet ta 'l-immaġni minħabba l-veloċitajiet ta' tniżżil, huma jkollna ħafna aħjar biex iddawru l-immaġini biex jibqgħu jħarsu tajjeb. U bil-CSS tista 'tissettja l-immaġni tiegħek kollha jkunu wisa' jew għoli standard jew saħansitra ffissaw id-dimensjonijiet li għandhom x'jaqsmu mal-kontenitur.
Ftakar, meta timmaġina mill-ġdid l-istampi, għall-aħjar riżultati, għandek tnaqqas id-dimensjoni waħda biss - l-għoli jew il-wisa '. Dan se juri li l-immaġni żżomm il-proporzjon tal-aspett tagħha, u għalhekk ma tħaresx stramba. Issettja l-valur l-ieħor għall-awto jew tħalliha barra biex tgħid lill-browser biex iżżomm il-proporzjon tal-aspett konsistenti.
img {
wisa ': 50%;
għoli: auto;
}
CSS3 joffri soluzzjoni għal din il-problema bil-proprjetajiet il-ġodda li huma tajbin għall-oġġett u l-pożizzjoni tal-oġġett. B'dawn il-proprjetajiet inti tkun tista 'tiddefinixxi l-għoli eżatt tal-immaġni u l-wisa' u kif il-proporzjon tal-aspett għandu jiġi ttrattat. Dan jista 'joħloq effetti tal-letterboxing madwar ix-xbihat jew il-ħsad tiegħek biex tinkiseb l-immaġini li taqbel mad-daqs meħtieġ.
Filwaqt li l-proprjetajiet tal-oġġett u l-oġġett ta 'pożizzjoni ta' oġġett mhumiex appoġġjati b'mod wiesa 's'issa, hemm proprjetajiet oħra CSS3 li huma appoġġjati sew fil-biċċa l-kbira ta' browsers moderni li tista 'tuża biex timmodifika l-immaġini tiegħek. Affarijiet bħall-dellijiet tal-waqgħa, kantunieri ttundjati, u trasformazzjonijiet biex iddawwar, ixxekkel, jew iċċaqlaq ix-xbihat tiegħek jaħdmu kollha issa fil-biċċa l-kbira tal-browsers moderni. Tista 'mbagħad tuża transizzjonijiet CSS biex tagħmel l-immaġini tinbidel meta tittajjar, jew għafast, jew eżatt wara perjodu ta' żmien.
Użu ta 'Stampi bħala Sfond
CSS jagħmilha faċli biex toħloq sfondi fancy ma 'l-immaġini tiegħek.
Tista 'żżid sfondi għall-paġna kollha jew għal element speċifiku biss. Huwa faċli li tinħoloq dehra ta 'sfond fuq il-paġna bil-proprjetà ta' l-immaġini ta 'sfond:
korp {
immaġni ta 'sfond: url (background.jpg);
}
Ibdel is-selettur tal-ġisem għal element speċifiku fuq il-paġna biex tpoġġi l-isfond fuq element wieħed biss.
Ħaġa oħra divertenti li tista 'tagħmel b'immaġini toħloq immaġni ta' sfond li ma tiskrolljax mal-bqija tal-paġna - bħal watermark. Int sempliċement tuża l-isfond tal-istil-attachment: fiss; flimkien ma 'l-immaġni ta' sfond tiegħek. Għażliet oħra għall-isfondi tiegħek jinkludu li jagħmluhom il-madum biss b'mod orizzontali jew vertikali billi jużaw il-proprjetà irrepetuta fl-isfond.
Ikteb l-isfond irrepeti: irrepeti-x; biex tittajpja l-immaġni b'mod orizzontali u rrepeti l-isfond: irrepeti-y; mad-madum vertikalment. U tista 'tippożizzjona l-immaġni tal-isfond tiegħek mal-proprjetà tal-pożizzjoni ta' sfond.
U CSS3 iżid aktar stili għall-isfondi tiegħek ukoll. Tista ' tistira l-immaġni tiegħek biex taqbel ma' l-isfond tad-daqs jew issettja l-immaġni ta 'l-isfond fuq skala bid-daqs tat-tieqa . Tista 'tbiddel il-pożizzjoni u mbagħad ikklikkja l-immaġni ta' sfond. Iżda waħda mill-aħjar affarijiet dwar CSS3 hija li inti issa tista 'sserraħ ħafna immaġini fl-isfond biex toħloq effetti aktar kumplessi.
HTML5 Jgħin Stampi Style
L-element FIGURE f'HTML5 għandu jitqiegħed madwar kwalunkwe immaġini li tista 'toqgħod waħedha fid-dokument. Mod wieħed biex wieħed jaħseb dwarha huwa jekk l-immaġni tista 'tidher f'appendiċi, allura għandu jkun ġewwa l-element FIGURE. Imbagħad tista 'tuża dak l-element u l-element FIGCAPTION biex iżżid stili fuq l-immaġini tiegħek.