Стилирайте изображенията си и използвайте изображения в стилове
Много хора използват CSS, за да коригират текста, да променят шрифта, цвета, размера и др. Но едно нещо, което много хора често забравят, е, че можете да използвате CSS и с изображения.
Промяна на самото изображение
CSS ви позволява да регулирате как изображението се показва на страницата. Това може да бъде наистина полезно за поддържане на вашите страници съвместими. Чрез поставянето на стилове върху всички изображения създавате стандартен вид за вашите изображения. Някои от нещата, които можете да направите:
- Добавете граница или очертаване около изображенията
- Премахнете цветната граница около свързаните изображения
- Регулиране на ширината и / или височината на изображенията
- Добавете капка сянка
- Завъртете изображението
- Променете стиловете, когато изображението се преобърне
Даването на вашето изображение на граница е чудесно място за старт. Но трябва да обмислите нещо повече от границата - да помислите за целия край на изображението си и да коригирате ръбовете и подложките . Изображението с тънка черна граница изглежда добре, но добавянето на някаква подложка между границата и изображението може да изглежда още по-добре.
img {
граница: 1px плътно черно;
подложка: 5px;
}
Добра идея е винаги да свързвате не-декоративни изображения , когато е възможно. Но когато го направите, не забравяйте, че повечето браузъри добавят цветна граница около изображението. Дори ако използвате горния код, за да промените границата, връзката ще отмени това, освен ако не премахнете или промените границата на връзката. За да направите това, трябва да използвате детско правило на CSS, за да премахнете или промените границата около свързаните изображения:
img> a {
граница: няма;
}
Можете също така да използвате CSS, за да промените или зададете височината и ширината на вашите изображения. Макар че не е добра идея да използвате браузъра, за да коригирате размерите на изображенията поради скоростта на изтегляне, те стават много по-добри при преоразмеряването на изображенията, така че те все още изглеждат добре. И с CSS можете да настроите вашите изображения да бъдат стандартна ширина или височина или дори да зададете размерите да са относителни към контейнера.
Не забравяйте, че при преоразмеряване на изображения, за най-добри резултати, трябва да промените размера само на едно измерение - височината или ширината. Това ще убеди, че изображението запазва своето съотношение, така че не изглежда странно. Задайте другата стойност на автоматично или я оставяйте, за да кажете на браузъра да запази съотношението между страните.
img {
ширина: 50%;
височина: автоматично;
}
CSS3 предлага решение на този проблем с новите свойства на обектите и на обектите. С тези свойства ще можете да определите точната височина и ширина на изображението и как трябва да се борави с аспектното съотношение. Това може да създаде ефекти върху пощенските кутии около изображенията или изрязването, за да получите изображението, което отговаря на необходимия размер.
Докато CSS3 обективите и свойствата за позициониране на обекта все още не са широко поддържани, съществуват и други CSS3 свойства, които са добре поддържани в повечето съвременни браузъри, които можете да използвате, за да модифицирате вашите изображения. Неща като сянка на заснемане, заоблени ъгли и трансформации за завъртане, изкривяване или преместване на вашите изображения в момента работят в повечето съвременни браузъри. След това можете да използвате CSS преходите, за да направите промените на изображенията, когато се движат, или кликват върху тях, или точно след определен период от време.
Използване на изображения като фон
CSS улеснява създаването на фантазии с вашите изображения.
Можете да добавяте фонове към цялата страница или към конкретен елемент. Лесно е да създадете фоново изображение на страницата със собствеността на фона:
тяло {
фон-изображение: url (background.jpg);
}
Променете селектора на тялото към конкретен елемент на страницата, за да поставите фон само на един елемент.
Друго забавно нещо, което можете да направите с изображенията, е да създадете фоново изображение, което не се придвижва с останалата част от страницата - като воден знак. Просто използвайте приставката за фона на стила: фиксирана; заедно с вашето фоново изображение. Другите опции за фона ви включват да ги направите плочки просто хоризонтално или вертикално, като използвате собствеността на фона.
Запиши повторение на фона: repeat-x; да подреждате изображението хоризонтално и фоново повтаряне: repeat-y; към плочките вертикално. И можете да позиционирате фоновото си изображение с собствеността на фона.
И CSS3 добавя още стилове за вашите фонове. Можете да разтегнете изображенията си, така че да се поберат във всякакви размери на фона, или да зададете размера на прозореца с размера на прозореца . Можете да промените позицията и след това да кликнете върху фоновото изображение. Но едно от най-хубавите неща за CSS3 е, че сега можете да слоете множество фонови изображения, за да създадете още по-сложни ефекти.
HTML5 помага на стилните изображения
Елементът "ФИГУРА" в HTML5 трябва да бъде поставен около всички изображения, които могат да останат сами в документа. Един от начините да се замислим е дали изображението може да се появи в допълнение, тогава трябва да е вътре в елемента ФИГУРА. След това можете да използвате този елемент и елемента FIGCAPTION, за да добавяте стилове към вашите изображения.