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