Daugelis žmonių naudoja CSS koreguoti tekstą, keičiant šriftą, spalvą, dydį ir dar daugiau. Tačiau vienas dalykas, kurį daugelis žmonių dažnai pamiršta, yra tai, kad CSS galite naudoti ir su vaizdais.
Pats vaizdo keitimas
CSS leidžia reguliuoti, kaip vaizdas rodomas puslapyje. Tai gali būti tikrai naudinga, kad jūsų puslapiai būtų nuoseklūs. Nustatydami visų vaizdų stilius, sukuriate standartinę savo vaizdų išvaizdą. Keli dalykai, kuriuos galite padaryti:
- Aplink vaizdus pridėkite kraštinę arba kontūrą
- Pašalinkite spalvotą kraštinę aplink susietus vaizdus
- Vaizdų pločio ir (arba) aukščio reguliavimas
- Pridėti šešėlį
- Pasukite vaizdą
- Pakeiskite stilius kai vaizdas užvedamas virš
Suteikti savo atvaizdui sieną yra puiki vieta pradėti. Tačiau turėtumėte atsižvelgti ne tik į kraštinę - pagalvokite apie visą savo vaizdo kraštą ir sureguliuokite paraštes ir paminkštinimas taip pat. Vaizdas su plona juoda sienele atrodo gražiai, tačiau pridėjus šiek tiek paminkštinimo tarp krašto ir vaizdo, jis gali atrodyti dar geriau.
Tai gera idėja visada susiekite nedekoratyvius vaizdus, kai įmanoma. Bet kai tai padarysite, atminkite, kad dauguma naršyklių aplink vaizdą prideda spalvotą kraštinę. Net jei naudosite pirmiau nurodytą kodą, kad pakeistumėte kraštinę, nuoroda tai pakeis, nebent pašalinsite arba nepakeisite ir nuorodos krašto. Norėdami tai padaryti, turėtumėte naudoti CSS antrinę taisyklę, kad pašalintumėte arba pakeistumėte susietų vaizdų kraštinę:
Taip pat CSS galite naudoti norėdami pakeisti arba nustatyti savo vaizdų aukštį ir plotį. Nors nėra puiki idėja naudoti naršyklę koreguojant vaizdų dydžius dėl atsisiuntimo greičio, jie daug geriau keičia vaizdų dydžius, kad vis tiek atrodytų gerai. Naudodami CSS galite nustatyti, kad visi vaizdai būtų standartinio pločio ar aukščio, arba netgi nustatyti matmenis, kad jie būtų palyginti su konteineriu.
Atminkite, kad pakeisdami vaizdų dydį, norėdami pasiekti geriausių rezultatų, turėtumėte pakeisti tik vieno matmens dydį - aukštį arba plotį. Tai užtikrins, kad vaizdas išlaikytų savo formato santykį, taigi neatrodo keistas. Nustatykite kitą vertę į automatinis arba nepalikite to, kad naršyklė nurodytų, kad formato santykis būtų pastovus.
CSS3 siūlo šios problemos sprendimą su naujomis savybėmis objektui tinkamas ir objekto-padėties. Naudodami šias savybes, galėsite tiksliai apibrėžti vaizdo aukštį ir plotį bei tai, kaip turėtų būti elgiamasi su formato santykiu. Tai gali sukurti pašto dėžutės efektus aplink jūsų atvaizdus arba apkarpymą, kad vaizdas atitiktų reikiamą dydį.
Yra ir kitų CSS3 ypatybių, kurios yra gerai palaikomos daugelyje naršyklių, kurias galite naudoti ir savo atvaizdams modifikuoti. Tokie dalykai, kaip šešėliai, suapvalinti kampai ir transformacijos, norint pasukti, pakreipti ar perkelti vaizdus, dabar veikia daugelyje šiuolaikinių naršyklių. Tada galite naudoti CSS perėjimus, kad vaizdai pasikeistų, kai užveskite pelės žymeklį ant viršaus, spustelėjote arba iškart po tam tikro laiko.
Vaizdų naudojimas kaip fonas
CSS leidžia lengvai sukurti įmantrius fonus su savo atvaizdais. Tu gali pridėti fonus į visą puslapį arba tik į konkretų elementą. Naudojant., Lengva sukurti fono vaizdą puslapyje fonas-vaizdas nuosavybė:
Pakeisti kūnas pažymėkite konkretų puslapio elementą, kad fonas būtų rodomas tik viename elemente.
Kitas įdomus dalykas, kurį galite padaryti su vaizdais, yra sukurti fono paveikslėlį, kuris neslenkamas su likusiu puslapiu, pavyzdžiui, vandens ženklas. Jūs tiesiog naudojate stilių pritvirtinimas prie fono: fiksuotas; kartu su savo fono vaizdu. Kitos jūsų fono parinktys apima tai, kad jie būtų išdėstyti tik horizontaliai arba vertikaliai, naudojant fonas pakartoti nuosavybė. Rašykite fonas pakartoti: pakartoti x; vaizdą iškloti horizontaliai ir fonas pakartoti: pakartoti y; kloti vertikaliai. Fono paveikslėlį galite nustatyti naudodami fonas-padėtis nuosavybė.
CSS3 taip pat prideda daugiau stilių jūsų fonams. Galite išplėsti vaizdus, kad jie atitiktų bet kokio dydžio foną, arba nustatyti, kad fono paveikslėlis atitiktų lango dydį. Galite pakeisti padėtį ir tada apkarpyti fono vaizdą. Tačiau vienas geriausių CSS3 dalykų yra tas, kad dabar galite sluoksniuoti kelis fono paveikslėlius, kad sukurtumėte dar sudėtingesnius efektus.
HTML5 padeda stiliaus vaizdams
PAVEIKSLAS HTML5 elementas turėtų būti dedamas aplink visus atvaizdus, kurie dokumente gali būti atskirai. Vienas iš būdų galvoti apie tai, jei vaizdas galėtų būti rodomas priede, tada jis turėtų būti PAVEIKSLAS elementas. Tada galite naudoti tą elementą ir PASTABA elementą, norėdami pridėti stilių prie savo atvaizdų.