Стиснете ги сликите и користете слики во стилови
Многу луѓе користат CSS за да го прилагодат текстот, менувајќи го фонтот, бојата, големината и повеќе. Но, едно нешто што многу луѓе често забораваат е дека можете да го користите CSS со слики, како и.
Промена на сликата
CSS ви овозможува да ја прилагодите како се прикажува сликата на страната. Ова може да биде навистина корисно за одржување на вашите страници доследни. Со поставување на стилови на сите слики, креирате стандарден изглед за вашите слики. Некои од работите што можете да ги направите:
- Додајте граница или преглед околу сликите
- Отстранете ја обоената граница околу поврзаните слики
- Прилагодување на ширината и / или висината на сликите
- Додај сенка за капка
- Ротирај ја сликата
- Променете ги стиловите кога сликата е превиткана
Давањето на вашата слика граница е одлично место за почеток. Но, треба да размислите повеќе од само границата - да размислите за целиот раб на сликата и да ги прилагодите маргините и баластите . Сликата со тенка црна граница изгледа убаво, но додавајќи некоја рампа помеѓу границата и сликата може да изгледа уште подобро.
img {
граница: 1px солидна црна боја;
Соочувајќи се: 5px;
}
Добра идеја е секогаш да ги поврзете не-декоративните слики , кога е можно. Но, кога правите, запомнете дека повеќето прелистувачи додаваат обоена граница околу сликата. Дури и ако го користите горенаведениот код за промена на границата, врската ќе ја отфрли, освен ако не ја отстраните или промените границата на врската. За да го направите ова, треба да користите CSS правило за деца за да ја отстраните или промените границата околу поврзаните слики:
img> a {
граница: нема;
}
Можете исто така да користите CSS за да ја смените или поставите висината и ширината на вашите слики. Иако не е одлична идеја да го користите прелистувачот за да ги прилагодите големини на сликите поради брзини на преземање, тие добиваат многу подобри при промена на големината на сликите, така што тие сеуште изгледаат добро. И со CSS можете да ги поставите вашите слики на сите да бидат стандардна ширина или висина, па дури и да ги поставите димензиите да бидат релативни на садот.
Запомнете, кога ги менувате големината на сликите, за најдобри резултати, треба да ја менувате само една димензија - висината или ширината. Ова ќе заклучи дека сликата го задржува својот аспект, и затоа не изгледа чудно. Поставете друга вредност во автоматски или оставете ја надвор да му кажете на прелистувачот за да го задржи соодносот на сликата конзистентен.
img {
ширина: 50%;
висина: авто;
}
CSS3 нуди решение за овој проблем со новите својства објектно-склопни и објектно-позиционирачки. Со овие својства ќе можете да ја дефинирате точната висина и ширина на сликата и како треба да се ракува соодносот на аспект. Ова може да создаде ефекти на писмото околу вашите слики или сечење за да ја добие сликата за да се вклопи во потребната големина.
Додека CSS3 објектно-склопните и објектните својства не се широко поддржани, постојат и други CSS3 особини кои се добро поддржани во повеќето модерни пребарувачи кои можете да ги користите за да ги модифицирате вашите слики. Работите како сенки за сенки, заоблени агли и трансформации за ротирање, искривување или преместување на вашите слики сите работат токму сега во повеќето современи прелистувачи. Потоа можете да користите CSS транзиции за да направите сликите да се менуваат кога ќе се превртат или кликнат, или веднаш по одреден временски период.
Користење на слики како позадини
CSS го олеснува создавањето на фантастични позадини со вашите слики.
Можете да додадете заднини на целата страница или само одреден елемент. Лесно е да се создаде позадинска слика на страницата со својство на позадина-слика:
тело {
позадина-слика: url (background.jpg);
}
Променете го селекторот на телото на одреден елемент на страницата за да ја ставите позадината на само еден елемент.
Друга забавна работа што можете да ја направите со сликите е да создадете позадинска слика која не се движи со остатокот на страницата - како воден печат. Вие само го користите прилогот за позадина во стилот: фиксен; заедно со вашата позадина. Други опции за вашите потекла вклучуваат нивни плочки само хоризонтално или вертикално со користење на сопственост на позадина-повторување.
Напиши позадина-повтори: повтори-x; да ја плочка сликата хоризонтално и да се повторува позадината: повторување-y; да плочка вертикално. И можете да ја поставите вашата позадинска слика со својство на позадината.
И CSS3 додава повеќе стилови за вашето потекло, како и. Можете да ги истегнете вашите слики за да одговараат на било која големина на позадината или да ја поставите позадинската слика да ја скали со големината на прозорецот . Можете да ја смените позицијата и потоа да ја клипирате позадинската слика. Но, една од најдобрите работи за CSS3 е тоа што сега можете да слоевите повеќе позадини слики за да создадете уште покомплексни ефекти.
HTML5 помага во стилските слики
Елементот ФИГУРА во HTML5 треба да биде поставен околу сите слики кои можат да стојат сами во документот. Еден начин да се размислува за тоа е дали сликата може да се појави во додаток, тогаш тоа треба да биде во елементот FIGURE. Потоа можете да го користите тој елемент и елементот FIGCAPTION за да додадете стилови на вашите слики.