Css: hover. Оригінальні hover-ефекти

Кардинально нової стала ідея розділити подання інформації від коду її створює і обробного. Це було сильне рішення свого часу, але цей момент був не визнана тоді в повній мірі. Коли програмування відокремилося від окремо взятого комп`ютера, але не стало перемагати в локальній мережі або окремо взятої доменній зоні, а відразу поширилося повсюдно, тільки тоді стало очевидно, що надання інформації (в частині дизайну) і робота з нею (в частині коду) - дві боку в одній площині.

Три грані сайтостроения

З формальної точки зору є три основних компоненти (в різних синтаксичних видах), які складають сайт: PHP-код, javascript-код і опису стилів CSS. Абсолютно не важливо, як називається та якої версії використовується той чи інший компонент, яка версія HTML розмітки використовується і яка версія браузера варто. Сумісність нині не в пошані, тому в кожен момент часу актуально: що закодовано і що з того, що закодовано, може бути відображено і виконано.

Якщо раніше за ідеї билися мови, то сьогодні воювати по-пустому більше подобається виробникам стандартів в сфері інтернет-технологій і браузерів.

Особисте і суспільне

Коштів, за допомогою яких доступний Інтернет, багато (комп`ютери, ноутбуки, планшети, смартфони), браузерів теж предостатньо. Немає ніякої гарантії, що окремо взяте пристрій відобразить сайт в тому вигляді, в якому його створив розробник. Не завжди зусилля останнього досягають мети і забезпечують веб-дизайн єдиної багатоликість, тобто єдністю відображення суті, де б вона не відкривалася відвідувачеві.

Поділяючи особисте і суспільне, використовуючи в останньому тільки те, що працює, можна досягти помітних успіхів в дизайні. Краса, художній момент і веб-дизайн - доля відповідних фахівців і талантів. CSS - це код, хоча і вельми своєрідний. Його турбота описати стилі (варіанти відображення інформації). З появою мобільних пристроїв CSS довантажити реальним кодуванням у вигляді медіа-запитів. Так що варіант повторного шлюбу між дизайном і кодом - це не така вже й нереальність, як могло здатися всього пару років назад.

css hover

Розробник, займаючись розробкою CSS-стилів, спирається на свій особистий перевірений досвід і на ті конструкції CSS, які працюють на більшості браузерів, задовольняють більшість відвідувачів сайту. Слід максимально використовувати перше і мінімально Друге, тоді набагато більше шансів отримати результат, який працює практично завжди і всюди.

Перше правило: на стандарт сподівайся, але й сам не зівай

CSS: hover - це коли мишка «зайшла» на елемент сторінки. Коли мишка то покликала людей на елементі, він стає активним, але коли курсор йде в бік, він знову може змінитися і показати себе в активному стані. ldquo-: hoverrdquo-, ldquo-activerdquo- і ldquo-visitedrdquo- - найбільш затребувані псевдокласи при описі стилів.

Дуже зручно в коді сайту не піклуватися про такі дрібниці, як рух мишки над елементами. Передбачивши в таблиці опису стилів два опису:

element {

color: black-

}

element: hover {

color: white-

Відео: 24: Image hover effects - HTML and CSS Beginners tutorial

background-color: green-

}

Отримаємо при наведенні мишки на element автоматичну зміну кольору тексту з чорного на білий і зміна фону цього елементу на зелений. Псевдокласи можна застосовувати до будь-якого елементу і досягати при цьому самих різних візуальних ефектів.

веб дизайн

Друге правило: довіряючи стандартам, орієнтуйся на свій код

Все було б прекрасно, якби прогрес залишився на рівні комп`ютерів і ноутбуків, оснащених пахвами, і прогрес у стільникового зв`язку не привів до появи смартфонів, планшетів та інших мобільних пристроїв, до яких підключити такий пристрій досить проблематично.

З іншого боку, тільки на оснащених спеціальним сенсорним екраном гаджетах стає доступним маніпулювання пальцями безпосередньо на сенсорному екрані, як це вже стало звичним на смартфонах, планшетах і подібним їм пристроїв.

Є істотна різниця і: hover тут спрацьовує зовсім не так, як хотілося б. Без коду тут не обійтися, а використання медіазапросов вирішує в повному обсязі питання.

Відео: Amazing Image hover effects with HTML and CSS only (Hindi / Urdu)

button hover css

Сумісність - занадто дороге задоволення в сучасному інформаційному світі, тому, щоб забезпечити належний функціонал сайту в межах встановлених вимог до веб-дизайну і реалізації функціоналу, переважно орієнтуватися на мінімально необхідні варіанти використання: CSS hover, CSS hover focus, CSS hover active (visited) . Чим більше код (як всередині браузера, так і на сервері,) контролює веб-дизайн, тим краще. Програма - це контроль, краще коли цей контроль не здається на відкуп чинним стандартам, від яких часто не знаєш чого чекати.

css style hover

Кнопки та інші елементи сторінки

Button hover CSS - чудове рішення, але за великим рахунком кожен елемент сторінки є «кнопка». Сайт повинен бути перш за все живим і якщо в коді це не закладено, якщо завдання створити сайт, який розвивається адекватно області застосування і діє з урахуванням поведінки відвідувача, то як мінімум засобами CSS-стилів можна додати жвавість елементів сторінки.

hover ефекти

Використовувати hover-ефекти зручно. З їх допомогою можна легко надати сторінкам жвавість, але код не відає що робить мишка на екрані, якщо в ньому немає можливості відслідковувати її рух. З цієї точки зору, тобто коли код контролює рух мишки (= рух пальця на смартфоні), він може самостійно підсвічувати елемент або перетворювати його. Це не має ніякого відношення до псевдокласів, але дає повний контроль коду над зовнішнім виглядом сторінки, дозволяє адекватно відображати її на різних пристроях в різних браузерах.

Підводні камені в таблицях стилів

Сказати, що стандартні в сфері опису стилів CSS не знають, що творять, не можна, але стверджувати, що вони повноцінно взаємодіють з іншими стандартами в області інтернет-програмування, теж не можна.

Стилі і псевдокласи можна описати на етапі кодування сторінки, в момент, коли сервер формує сторінку і в динаміці: вже перебуваючи всередині браузера, можна легко створити новий стиль і змінити існуючий.

Використання AJAX, коли немає необхідності знову генерувати сторінку щоб відобразити реакцію на дію користувача, а досить змінити її елемент або декілька елементів додає трохи «перцю». «Дружба» кодів - того що вже в браузері (javascript) і того що на сервері (PHP) - доля автора (програміста) сайту.

css hover focus

Від того, як буде виконаний алгоритм цієї взаємодії, істотно залежить не тільки відображення на сторінці її елементів, але і їх подальше сприйняття кодом. Простіше кажучи, псевдокласи (зокрема) дуже гарні для статики, ніби як для парусної яхти в чистому морі при легкому вітрі - все очевидно, є і керовано. Якщо погода зміниться, або коли вітер посилиться, або відвідувач викличе непередбачену ситуацію, можна швидко налетіти на риф і втратити відвідувача.

Стандарт і його емуляція

CSS style hover може бути емулювати за допомогою javascript, шляхом використання подій onmouseover і onmouseout. Часто цим все і закінчується. З позицій здорового глузду, коли мова йде про створення реально працюючого сайту, краще тримати керування в своїх руках, ніж дарувати його на відкуп міфічним стандартам, які змінюються поза волі й бажання розробника.

Іноді можна прочитати щось на зразок «дана можливість доступна навіть в IE», але частіше можна прочитати про те, які опису стилів сприймаються тим чи іншим браузером. Значно рідше можна дізнатися про те, як відрізняється javascript в тих чи інших браузерах.

css hover active

Оцінюючи накопичений досвід, захоплюючись можливостями "хрому" і "опери", Критикуючи повільність і інертність браузера від виробника (незабутнього, дорогого серцю всякого програміста IE від "Майкрософт": «Старий добрий Internet Explorer не лаяв тільки ледачий. Або той, хто на комп`ютері вміє тільки грати в "косинку"», - цитата невідомого інтернет-учасника), слід дотримуватися золотої середини: використовувати те що працює всюди і завжди.

Людям потрібні кошти для роботи, коли їм потрібно отримати гострі відчуття вони зазвичай йдуть в загс або театр, але не в Інтернет.

Емуляція та контроль

Раніше, коли програмування ставало на ноги, прийнято було слухати старших і писати правильно. Нині дуже багато старших, занадто швидко все змінюється, і, якщо слухати всіх, то часу не вистачить навіть на дуже просту роботу, на мінімально функціональний сайт.

Програмування - це перш за все контроль, а у випадках коли стандарт необ`єктивно встановлює правила, або можна очікувати різкої зміни правила, його ліквідації і появи нового, найкращим рішенням було завжди не приймати ніяких рішень, а реалізувати необхідний функціонал сайту мінімально можливим, але реально працюючим кодом .

Поділися в соц мережах:
Оцініть статтю:


Відгуки та коментарі

Залиш коментар
Увага, тільки СЬОГОДНІ!
Схожі повідомлення
» » » Css: hover. Оригінальні hover-ефекти