css3 (21)

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

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

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

Ефект ерозії Цей ефект ми зазвичай бачимо у фільтрах, які надають фото вінтажний стиль. Тут найтемніші кольори висвітлюються, загублюються маленькі деталі у тінях і понижується контраст. {full-post-i...
08 грудня 2021 ·
0
· 10 · Codeguida

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

CSS filter надає змогу модифікації рендеру елементів в браузері. Ви можете використовувати його, щоб застосувати візуальні ефекти, такі як розмиття або зміна кольорів. Є багато способів його використа...
24 листопада 2021 ·
1
· 28 · 2 · Codeguida

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

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

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

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

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

Доброго дня усім читачам. Хочу представити вашій увазі невеликий анонс нової бібліотеки CSS анімації. Створена вона на CSS3 і містить майже 90 видів анімації, а також класи для затримки і нескінченно...
28 серпня 2021 ·
0
· 14 · Codeguida

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

Це буде дуже коротка стаття, так як цей ефект є дуже швидким в реалізації та легким у застосуванні . Я покажу вам, як можна зробити барвистий градієнтний ефект для тексту використовуючи CSS3 властивос...
24 серпня 2021 ·
0
· 100 · Codeguida

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

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

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

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

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

У цьому уроці я покажу вам, як зробити drop-down box за допомогою CSS3 анімації і checkbox хаку. Зазвичай для таких речей застосовують JQuery, але завдяки CSS3 ми можемо зробити це використовуючи влас...
21 листопада 2020 ·
0
· 7 · Codeguida

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

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

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

Сучасний веб надає нам безліч методів, які можна використати для створення цікавих взаємодій іж елементами, але самі прості та елегантні - це, зазвичай, CSS методи, і, зокрема, нові можливості, які до...
11 червня 2020 ·
0
· 104 · Codeguida

Простий спосіб додавання CSS анімації до переходів між сторінками

Радий з вами поділитися цікавим та дуже простим jQuery плагіном Аnimsition. Animsition дає можливість додавати до посилань CSS анімацію при переході. Animsition має 18 різних анімацій: Зникнення `fade...
03 червня 2020 ·
0
· 71 · Codeguida

Створення CSS3 нотатки без використання зображень

В цій статті ми розглянемо, як створити CSS стікер для нотаток без жодного зображення! Ось як це буде виглядати: В даному випадку я використав його для відображення цитати А. Ейнштейна. Ви можете ви...
18 березня 2020 ·
0
· 30 · Codeguida

3D Star Wars прокрутка тексту в CSS3

Ефект дуже простий в реалізації. HTML потрібен зовнішній елемент (#titles) та розділ, який буде прокручуватися (#titlecontent): <div><div> <p>content</p> </div></div> Зовнішній...
28 січня 2020 ·
0
· 7 · Codeguida

П'ять способів приховати елементи в CSS

Є кілька способів приховати елемент в CSS. Можна вказати opacity: 0, visability: hidden, display: none або встановити крайні значення для абсолютного позиціонування. Ви коли-небудь задавалися питанням...
19 січня 2020 ·
1
· 1K · Codeguida

Декілька гарних текстових ефектів з використанням CSS

У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11 ефектів, які може використати кожен веб-дизай...
14 січня 2020 ·
0
· 85 · Codeguida

Вертикальне і горизонтальне центрування за допомогою CSS3 transform

Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 trans...
13 січня 2020 ·
0
· 28 · Codeguida

Як зробити ефект матового скла на чистому CSS?

Сьогодні розглянемо метод створення ефекту матового скла на чистому CSS. Як на цьому демо: 1. Створимо базову розмітку HTML Щоб не ускладнювати, я збираюся показати вам як робити ефект матового скла...
07 серпня 2017 ·
0
· 201 · Codeguida

Замінюємо Bootstrap розмітку на CSS Grid

У березні Mozilla випустила Firefox 52, куди додала підтримку CSS сітки. Якщо ви не знайомі з CSS Grid, – це двовимірна система розмітки для вебу, яка дозволяє створювати нативні шаблони розмітки для...
13 червня 2017 ·
0
· 8 · Codeguida

Стилізація повзунка браузера на CSS

Є декілька шляхів зробити власний повзунок. Ми будемо використовувати CSS3, він найпростіший. Є jQuery плагіни, що допомагають в стилізації, проте я не люблю додавати багато JavaScript коду до свого в...
03 червня 2017 ·
0
· 156 · Codeguida