@frontend_school #интересное

Драм машина

Полноценная, работающая и издающая звуки драм машина. Приятный дизайн и несложная реализация.

@frontend_school #интересное

Почти Minecraft

Сделан с помощью языка разметки Haml и SCSS, JavaScript тут не используется.
Почему "почти"? Ну, тут можно менять блоки, вращать объект и менять положение блоков, но вот монстров бить не выйдет 🤷‍♂️
В любом случае результат классный.

@frontend_school #интересное

Nodivember. Автомобиль

Сегодня в нашей рубрике очередной участник челенджа Nodivember. И как вы можете догадаться этот автомобиль и анимация сделаны на чистом CSS без использования HTML или JS. Проект классный, но жаль, что у автора не хватило опыта на создание более современной модели, да и по разметке ездить не самая хорошая привычка 🤔

@frontend_school #интересное

Бутерлоадер

Такой забавный и приятный лоадер отлично подойдёт для какого-нибудь кулинарного сайта или кафе, а делается достаточно просто. В этом проекте автор использовал всего две технологии - HTML и SCSS. Попробуйте повторить!

@frontend_school #интересное

Редактор clip-path

Сегодняшний проект нацелен на облегчение жизни всем, кто на него наткнулся. С помощью этого редактора вы можете настроить анимацию, форму, размер элемента clip-path просто выбирая готовые пресеты и настраивая их с помощью шаблона превью. А дальше вы просто открываете вкладку CSS code или Preset code и копируете содержимое в ваш проект. Здорово! Правда?!

Добавляйте пост в избранное, чтобы не потерять и делитесь с друзьями-разработчиками!

@frontend_school #интересное

Among Us

Сцена из игры Among Us, выполненная на HTML и CSS. Звёзды сделаны отдельными блоками, которые потом анимированы.

@frontend_school #интересное

Невозможная лампочка

Вы его не ждали, а он вернулся! Упрямый медведь снова в деле и в это непростое время он не позволит вам тратить электричество понапрасну. Выполнен на стандартном стеке HTML-CSS-JS + библиотека GSAP.

CodePen

@frontend_school #интересное

Диммерный выключатель

Сегодня предлагаем вам ознакомиться с кодом следующего проекта, а именно диммерного выключателя света. Каждый раз перезагружая страницу вы получите разный цвет освещения, а поворот выключателя меняет степень освещения. Посмотрите, как он реализован с использование Pug - Stylus - JS.

CodePen

@frontend_school #интересное

Дизайнерская чаша

Чаша, может, и не блещет дизайном, но зато она может помочь вам в создании уникального и приятного дизайна вашего сайта! С помощью HTML-препроцессора Pug, CSS-препроцессора Stylus, JS библиотеки Jquery и толики магии эта чаша по клику выдаст вам пару цветов.

CodePen

@frontend_school #интересное

Kill The King

Сегодня предлагаю вам ознакомиться с очередной игрой. Суть просто - убивай приспешников короля, подбираясь к нему всё ближе и ближе. Из особенностей стоит отметить наличие звука и даже голосов у персонажей, а также приятную графику для подобного проекта.

CodePen

@frontend_school #интересное

Диско-куб

Диско-шар уже не модно! Теперь в моде диско-куб. Приятный дизайн, забавная анимация и простая реализация - что ещё нужно для качественного CodePen проекта?! Выполнен на HTML и CSS с использованием препроцессоров Pug и Stylus соответственно.

CodePen

@frontend_school #интересное

Лабиринт

В воскресенье на обед у нас лабиринт. Управление на джойстике, что немного затрудняет задачу. А задача состоит в том, чтобы одновременно доставить все четыре шарика в центр. Выполнен на HTML, CSS и JavaScript.

CodePen