css3 (21)

Адаптивне меню з допомогою CSS3 та jQuery

В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки): {full-post-img} HTML Ми обертаємо все в nav елемент з класом nav-bar. Далі створюємо div з класом nav...

Codeguida · 27 грудня 2021 · 16

CSS фото-ефекти. Частина перша: Вінтаж

Ефект ерозії Цей ефект ми зазвичай бачимо у фільтрах, які надають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст. {full-post-img} Фото з ефектом ерозії: {full-post-img} Крок п...

Codeguida · 08 грудня 2021 · 5

CSS фільтри в дії

CSS filter надає змогу модифікації рендеру елементів в браузері. Ви можете використовувати його, щоб застосувати візуальні ефекти, такі як розмиття або зміна кольорів. Є багато способів його використання: від надання фільтрів типу Instagram/Photoshop...

Codeguida · 24 листопада 2021 · 6 · 2

Як використувати Animate.css

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

Codeguida · 04 жовтня 2021 · 23

9 недооцінених можливостей CSS

За більше як 20 років свого існування CSS став стандартом стилізації веб-сторінок. Продовжують виходити нові специфікації (Наприклад, CSS4), що додають нові круті можливості: анімації, трансформації, нові одиниці виміру. В швидкому світі веб-розробки...

Codeguida · 01 жовтня 2021 · 10

Awesome CSS3 - бібліотека CSS3 анімації

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

Codeguida · 28 серпня 2021 · 7

Градієнтний текст за допомогою CSS3

Це буде дуже коротка стаття, так як цей ефект є дуже швидким в реалізації та легким у застосуванні . Я покажу вам, як можна зробити барвистий градієнтний ефект для тексту використовуючи CSS3 властивості background-clip та text- fill-color. Зверніть у...

Codeguida · 24 серпня 2021 · 8

Як створити простий Drag and Drop компонент

Функція перетягування з HTML 5 може оптимізувати Ваш сайт за допомогою більш динамічних інтерактивних елементів, які, без сумніву, сподобаються Вашим користувачам . HTML 5 став важливим аспектом у веб-розробці, особливо у створенні високотворчих та і...

Codeguida · 03 серпня 2021 · 179

Як створити форму серця з CSS

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

Codeguida · 24 липня 2021 · 15

Як зробити drop-down box за допомогою CSS3 анімації і checkbox

У цьому уроці я покажу вам, як зробити drop-down box за допомогою CSS3 анімації і checkbox хаку. Зазвичай для таких речей застосовують JQuery, але завдяки CSS3 ми можемо зробити це використовуючи властивість transition. Погляньте на демо! {full-post...

Codeguida · 21 листопада 2020 · 3

Найпростіший cпосіб cтворювати сайдбари однакової висоти

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

Codeguida · 03 липня 2020 · 10

3 круті Hover-ефекти для зображень на чистому CSS3

Сучасний веб надає нам безліч методів, які можна використати для створення цікавих взаємодій іж елементами, але самі прості та елегантні - це, зазвичай, CSS методи, і, зокрема, нові можливості, які доступні нам з CSS3. В старі часи, ми повинні були п...

Codeguida · 11 червня 2020 · 13