Стилирајте своје слике и користите слике у стиловима
Многи људи користе ЦСС за прилагођавање текста, промену фонта, боје, величине и више. Али једна ствар коју многи људи заборављају јесте да можете користити и ЦСС са сликама.
Промена саме слике
ЦСС вам омогућава да прилагодите како се слика приказује на страници. Ово може бити корисно за одржавање ваших страница конзистентним. Постављањем стилова на све слике креирате стандардни изглед својих слика. Неке од ствари које можете учинити:
- Додајте границу или слику око слика
- Уклоните обојену ивицу око повезаних слика
- Подешавање ширине и / или висине слика
- Додајте сенку за пад
- Ротирајте слику
- Промените стилове када се слика преврне
Давање имиџа граници је одлично место за почетак. Али требало би да размислите више од границе - размислите о читавој ивици ваше слике и прилагодите маргине и подлогу . Слика са танком црном границом изгледа лепо, али додавањем неке подлоге између границе и слике могу изгледати још боље.
имг {
граница: 1пк солид блацк;
паддинг: 5пк;
}
Добра је идеја да увек повезујете не-декоративне слике , када је то могуће. Али када то урадите, запамтите да већина претраживача додају обојену боју око слике. Чак и ако користите горњу шифру за промјену границе, линк ће то превазићи ако не уклоните или промените границу на линку. Да бисте то урадили, требало би да користите ЦСС правило детета да бисте уклонили или променили границу око повезаних слика:
имг> а {
граница: нема;
}
Такође можете да користите ЦСС да бисте променили или подесили висину и ширину слика. Иако није добра идеја да користите претраживач да бисте прилагодили величине слика због брзина преузимања, постају много боље при промени величине слике тако да и даље изгледају добро. Са ЦСС-ом можете поставити своје слике као стандардне ширине или висине или чак поставити димензије да буду релативне према контејнеру.
Запамтите, приликом промјене величине слике, за најбоље резултате, требало би да мењате само једну димензију - висину или ширину. Ово ће утицати на то да слика задржава свој аспект, па тако не изгледа чудно. Подесите другу вредност на ауто или оставите је да рећи прегледачу да одржи однос слике.
имг {
ширина: 50%;
висина: ауто;
}
ЦСС3 нуди решење за овај проблем са новим својствима прилагођеним објектним и објектним положајем. Са овим особинама моћи ћете да дефинишете тачну висину и ширину слике и како треба да поступите са односом висине. Ово може да створи ефекте писања на слике или обрезивање како би се слика уклопила у потребну величину.
Иако карактеристике ЦСС3 објектне и објектне позиције још нису широко подржане, постоје и друга својства ЦСС3 која су добро подржана у најсавременијим прегледачима које можете користити за модификовање ваших слика. Ствари као што су сенке капљице, заобљени углови и трансформације које се ротирају, скевују или померају слике тренутно раде у већини модерних претраживача. Тада можете користити ЦСС прелазе како бисте учинили да се слике мењају када се премјештате или кликне или непосредно након одређеног временског периода.
Коришћење слика као позадине
ЦСС олакшава креирање украсних позадина са вашим сликама.
Можете додати позадине на целу страницу или само одређени елемент. Лако је направити позадинску слику на страници са својством позадине слике:
боди {
бацкгроунд-имаге: урл (бацкгроунд.јпг);
}
Промените селектор тела на одређени елемент на страници да бисте позадину поставили само на један елемент.
Још једна забавна ствар коју можете учинити са сликама је створити позадинску слику која се не помиче са остатком странице - као водени жиг. Управо користите стил позадинског прилога: фиксиран; уз вашу слику у позадини. Друге опције за ваше позадине укључују их само хоризонтално или вертикално користећи својство позадине-понављање.
Написати позадинско понављање: поновити-к; да поставите слику хоризонтално и поновите позадину: поновите-и; да плочице вертикално. И можете позиционирати вашу позадинску слику са својством позадине.
ЦСС3 додаје више стилова за своје позадине. Можете да истегнете своје слике како би одговарали било којој величини позадине или подесили слику у позадини са величином прозора . Можете промијенити положај, а затим исјечити позадинску слику. Али једна од најбољих ствари о ЦСС3 је да сада можете да слојите више позадинских слика како бисте створили још сложеније ефекте.
ХТМЛ5 помаже у сликама слога
Елемент ФИГУРЕ у ХТМЛ5 треба да буде постављен око свих слика које могу да стоје иза документа. Један начин размишљања о томе је да ли би слика могла да се појави у додатку, онда би требало да буде унутар елемента ФИГУРЕ. Тада можете користити тај елемент и елемент ФИГЦАПТИОН да додате стилове вашим сликама.