WebDev Coach | Practice
392 subscribers
1 photo
22 videos
54 links
Теория без практики бесполезна. Практикуйся в веб-разработке каждый день вместе с нами.

Admin: @oleksandr_panashchuk
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Confetti Button

Сногсшибательный успех при нажатии кнопки

Скачать тут: https://codepen.io/coopergoeke/pen/wvaYMbJ

#button

👉 @webdev_coach_practice
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Confirm confetti button

Сногсшибательный успех при нажатии одной из кнопочек

Скачать тут: https://codepen.io/aaroniker/pen/bGVGNrV

#buttons

👉 @webdev_coach_practice
👏1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Checkbox group styled as tiles

Чекбокс социальных сетей

Скачать тут: https://codepen.io/havardob/pen/BapJYMg

#checkbox

👉 @webdev_coach_practice
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
3D Room - Pure CSS

3D комната, написана на CSS

Скачать тут: https://codepen.io/ricardoolivaalonso/pen/mdPzrpe

#room

👉 @webdev_coach_practice
👍3❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Apple TV - Word Rotation

Анимация ротации слов. Реализована при помощи JavaScript.

Скачать тут: https://codepen.io/stevenlei/pen/RwpRgzy

#tv

👉 @webdev_coach_practice
👍2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Touch device jelly menu concept

Анимация желейного меню при прокрутке. Реализована с помощью JavaScript и CSS.

Скачать тут: https://codepen.io/sol0mka/pen/AEbgXK

#анимация #css #js

👉 @webdev_coach_practice
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Direction-aware 3D hover effect (Concept)

Трехмерный эффект наведения с учетом направления (концепция). Реализовано с помощью JavaScript и CSS.

Скачать тут: https://codepen.io/noeldelgado/pen/nweYMz

#анимация #css #js

👉 @webdev_coach_practice
🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Full Page Intro & Navigation

Введение на всю страницу и навигация. Реализовано с помощью JavaScript и CSS.

Скачать тут: https://codepen.io/codyhouse/details/OJmXKp

#анимация #css #js

👉 @webdev_coach_practice
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
CSS only 3d Macbook Air

Анимация макбука. Написана на чистом CSS.

Скачать тут: https://codepen.io/neoberg/details/DEZbKv

#анимация #css

👉 @webdev_coach_practice
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Bouncing DVD animation

Прыгающая анимация DVD. Реализована с помощью CSS.

Скачать тут: https://codepen.io/dostonnabotov/pen/dyKOLRP

#анимация #css

👉 @webdev_coach_practice
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Modal Mitosis | CSS-Only Gooey Content Toggle

Анимация дополнительной информации к карточке, появляется при нажатии. Реализована с помощью CSS.

Скачать тут: https://codepen.io/team/keyframers/pen/YbGbOd

#анимация #css

👉 @webdev_coach_practice
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Show & Tell @ Develop Denver 2016

Анимация почти невидимого шрифта. Написана на чистом CSS.

Скачать тут: https://codepen.io/chriscoyier/pen/RRxQeg

#анимация #css

👉 @webdev_coach_practice
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Six circles - bees & bombs

Анимация заднего фона. Реализована с помощью JavaScript и CSS.

Скачать тут: https://codepen.io/yukulele/pen/LoBYzO

#анимация #css #js

👉 @webdev_coach_practice
🤯3
This media is not supported in your browser
VIEW IN TELEGRAM
Animated CSS Gradient Border

Анимированная граница градиента CSS. Написана на чистом CSS.

Скачать тут: https://codepen.io/mike-schultz/pen/NgQvGO

#анимация #css #js

👉 @webdev_coach_practice
❤‍🔥1👏1
This media is not supported in your browser
VIEW IN TELEGRAM
Glassmorphing card

Карточка в стиле стекломорфизма с плавным 3D-наклоном при наведении, созданная с помощью библиотеки Tilt.js.

Ссылка: https://codepen.io/pieter-biesemans/pen/QWKmXEE

#стекломорфизм #карточка #tiltjs #3D

👉 @webdev_coach_practice
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
TOASTS

Пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе. Реализовано с помощью CSS и JavaScript.

Ссылка: https://codepen.io/mrtrimble/pen/mdEgzzR

#уведомления #css #javascript

👉 @webdev_coach_practice
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Day-Night toggle switch

Пример реализации переключателя "день-ночь" на чистом CSS.

Ссылка: https://codepen.io/rebelchris/pen/jOMGweo

#переключатель #css

👉 @webdev_coach_practice
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Touch device jelly menu concept

Анимация желейного меню при прокрутке. Реализована с помощью JavaScript и CSS.

Ссылка: https://codepen.io/sol0mka/pen/AEbgXK

#анимация #css #js

👉 @webdev_coach_practice
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Direction-aware 3D hover effect (Concept)

Трехмерный эффект наведения с учетом направления (концепция). Реализовано с помощью JavaScript и CSS.

Ссылка: https://codepen.io/noeldelgado/pen/nweYMz

#анимация #css #js

👉 @webdev_coach_practice
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
RatingFace - система рейтинга реализована с помощью слайдера также смайлика (старайтесь держать его зелёным)

Скачать тут: https://codepen.io/jkantner/pen/YzLQoXM

#JS #RatingFace

👉 @webdev_coach_practice
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Twitter Button Concept by Erik Deiner

Варіант підпису на Twitter на чистому CSS.

Посилання: https://codepen.io/bennettfeely/pen/DvNXvq

#CodePen

👉 @webdev_coach_practice
👍1