@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

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

Ящерица

Анимация выполнена на CSS без использования JavaScript.

CodePen

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

3D Pokedex

Выполненный в виде 3D объекта покедекс из вселенной Pokemon. На него можно не только смотреть, но и открыть и посмотреть, что внутри!

CodePen

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

Monument Valley 2

Автор этого проекта перенёс анимацию популярной игры в HTML и CSS. Здесь нет JS, поэтому только смотри, но не трогай. Проект также интересен с точки зрения реализации.

CodePen

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

Мини-квест «Найди подарки»

Скоро Новый год и на CodePen начали появляться тематические проекты. Пройдите этот несложный квест и найди, спрятанные подарки. Приятная графика и код, как дополнительный бонус 😉

CodePen

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

Калейдоскоп

Калейдоскоп выполнен с помощью фреймворка Vue. Изменения происходят за счёт движения курсора и вычислений на его основе. Если вы решили изучать Vue, то будет очень полезно изучить и этот проект.

CodePen

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

Внимательный мишка

Сегодня предлагаем вашему вниманию CodePen проект, который показывает, как вы можете настроить отображение курсора на странице, а также, как можно создать эффект слежения за ним.

CodePen

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

Спичка в микроволновке

Вы знаете, как ведёт себя зажённая спичка в микроволной печи? Очень интересный эффект! В этом CodePen проекте вы можете наглядно увидеть, что происходит в случае горения спички в работающей микроволновке. Так что, если вам интересно понаблюдать этот эффект или хотите посмотреть, как реализован сам проект, то, как обычно, ссылка ниже!

CodePen

P.S. Пожалуйста, не повторяйте этот эксперимент дома! На YouTube полно роликов с этим эффектом, если вам не хватило того, что предлагает этот проект 😊

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

Форма ввода пароля

Посмотрите какая интересная форма для ввода пароля! Здесь и приятная анимация, и проверка на секьюрность имеется благодаря наличию регулярок. Полезно к изучению всем, особенно тем, кто хочет разобраться с SVG и регулярными выражениями.

CodePen

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

Форма ввода электронной почты

У этой формы не только приятный дизайн, но ещё и валидация текста. То есть, если вы напишете что-то непохожее на email, то форма даст вам об этом знать.

CodePen