Блог

CSS ефекти при наведенні на зображення

У сучасному веб дизайні домінують тонкі лінії і легкі, як би повітряні конструкції, чітка типографіка, багато простору і білий колір. Динамічні елементи, що розробляються під дизайн такого типу, повинні відповідати йому. Розглянемо приклади витончених hover-ефектів за допомогую CSS.

Витончені веб-ефекти, що використовуються "при наведенні"

Беручи до уваги ці красиві і “легкі” тенденції, хотілося б запропонувати Вам на розгляд деякі творчі ідеї для оформлення галереї зображень.

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

У Firefox-е деякі елементи можуть відображатися не зовсім коректно.

Для створення розмітки були використані такі теги як “сітка” і “фігура”:

А тепер давайте розглянемо як працюють наші ефекти виключно за допомогою таблиці стилів, для прикладу візьмемо описаний вище “effect-sadie”:


figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
transition: transform 0.35s, color 0.35s;
transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
color: #fff;
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
opacity: 1;
transform: translate3d(0,0,0);
}

Сучасний веб інтерфейс

Розробка веб Інтерфейсів відноситься до того типу завдань, виконання яких вимагає знань відразу декількох предметних областей.

Веб дизайн

Для створення ефективного інтерфейсу необхідно мати дизайнерський смак, володіти навиками роботи в спеціальних програмах (фотошоп, ілюстратор і т.д.) і постійно бути в курсі останніх тенденцій веб-дизайну.

XHTML і CSS

Наступна необхідна предметна область знань це, так звана, “верстка”. Сам термін з’явився на зорі зародження вебдизайну і походить від газетної/журнальної “верстки”. Перша веб верстка зводилася до того, що б нарізати картинки зроблені в графічному редакторі і виводити їх на сторінці за допомогою невеликого числа тегів. Сучасна ж верстка залежить від графічних редакторів в набагато меншому ступені, тому, що практично усі так званні стилі задаються за допомогою каскадних таблиць стилів “CSS”.

Особисто я вважаю, що гарний веб-дизайнер просто зобов’язаний знати HTML і CSS, тому як неможливо створювати якісний дизайн не маючи уявлення про його реалізації в інтернеті.

JavaScript програмування

Третя необхідна область знань стосується програмування динамічних елементів веб інтерфейсу. Може скластися враження, що специфіка кваліфікації JavaScript-програміста полягає в тому, що він не повинен підбирати кольори, малювати кнопочки і «наводити іншу красу». Але в сучасних умовах фахівець з розробки веб інтерфейсів помимо дизайну і верстки повинен добре разбіратся в JavaScript- е і вміти продумати оптимальну структуру HTML і CSS для елементів управління, з якою йому ж буде зручно працювати згодом при розробці анімації для елементів.

Золота середина

Якщо що-небудь можливо реалізувати за допомогою CSS – краще реалізувати це через CSS.

Пояснити такий підхід дуже просто – JavaScript завжди складніше ніж CSS, звичайно можна з цим посперечатися, особливо якщо витягнути із старовинної скриньки IE 6,7,8 і показати, що засобами CSS мало що можна реалізувати. Навіть в тому випадку якщо CSS на вигляд більш складний – розвивати і підтримувати його набагато простіше, ніж JS.

Крім того, можна зробити ще одне спостереження:

Навіть добре знання JavaScript не може замінити собою знання CSS. Жіжнь розробника стає набагато простіше, якщо у нього є добре знання і CSS і JavaScript.

Можна багато чого зробити тільки за допомогою JavaScript. І дуже часто, не знаючи CSS, розробники так і надходять. Але ми будемо використовувати тільки кращі практики веб розробки 🙂

Практичний погляд

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

Нещодавно, мені по роботі попався сайт, лідер по доставці продуктів з ресторанів в одному з російських міст мільйонників, власники сайту скаржилися на те, що сайт при виконанні операцій став подвисать по 30-ть і більше секунд.

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

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

Сайт-сервіс ріс і успішно розвивався, додавалися нові елементи, нові адреси доставки / охоплювався передмістя і сусідні міста з’являлися нові тенденції (наприклад таrже адаптивність), але інтерфейс ніхто не хотів міняти, в нього просто за допомогою JavaScript-а “запихали” нові можливості .., паралельно з нарощуванням спроможностей змінювалися розробники проекту і як я можу судити, тенденція полягала в тому що б знайти розробників дешевше.

І ось настав час “Ч”, – конкуренти наступають на п’яти і їх ідентичні сервіси технічно починають випереджати спостережуваний нами сайт і пошукова видача по ключових запитах вже не завжди на стороні спостережуваного сайту .. а функціонал продовжує розростатися і в один прекрасний момент виявляється що середнє очікування завантаження сторінки становить понад 40-ка секунд і природно навіть постійні клієнти починають переходити до конкурентів.

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *