Много хора използват CSS за коригиране на текст, промяна на шрифта, цвета, размера и др. Но едно нещо, което много хора често забравят, е, че можете да използвате CSS и с изображения.
Промяна на самото изображение
CSS ви позволява да регулирате начина на показване на изображението на страницата. Това може да бъде наистина полезно за поддържане на последователността на страниците ви. Като задавате стилове на всички изображения, вие създавате стандартен облик на вашите изображения. Някои от нещата, които можете да направите:
- Добавете граница или контур около изображенията
- Премахнете цветната граница около свързани изображения
- Регулиране на ширината и / или височината на изображенията
- Добавете сянка
- Завъртете изображението
- Променете стиловете когато изображението се задържи
Придаването на граница на изображението е чудесно място за започване. Но трябва да вземете предвид не само границата - помислете за целия ръб на вашето изображение и коригирайте полетата и подплата както добре. Изображение с тънка черна граница изглежда добре, но добавянето на малко подложка между границата и изображението може да изглежда още по-добре.
Добра идея е винаги свързвайте недекоративни изображения, когато е възможно. Но когато го направите, не забравяйте, че повечето браузъри добавят цветна граница около изображението. Дори ако използвате горния код за промяна на границата, връзката ще замени това, освен ако не премахнете или промените границата и на връзката. За целта трябва да използвате CSS дъщерно правило, за да премахнете или промените границата около свързани изображения:
Можете също да използвате CSS, за да промените или зададете височината и ширината на вашите изображения. Въпреки че не е добра идея да използвате браузъра за регулиране на размерите на изображенията поради скоростта на изтегляне, те стават много по-добри в преоразмеряването на изображенията, така че да изглеждат добре. И с CSS можете да настроите вашите изображения да бъдат със стандартна ширина или височина или дори да зададете размерите да бъдат спрямо контейнера.
Не забравяйте, че когато преоразмерявате изображения, за най-добри резултати трябва да преоразмерявате само едно измерение - височината или ширината. Това ще гарантира, че изображението запазва пропорциите си и така не изглежда странно. Задайте другата стойност на Автоматичен или го оставете настрана, за да кажете на браузъра да поддържа пропорциите пропорционални.
CSS3 предлага решение на този проблем с новите свойства обект-годен и обект-позиция. С тези свойства ще можете да определите точната височина и ширина на изображението и как трябва да се обработва пропорцията. Това може да създаде ефекти на пощенски кутии около вашите изображения или изрязване, за да се получи изображението, за да се побере в необходимия размер.
Има и други CSS3 свойства, които са добре поддържани в повечето браузъри, които можете да използвате и за модифициране на вашите изображения. Неща като падащи сенки, заоблени ъгли и трансформации за завъртане, изкривяване или преместване на вашите изображения работят в момента в повечето съвременни браузъри. След това можете да използвате CSS преходи, за да накарате изображенията да се променят, когато задържите курсора на мишката, щракнете върху тях или просто след определен период от време.
Използване на изображения като фонове
CSS улеснява създаването на изискани фонове с вашите изображения. Можеш добавете фонове към цялата страница или само към определен елемент. Лесно е да създадете фоново изображение на страницата с фоново изображение Имот:
Променете тяло селектор към определен елемент на страницата, за да поставите фона само на един елемент.
Друго забавно нещо, което можете да направите с изображения, е да създадете фоново изображение, което не се превърта с останалата част от страницата - като воден знак. Просто използваш стила фон-прикачен файл: фиксиран; заедно с фоновото ви изображение. Други опции за фона ви включват да ги направите плочки само хоризонтално или вертикално с помощта на фон-повторение Имот. Пишете background-repeat: repeat-x; за да поставите изображението хоризонтално и background-repeat: repeat-y; да плочка вертикално. И можете да позиционирате фоновото си изображение с фон-позиция Имот.
И CSS3 добавя повече стилове и за вашия произход. Можете да разтегнете изображенията си така, че да отговарят на всякакъв размер на фона или да зададете мащабиране на фоновото изображение с размера на прозореца. Можете да промените позицията и след това да изрежете фоновото изображение. Но едно от най-добрите неща при CSS3 е, че вече можете да наслоявате множество фонови изображения, за да създадете още по-сложни ефекти.
HTML5 помага за стилни изображения
The ФИГУРА елемент в HTML5 трябва да се поставя около всички изображения, които могат да стоят самостоятелно в документа. Един от начините да се мисли за това е, ако изображението може да се появи в приложение, то трябва да е вътре в ФИГУРА елемент. След това можете да използвате този елемент и ФИГАПЦИЯ елемент, за да добавите стилове към вашите изображения.