Стилізацію елементів на власному сайті, безперечно, можна назвати однією з найважливіших задач, що стоять перед web-майстром. Тут, як і в житті, зустрічають по одягу. Унікальний стиль, краса і в той же час простий і інтуїтивно зрозумілий дизайн не тільки допоможуть скласти перше враження, а й привернуть нових читачів, клієнтів або покупців, в залежності від спрямованості сайту.
прозорість контенту
Створюючи засобами CSS-прозорість контенту, для початку варто зрозуміти, як необхідно прописувати саму форму. Звичайно ж, в даному матеріалі не буде поглиблення в стандартні теги для програмування сторінки сайту в загальному. Для наочного прикладу мова піде про прямокутної області, пофарбованої монотонної заливкою. Щоб відобразити її, потрібно створити простенький файл стилю CSS з подальшою прив`язкою, або ж розмістити код прямо на сторінці html-документа. Прописавши для прямокутного блоку необхідні параметри висоти, ширини, кольору і контура, до стилю необхідно додати код, що дозволяє зробити прозорість CSS-об`єкта. За це відповідає параметр «opacity: 0.X», так як це і є рівень видимості. Чим ближче його значення до одиниці, тим об`єкт стає непомітніше. Даний стиль буде справно працювати в браузерах, що володіють підтримкою CSS3. Такими інструкціями зараз володіють практично всі сучасні веб-оглядачі.
Підвищення універсальності коду
Якщо ж програміст бажає оптимізувати свій контент для старіших додатків, йому необхідно буде вивчити додаткові стилі.
Для Internet Explorer версії 5.5 і вище більш прийнятною кодом є вельми довга і негарна рядок - «filter: progid: DXImageTransform.Microsoft.Alpha (opacity = X)», де параметр прозорості необхідно вказувати вже не в частках від одиниці, а в сотнях. Його максимальне значення, при якому прозорість кольору CSS-об`єкта стає повною, становить 100.
Власний код існує і для менш популярних браузерів. Одним з таких є Konqueror, більше відомий користувачам робочого середовища KDE на UNIX-подібних системах. Для нього прозорість CSS буде потрібно прописати параметром «-khtml-opacity: 0.X».
Для повної впевненості в оптимізації свого коду можна додати рядок, що забезпечує підтримку одних з перших версій браузерів Mozilla: «-moz-opacity: 0.X».
Виконавши подібну оптимізацію, web-майстер зможе домогтися правильного відображення свого контенту на більшості призначених для користувача пристроїв.
Активність при наведенні
Так як CSS-прозорість найчастіше використовується як оформлення для елементів з гіперпосиланнями, то активність при наведенні на них стає однією з першорядних завдань. Як приклад можна розглянути той же прямокутник. Припустимо, необхідно, щоб при наведенні на блок прозорість змінювалася з 0 до значення 0.5. Для отримання такої можливості знадобиться всього лише занести вже наявний стиль, який відповідає за прозорість, під додатковий CSS-параметр hover. Даним властивістю користуються і для додавання таких ефектів, як зміна кольору і форми об`єктів при наведенні. Це дозволяє зробити необхідні області візуально активними, привертаючи увагу відвідувачів до посилань або контенту.
Застосування для зображень
У тому випадку, якщо описаний вище процес зрозумілий, додати за допомогою CSS прозорість для зображень не складе ніяких труднощів. Тут навіть не потрібно буде вносити зміни в сам код стилю. Його можна залишить незмінним. Попрацювати доведеться тільки при верстці картинок в сам html-документ. Якщо в попередніх випадках для вставки елемента використовувалися теги «div», то тут просто потрібно замінити їх на «img», які відповідають даному типу контенту. Стиль же для зображень підключаємо той же, що і для блоків. Звичайно, застосовуючи CSS, описаний на початку статті, потрібно буде змінити параметри висоти, ширини і країв для гармонійного виду вставленої картинки.
Прозорість тексту і фону
Варіант в прикладі з текстом аналогічний вставці зображень. Створювати в CSS прозорість отдельнотакже не буде потрібно. В даному випадку необхідно буде замінити теги на ті, що використовуються для верстки текстових полів. Такими є «p» і «span».
Коли текст прописаний в тілі html-документа без використання спеціальних тегів, додати прозорість буде досить важко і довго за часом. Тому подібний варіант розглядати не має сенсу.
На випадок, якщо на сайті потрібно зробити прозорість фону, CSS і тут стане оптимальним варіантом. Так як background є по суті тієї ж картинкою або формою, до нього необхідно всього лише прикріпити наш стиль в основному коді веб-ресурсу.
