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