css3
(21)
Як зробити ефект матового скла на чистому CSS?
Сьогодні розглянемо метод створення ефекту матового скла на чистому CSS. Як на цьому демо: 1. Створимо базову розмітку HTML Щоб не ускладнювати, я збираюся показати вам як робити ефект матового скла із пустим div. Усе, що вам буде потрібно у HTML –...
Codeguida · 07 серпня 2017 · 131
Як використувати Animate.css
Ви погодитесь, якщо я скажу, що анімації та ефекти - дуже важлива функція CSS3. Раніше все це було складно уявити без JavaScript. Проте зараз існує достатньо корисних бібліотек, які суттєво полегшують процес прикрашення веб- сторінки. Однією з таких...
Codeguida · 04 жовтня 2021 · 41
Як зробити drop-down box за допомогою CSS3 анімації і checkbox
У цьому уроці я покажу вам, як зробити drop-down box за допомогою CSS3 анімації і checkbox хаку. Зазвичай для таких речей застосовують JQuery, але завдяки CSS3 ми можемо зробити це використовуючи властивість transition. Погляньте на демо! {full-post...
Codeguida · 21 листопада 2020 · 4
Адаптивне меню з допомогою CSS3 та jQuery
В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки): {full-post-img} HTML Ми обертаємо все в nav елемент з класом nav-bar. Далі створюємо div з класом nav...
Codeguida · 27 грудня 2021 · 24
3D Star Wars прокрутка тексту в CSS3
Ефект дуже простий в реалізації. HTML потрібен зовнішній елемент (#titles) та розділ, який буде прокручуватися (#titlecontent): <div><div> <p>content</p> </div></div> Зовнішній div розміщується внизу в центрі вікна браузера, п...
Codeguida · 28 січня 2020 · 3
CSS фото-ефекти. Частина перша: Вінтаж
Ефект ерозії Цей ефект ми зазвичай бачимо у фільтрах, які надають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст. {full-post-img} Фото з ефектом ерозії: {full-post-img} Крок п...
Codeguida · 08 грудня 2021 · 7
Awesome CSS3 - бібліотека CSS3 анімації
Доброго дня усім читачам. Хочу представити вашій увазі невеликий анонс нової бібліотеки CSS анімації. Створена вона на CSS3 і містить майже 90 видів анімації, а також класи для затримки і нескінченного програвання анімації. З чого складається На сай...
Codeguida · 28 серпня 2021 · 11
Вертикальне і горизонтальне центрування за допомогою CSS3 transform
Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 transform. {full-post-img} Я створив для цього клас .c...
Codeguida · 13 січня 2020 · 22
Градієнтний текст за допомогою CSS3
Це буде дуже коротка стаття, так як цей ефект є дуже швидким в реалізації та легким у застосуванні . Я покажу вам, як можна зробити барвистий градієнтний ефект для тексту використовуючи CSS3 властивості background-clip та text- fill-color. Зверніть у...
Codeguida · 24 серпня 2021 · 30