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