У цьому підручнику я збираюся показати вам, як відтворити ефект глянцевого зображення за допомогою градієнтів CSS3.
структура HTML
Отже, в цьому короткому міні-підручнику ми застосуємо структуру основного HTML5. При найменшій кількості можливих варіантів, так як потрібного ефекту слід домогтися, в основному користуючись CSS. Тому найкраще зберегти HTML настільки чистим і семантичним, як тільки можна.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Отже, крім сторінкової структури і обгортки, у нас в основі є всього один елемент DIV (з класом photo), в який ми помістили тег IMG.
Ось і весь HTML! Тепер перейдемо до розділу CSS.
Спочатку просто встановимо стилі сторінки, щоб можна було впритул зайнятися елементом photo. Тут ми всього лише додаємо до всієї сторінці фоновий колір і встановлюємо обгортають DIV.
Призначення стилів DIV-у з фото
Наступним кроком призначаємо стилі містить div'у. Тут ми визначаємо висоту і ширину блоку. На даному етапі це найважливіше завдання, як і завдання властивості position значення relative. Все інше - чисто в естетичних цілях. Начебто класної подвійний тіні блоку навколо всього зображення і рамки в 1px.
Тепер зображення виглядає добре. Але нам дечого не вистачає - самого глянцевого ефекту. І це - останній етап даного міні-підручника.
Призначення стилів псевдоелементу фотографії: before
Це найважливіший крок за все ефекту, ми збираємося призначити стилі псевдоелементу div'а: before. Таким чином можна створити стиль глянцевого вигляду вгорі фотографії без необхідності додавання додаткової розмітки HTML. Це більш семантично. Тут ми абсолютно позиціонуємо цей елемент поверх фото (ось чому так важливо встановити в попередньому кроці position: relative) і застосовуємо градієнти CSS3 до тла цього нового псевдоелемента.
Я знаю, всі ці числа початківцям дизайнерам здаються досить страшними. Але вони в основному є значеннями RGBA (значеннями кольору, до яких ми можемо застосувати непрозорість) всередині «stop'ов» градієнтів. Як би пояснити, що відбувається ... у нас є дві половинки градієнта, що йде з ВЕРХНЬОГО ЛІВОГО кута до нижнього правого. Перша половина починається з повної прозорості до 50% прозорого білого. Друга половина йде назад до повної прозорості (ось як створюється діагональна лінія) і такий і залишається.
висновок
Сподіваюся, вам сподобається і стане в нагоді цей підручник.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
