Имотът css `transparency `е лесен начин да направите дизайна на сайта по-интересен

Днес създаването на уебсайт дизайн се превръща в истинско изкуство. Това не е само набор елементи от определен цвят и размер, шрифтове различни стилове и тематични рисунки. За да се направи сайта различен от другите, за да привлече вниманието на посетителите и да ги насочи към тези или други елементи, се използват огромен брой методи и инструменти. Сред тях има много популярен имот CSS - прозрачност. Тази техника е доста модерна и ефективна и поради това се използва често. Можете да дадете прозрачност на различни обекти на страницата на сайта - например текст, цял блок или картина. Това се постига и по много начини. Нека ги разгледаме по-долу.

Параметри за определяне на прозрачността на елементите

Параметрите, които позволяват да се регулира степента на прозрачност на елементите, са няколко. Те се използват в зависимост от конкретните цели, както и от браузъра, при който дизайнът е "коригиран". Те включват следните свойства:

• непрозрачност;
• филтриране;
• PNG изображение като фон.

Стойностите на свойството css "прозрачност" се променят както следва: колкото по-голяма е цифрата, толкова по-ниска е прозрачността на елемента. При непрозрачност той варира от 0 до 1, във филтъра - от 10 до 100. И последният се използва за браузъра Interet Explorer, а за останалите се използва непрозрачността.

Прозрачност на изображението (промяна)

Нека започнем с опцията, когато прозрачността ще се появи, когато задържите курсора на мишката върху елемент курсора на мишката.

Помислете как да зададете прозрачността на картината. CSS предлага две опции. За целта е необходимо да го напишете директно в кода на html документа, както следва:

1. Посочете пътя към изображението.
2. Определете настройките за прозрачност, когато задържите курсора над курсора и не. За тази цел използваме свойствата onmouseover и onmouseout, в които задаваме стойностите на непрозрачност и филтриране.

Тези същите характеристики могат да бъдат записани в css-документа, а в изходния код да се добави само линк към него. Резултатите са еднакви.

Прозрачност на блоковете на текста и страниците

Що се отнася до текста или блока (div div), css предлага използването на опция подобна на създаването на прозрачност на изображението, т.е. чрез използване на свързан css файл, в който ще бъдат зададени желаните параметри. Можете да отидете по-прост начин. При уточняване на стиловете на блока div style или p text, предписвайте следния html код за елементи onmouseover и onmouseout. И двете опции работят и дават желания резултат.

Константа за прозрачност

В някои случаи прозрачността на обект, дизайнерски елемент или текст трябва да се конкретизира непрекъснато. В тази ситуация решението е дори по-лесно, отколкото когато задържите курсора на мишката.

За елемента css прозрачността се дава от следния код. В бот стил div, присвояваме стойности за фон (например # ff8800), непрозрачност (напр. 0,5), както и ширина и подложка.

За изображението в кода се въвеждат стойностите на непрозрачност и филтър, а също така се посочва пътят към изображението.

RGBA метод

Има и други опции за използване на тази собственост css: прозрачността може да се приложи към цвета на фона на всеки елемент на дизайна. За тази цел се използва методът RGBA. Първите три букви показват основните цветове (червено, твърдо, синьо), а последното - алфа, което определя нивото на прозрачност. Използвайки RGBA-формат, предписвайте степента на прозрачност, като го посочвате в последната цифра. Например, това е така: фон: rgba (240,2,33,0,4035).

заключение

По този начин, използвайки проста, но ефективна собственост css "прозрачност" в процеса на работа върху дизайна на обекта, можете да направите елементите му по-интересни и по-видими, с минимални усилия. Описаните опции за уточняване на характеристиките на прозрачност ще ви помогнат в това.