Мода весна-літо 2011. Балет, балет, балет
Судячи з усього, що недавно вийшов на екрани кінофільм «Чорний лебідь» викликав жвавий інтерес до балетної…
Стилізацію елементів на власному сайті, безперечно, можна назвати однією з найважливіших задач, що стоять перед 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 є по суті тієї ж картинкою або формою, до нього необхідно всього лише прикріпити наш стиль в основному коді веб-ресурсу.
Судячи з усього, що недавно вийшов на екрани кінофільм «Чорний лебідь» викликав жвавий інтерес до балетної…
Продовжуємо нашу розмову про яскравих ідеях і напрямах модного сезону весна-літо 2015. Сьогодні ми поговоримо про те,…
Мода весна-літо 2013 представляє прозорі і м`які тканини і матеріалиДва слова могли б, на наш погляд, висловити…
Тенденція прозорості, відкритості, жіночої сексуальності завжди була актуальною для теплого сезону. Наскільки ви хочете…
"Мій будинок - моя фортеця" - фраза, яку знають всі. Але, чомусь, в один будинок хочеться повертатися знову і знову, а…
Як зробити посилання на сайт в тілі документа Word"Посилання в документі Word дозволяє не тільки перейти на сайт, але і…
Повноцінне функціонування сайтів визначається безліччю параметрів. Одним з них є підтримка cookies або можливість…
В даний час будь-який веб-програміст впевнено відповість на питання: HTML - що це за розширення? Але ж не всі є…
Нерідко в статтях можна побачити абревіатуру HTML. Власне, завдяки цьому поняттю інтернет і став таким, яким він…
Кожна інтернет сторінка має свою посилання (адреса). Що таке посилання і в чому її суть? Посилання - це інтерактивний…
Тим, для кого Інтернет - це не просто віртуальний світ розваг, а й місце заробітку, не обійтися без елементарних знань…
«Що таке адресна рядок?» - Іноді недосвідчені користувачі задають питання, відповіді на які, здавалося б,…
Сьогодні ми поговоримо про те, чим відкрити CSV-формат. Розшифровується ця абревіатура як Comma Separated Values.…
Інтернет давно став невід`ємною частиною повсякденного життя. Люди із задоволенням заходять на різні сайти, щоб…
Сьогодні ми поговоримо про значення слова "віньєтка". Що це, як народився цей термін і яким чином застосовується в…
Звичайно ж, ви не раз бачили на різних сайтах цікаві символи, які не можна просто ввести з клавіатури. Але як…
Наявність зображень на веб-сторінках покращує їх зовнішній вигляд, привертає увагу, а також сприяє кращому сприйняттю…
Поняття "теги" зустрічається в інтернеті повсюдно. Що таке теги? Це спеціальні слова або сполучення слів, які можуть…