CSS прозрачност и нейното приложение за различни елементи

Стилизиращите елементи на вашия сайт, без съмнение, могат да бъдат наречени една от най-важните задачи пред уеб-майстора. Тук, както и в живота, се срещат на дрехи. Уникален стил, красота и в същото време опростен и интуитивен дизайн не само ще спомогне за първо впечатление, но и ще привлече нови читатели, клиенти или клиенти, в зависимост от посоката на сайта.

Прозрачност на съдържанието

Създавайки средства за CSS-прозрачност на съдържанието, за начало си струва да се разбере как е необходимо да се предписва самата форма. Разбира се, в този материал няма да има отстъп в стандартните тагове за програмиране на страницата на сайта като цяло. За илюстративен пример, ние ще се съсредоточим върху правоъгълна област, оцветена монотонна пълнеж. За да го покажете, ще трябва да създадете прост CSS стилов файл с последващо свързване или да поставите кода директно на страницата на html документа. След като са предписани необходимите височина, ширина, цвят и параметри на контур за правоъгълен блок, трябва да добавите код към стила, който ви позволява да направите CSS обекта прозрачен. Параметърът “непрозрачност: 0.Х” е отговорен за това, тъй като това е нивото на видимост. Колкото по-близо е стойността му към едно, така и обектът става невидим. Този стил ще работи правилно в браузърите с поддръжка на CSS3. Почти всички съвременни уеб браузъри имат такива инструкции.

Увеличете универсалността на кода

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

За Internet Explorer версия 5.5 и по-висока, възприеманият код е много дълга и грозна линия - "filter: progid: DXImageTransform.Microsoft.Alpha (непрозрачност = X)", където параметърът за прозрачност трябва да бъде посочен не в части от един, а в стотици. Неговата максимална стойност, при която прозрачността на цвета на CSS обекта става пълна, е 100.

За по-малко популярните браузъри съществува собствен код. Един от тях е Konqueror, по-добре познат на потребителите на работния плот на KDE на UNIX-подобни системи. За това трябва да настроите прозрачността на CSS с параметъра “-khtml-opacity: 0.X”.

За пълно доверие в оптимизирането на кода, можете да добавите линия, която осигурява поддръжка на една от първите версии на браузърите на Mozilla: “-moz-opacity: 0.X”.

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

Активност при навъртане

Тъй като прозрачността на CSS най-често се използва като дизайн за елементи с хипервръзки, активността на навигирането става една от основните задачи. Като пример, разгледайте същия правоъгълник. Да предположим, че е необходимо, когато задържите върху блок, прозрачността се променя от 0 на стойност 0.5. За да се получи такава възможност, ще е необходимо да добавите вече съществуващия стил, отговорен за прозрачността в рамките на допълнителния Параметър css на hover Това свойство се използва и за добавяне на ефекти като промяна на цвета и формата на обектите по време на навигацията. Това ви позволява да направите необходимите области визуално активни, привличайки вниманието на посетителите към връзките или съдържанието.

Заявление за изображения

В случай, че описаният по-горе процес е ясен, добавянето на прозрачност към изображенията с CSS ще бъде лесно. Той дори не трябва да прави промени в самия стилов код. Тя може да бъде оставена непроменена. Ще трябва да работите само с оформлението на картинките в самия html-документ. Ако в предходните случаи за вмъкване на елемента се използват тагове «div», тук просто трябва да ги замените с «img», подходящ за този тип съдържание. Стилът за изображения е същият като за блоковете. Разбира се, прилагайки CSS, описан в началото на статията, ще трябва да промените параметрите на височина, ширина и ръбове за хармоничния изглед на вмъкнатото изображение.

Прозрачност на текста и фона

Текстовият пример е подобен на вмъкването на изображения. Създайте прозрачност в CSS отделно също не се изисква. В този случай ще бъде необходимо да замените таговете с тези, използвани за оформлението на текстовите полета. Това са “p” и “span”.

Когато текстът е написан в тялото на HTML документ, без да се използват специални тагове, добавянето на прозрачност ще бъде много трудно и отнемащо много време. Ето защо, тази опция няма смисъл да се разгледа.

В случай, че уебсайтът е необходим, за да направи фона прозрачен, CSS ще бъде най-добрият вариант тук. Тъй като фонът е по същество едно и също изображение или форма, просто трябва да придадете нашия стил в основния код на уеб ресурса.