Stili imazhet tuaja dhe Përdorni imazhet në stilet
Shumë njerëz përdorin CSS për të rregulluar tekstin, duke ndryshuar fontin, ngjyrën, madhësinë dhe më shumë. Por një gjë që shumë njerëz shpesh harrojnë është se mund të përdorni edhe CSS me imazhe.
Ndryshimi i vetë imazhit
CSS ju lejon të rregulloni se si shfaqet imazhi në faqe. Kjo mund të jetë me të vërtetë e dobishme për të mbajtur faqet tuaja të qëndrueshme. Duke vendosur stile në të gjitha imazhet, krijoni një pamje standarde për imazhet tuaja. Disa nga gjërat që mund të bëni:
- Shtoni një kufi ose skicë rreth imazheve
- Hiqni kufirin me ngjyrë rreth imazheve të lidhura
- Rregullimi i gjerësisë dhe / ose lartësisë së imazheve
- Shto një hije rënieje
- Rrotullo imazhin
- Ndrysho stilet kur imazhi rri pezull
Dhënia e imazhit tuaj një kufi është një vend i mirë për të filluar. Por ju duhet të konsideroni më shumë se vetëm kufirin - mendoni për të gjithë skajin e imazhit tuaj dhe rregulloni kufijtë dhe mbushjen si. Një imazh me një kufi të hollë të zi duket e bukur, por duke shtuar një mbushje ndërmjet kufirit dhe imazhit mund të duket edhe më mirë.
img {
kufiri: 1px ngurta e zezë;
mbushje: 5px;
}
Është një ide e mirë që gjithmonë të lidhni imazhe jo dekorative , kur është e mundur. Por kur të bëni, mos harroni se shumica e shfletuesve shtojnë një kufi të ngjyrosur rreth imazhit. Edhe nëse përdorni kodin e mësipërm për të ndryshuar kufirin, lidhja do të anashkalojë atë nëse nuk hiqni ose ndryshoni kufirin në linkun. Për ta bërë këtë ju duhet të përdorni një rregull të fëmijës CSS për të hequr ose ndryshuar kufirin rreth imazheve të lidhura:
img> a {
kufiri: asnjë;
}
Ju gjithashtu mund të përdorni CSS për të ndryshuar ose vendosur lartësinë dhe gjerësinë e imazheve tuaja. Megjithëse nuk është një ide e mirë për të përdorur shfletuesin për të rregulluar madhësinë e imazhit për shkak të shpejtësisë së shkarkimit, ato po bëhen shumë më të mirë në madhësinë e imazheve në mënyrë që ato të duken mirë. Dhe me CSS ju mund të vendosni imazhet tuaja për të gjithë të jetë një gjerësi ose lartësi standarde ose edhe të vendosni dimensionet të jenë në lidhje me enën.
Mos harroni, kur resize images, për rezultatet më të mira, ju duhet të ndryshoni vetëm një dimension - lartësinë ose gjerësinë. Kjo do të bëjë që imazhi të mbajë raportin e saj të aspektit dhe kështu nuk duket e çuditshme. Set vlerën tjetër për të auto ose për ta lënë atë për të treguar shfletuesin për të mbajtur raportin e aspekteve të qëndrueshme.
img {
gjerësia: 50%;
lartësia: auto;
}
CSS3 ofron një zgjidhje për këtë problem me objektet e reja objekt-fit dhe pozicionin e objektit. Me këto prona ju do të jeni në gjendje të përcaktoni lartësinë dhe gjerësinë e saktë të imazhit dhe si duhet të trajtohet raporti i pamjes. Kjo mund të krijojë efekte letterboxing rreth imazheve tuaja ose prodhues për të marrë imazhin që të përshtatet në madhësinë e kërkuar.
Ndërsa objektet CSS3 objekt-fit dhe vetitë e objektit nuk janë ende të mbështetura gjerësisht, ekzistojnë edhe prona të tjera CSS3 që mbështeten mirë në shfletuesit më modernë që mund t'i përdorni për të modifikuar imazhet tuaja. Gjërat si hijet e rëna, qoshet e rrumbullakëta dhe transformimet për të rrotulluar, anashkaluar ose lëvizur imazhet tuaja, të gjitha funksionojnë tani në shumicën e shfletuesve modernë. Ju pastaj mund të përdorni kalimet CSS për të bërë ndryshimet e imazheve kur mbizotëron, ose klikohet, ose vetëm pas një periudhe kohore.
Përdorimi i imazheve si sfond
CSS e bën të lehtë krijimin e sfondeve të dashura me imazhet tuaja.
Ju mund të shtoni prejardhje në të gjithë faqen ose në vetëm një element të veçantë. Është e lehtë të krijosh një imazh sfondi në faqe me imazhin e imazhit të sfondit:
trupi {
background-image: url (background.jpg);
}
Ndryshoni përzgjedhësin e trupit në një element të veçantë në faqe për të vendosur sfondin në vetëm një element.
Një tjetër gjë e këndshme që mund të bëni me imazhet është krijimi i një imazhi sfond që nuk lëviz me pjesën tjetër të faqes - si një ujëra. Ju vetëm përdorni shtojcën e stilit të ngjitjes: fikse; së bashku me imazhin tuaj të sfondit. Opsionet e tjera për prejardhjen tuaj përfshijnë bërjen e pllakave vetëm horizontalisht ose vertikalisht duke përdorur pronën e përsëritjes së sfondit.
Shkruani përsëritjen e sfondit: repeat-x; për tjegull imazhin horizontalisht dhe sfond-përsëritje: përsëritje-y; për tjegull vertikalisht. Dhe mund ta poziciononi imazhin tuaj të sfondit me pronën e pozicionit të sfondit.
Dhe CSS3 shton më shumë stile për prejardhjen tuaj. Ju mund të zgjasni imazhet tuaja për të përshtatur çdo sfond të madhësisë ose të vendosni imazhin e sfondit në shkallë me madhësinë e dritares . Mund ta ndryshoni pozicionin dhe pastaj të kapni imazhin e sfondit. Por një nga gjërat më të mira në lidhje me CSS3 është se tani mund të shtosh imazhe të shumta të sfondit për të krijuar efekte edhe më të ndërlikuara.
HTML5 ndihmon imazhet e stilit
Elementi i FIGURE në HTML5 duhet të vendoset rreth çdo imazhi që mund të qëndrojë i vetëm brenda dokumentit. Një mënyrë për të menduar për këtë është nëse imazhi mund të shfaqet në një shtojcë, atëherë duhet të jetë brenda elementit të FIGURE. Ju mund ta përdorni atë element dhe elementin FIGCAPTION për të shtuar stilet në imazhet tuaja.