Полезная вЁрстка
8.9K subscribers
44 photos
13 videos
16 files
35 links
Канал про вёрстку. Готовые решения повседневных задач с которыми сталкиваются верстальщики и фронтендеры.

Пригласить друга: @code_advantage

Сотрудничество: @noname_media

Канал на бирже: telega.in/channels/+nSuZ30BALUg1Zjdi/card?r=Wj7h1mbl

№ 4953335238
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Lightbox

Это JS-библиотека, которая при клике на уменьшенную копию картинки открывает полную версию картинки на той же странице с различными красивыми эффектами.

#js #библиотека
👍1
С помощью какого свойства можно сделать рамку вокруг элемента, не влияя на его CSS-размеры?
Anonymous Quiz
49%
border
10%
outline-offset
38%
outline
3%
overflow
👍5🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Direction aware hover effect

Эффект наведения с учетом направления курсора.
Реализован на CSS и не много js.

#css #js
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Filter Cards

Эффект размытия неактивных карточек при наведении, реализованный на чистом CSS.

#css
👍3🔥1
Какой медиа-запрос определит цветовую схему операционной системы пользователя?
Anonymous Quiz
28%
color-index
37%
prefers-color-scheme
9%
aspect-ratio
26%
theme
👍1
Как правильно объявить переменную в CSS?
Anonymous Quiz
40%
$color: blue;
37%
--color: blue;
6%
!color: blue;
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке. 

HTML
Обычный неупорядоченный список

#js #css
Какое значение по умолчанию свойства position?
Anonymous Quiz
22%
absolute
6%
fixed
21%
relative
51%
static
👍1
С помощью чего возможно сделать вычисляемое значение в CSS?
Anonymous Quiz
14%
value()
2%
attr()
74%
calc()
10%
math()
Bandicam 2022-03-02 21-12-17-245.m4v
34.9 KB
Bouncing Ball Checkbox

Интересная реализация чекбокса

#css
Полезная Вёрстка Httpst.Mecode Advantage.m4v
145.2 KB
Progress Clock

Часы реализованные на js с круговыми прогресс линииями

#css #javascript
Укажите селектор псевдокласса:
Anonymous Quiz
8%
*
2%
active
8%
.active
82%
:active
1
Полезная Вёрстка Httpst.Mecode Advantage (1).m4v
1.2 MB
BgScroll.js

Это параллакс эффект для фона при прокрутке страницы

#javascript
👍1
Если задать height в процентах, то они будут рассчитаны относительно...
Anonymous Quiz
15%
...ширины родительского блока
68%
...высоты родительского блока
14%
...высоты body
3%
...ширины body
Какой псевдокласс используется для непосещённых ссылок?
Anonymous Quiz
12%
:url
45%
:link
30%
:visited
13%
:active
👍2
Какая единица соответствует 1% ширины окна браузера?
Anonymous Quiz
28%
em
13%
rem
47%
vw
13%
vh
👍3
Полезная Вёрстка Httpst.Mecode Advantage(1).m4v
883.5 KB
Canvas Cloud

Облачная маска для просмотра скрытого изображения, которая привязана к движению курсора. Реализована с помощью JavaScript.

#javascript #анимация
🔥2👍1
Полезная_Вёрстка_Httpst_Mecode_Advantage_11.m4v
750.1 KB
Mitosys Canvas

Фоновая анимация в виде деления клеток, реализованная с помощью JavaScript.

#анимация #javascript
Полезная_Вёрстка_Httpst_Mecode_Advantage_21.m4v
999 KB
Sunbeams

Эффект прохождения солнечных лучей сквозь листву дерева при движении изображения. Реализован с помощью шейдеров и JavaScript.

#javascript #анимация
👍3