Stiliaus jūsų vaizdai ir naudokite vaizdus stiliuose
Daugelis žmonių naudoja CSS, norėdami koreguoti tekstą, keisti šriftą, spalvą, dydį ir dar daugiau. Tačiau vienas dalykas, kurį dažnai pamirštama daugybė žmonių, yra tai, kad galite naudoti CSS su vaizdais.
Paveikslėlio keitimas patys
CSS leidžia jums nustatyti, kaip vaizdas rodomi puslapyje. Tai gali būti labai naudinga, jei norite, kad jūsų puslapiai būtų nuoseklūs. Nustatydami stilius visuose paveikslėliuose, sukuriate standartinį vaizdų atvaizdą. Kai kurie dalykai, kuriuos galite padaryti:
- Pridėkite sieną ar kontūrą aplink vaizdus
- Pašalinkite spalvotą kraštą aplink susietus vaizdus
- Vaizdų pločio ir (arba) aukščio reguliavimas
- Pridėkite šešėlį
- Pasukite vaizdą
- Pakeiskite stilių, kai vaizdas bus nukreiptas
Jūsų paveikslėlio suteikimas yra puiki vieta pradėti kurti sieną. Bet jūs turėtumėte apsvarstyti ne tik sieną - pagalvokite apie visą savo vaizdo briauną, taip pat pakoreguokite maržas ir polsterius . Vaizdas su plona juoda siena atrodo gražiai, bet pridedant tam tikrą tarpą tarp sienos ir vaizdas gali atrodyti dar geriau.
img {
sienelė: 1px tvirta juoda;
padding: 5px;
}
Gera idėja visada susieti ne dekoratyvinius vaizdus , kai įmanoma. Tačiau kai jūs darote, prisiminkite, kad dauguma naršyklių prie vaizdo prideda spalvotą kraštą. Net jei naudosite pirmiau nurodytą kodą, kad pakeistumėte sieną, nuoroda nepaiso to, nebent pašalinsite ar pakeisite nuorodą. Norėdami tai padaryti, turėtumėte naudoti CSS vaiko taisyklę, kad pašalintumėte arba pakeistumėte sieną aplink susijusius atvaizdus:
img> a
siena: nėra;
}
Taip pat galite naudoti CSS, norėdami pakeisti arba nustatyti vaizdų aukštį ir plotį. Nors nėra puiki idėja naudoti naršyklę, kad būtų galima koreguoti vaizdo dydį dėl atsisiuntimo greitį, jie gerokai padidina vaizdų dydį, kad jie vis tiek atrodytų gerai. Naudodami CSS galite nustatyti, kad visi jūsų vaizdai būtų standartinio pločio ar aukščio, arba net nustatyti matmenis, atitinkančius konteinerį.
Atminkite, kad, kai redaguosite vaizdus, geriausių rezultatų turėtumėte pakeisti tik vieną aspektą - aukštį arba plotį. Tai leis įsitikinti, kad vaizdas išlaiko savo proporcijas, todėl neatrodo keista. Nustatykite kitą vertę automatiškai arba palikite ją, kad naršyklė išlaikytų proporcijas.
img {
plotis: 50%;
aukštis: auto;
}
CSS3 siūlo šios problemos sprendimą su naujomis savybėmis objektų ir objektų pozicijomis. Naudodami šias savybes galėsite nustatyti tikslią vaizdo aukštį ir plotį bei formatą. Tai gali sukurti paveikslėlių efektą aplink vaizdus arba apkarpyti, kad vaizdas atitiktų reikalaujamą dydį.
Nors CSS3 objekto ir objekto pozicijos savybės dar nėra plačiai remiamos, yra ir kitų CSS3 savybių, kurios daugelyje modernių naršyklių puikiai palaikomos ir kurias galite naudoti savo vaizdams keisti. Daugeliui šiuolaikinių naršyklių viskas dirba dabar, pvz., Šešėlių lašai, suapvalinti kampai ir transformacijos, kad būtų galima pasukti, įstrigti arba perkelti vaizdus. Tada galite naudoti CSS perėjimus, kad pakeistumėte vaizdus, kai jie buvo nukreipti arba spustelėti, arba iškart po tam tikro laiko.
Vaizdų naudojimas kaip fonai
CSS leidžia lengvai kurti fantastinius fonus su jūsų vaizdais.
Galite pridėti visą puslapį arba tik tam tikrą elementą. Puslapio foninį vaizdą lengva sukurti naudodami fono vaizdą:
kūnas {
fono paveikslėlis: url (background.jpg);
}
Pakeiskite kūno parinkiklį į konkretų elementą puslapyje, kad fonas būtų įtrauktas tik į vieną elementą.
Kitas įdomus dalykas, kurį galite padaryti su vaizdais, - tai sukurti fono paveikslėlį, kuris neslenkia likusio puslapio - kaip vandens ženklas. Jūs tiesiog naudojate stiliaus fono priedą: fiksuoto; kartu su fono paveikslėliu. Kitos jūsų fono parinktys yra jų plytelių darymas horizontaliai arba vertikaliai naudojant fono pakartotinę nuosavybę.
Rašyti foninį pakartojimą: repeat-x; plytelių vaizdą horizontaliai ir fono pakartojimą: repeat-y; plytelės vertikaliai. Galite nustatyti fono paveikslėlį naudodami fono padėtį.
Be to, CSS3 prideda daugiau stilių ir jūsų fonams. Galite ištempti savo atvaizdus, kad tilptų bet kokio dydžio foną, arba nustatyti fono vaizdą, kad būtų galima masto lango dydį . Galite pakeisti poziciją ir tada užfiksuoti fono vaizdą. Tačiau vienas iš geriausių dalykų, susijusių su CSS3, yra tai, kad dabar galite sluoksnį kelis foninius vaizdus, kad sukurtumėte dar daugiau sudėtingų efektų.
HTML5 padeda stiliaus vaizdams
"FIGURE" elementas HTML5 turi būti pateiktas aplink bet kokius vaizdus, kurie gali būti atskirai dokumente. Vienas iš būdų pagalvoti apie tai, jei vaizdas gali atrodyti priedėlyje, tada jis turėtų būti elemento FIGURE viduje. Tada galite naudoti šį elementą ir elementą FIGCAPTION, kad pridėtumėte stilius prie savo paveikslėlių.