NEW BOT Телеграм, страница

0:09

https://codepen.io/frankyjo/pen/KKyQaNv - Слайдер сравнения изображений

3.75K views17:58

0:17

https://codepen.io/frankyjo/pen/OJzgBMo - красивый ховер эффект для кнопки

👍1

3.17K views14:05

2.73K views18:42

Изучаем SCSS

Сегодня, я уже даже представить не могу свою работу без SCSS. Данный препроцессор упрощает сильно работу с стилями и значительно ускоряет процесс разработки в общем.

Так как браузеры не воспринимают SCSS, его надо конвертировать в CSS с помощью специальных программ или сборщиков проектов таких как gulp или webpack

Рассмотрим все преимущества работы с SCSS

1. Переменные

Чтобы создать переменную, просто добавьте $ к имени переменной и установите их как обычное свойство CSS.

Кстати, в примере сразу виден пример вложенности.

2. Вложенность

Вложенность в SCSS - очень полезная штука. При помощи нее вы можете выстраивать код так, что SCSS будет визуально напоминать иерархию в вашем HTML.

3. Наследование

@extends помогает вам наследовать свойства другого классаю.

4. Миксины

Миксины в SCSS позволяют нам создавать группы правил CSS и переиспользовать их в своем коде. В миксины, можно даже передавать значение, чтобы сделать их более гибкими

5. Математические операторы

В SCSS можно использовать математические операторы +, -, *, /, %
Например, их можно использовать в тех же миксинах.

6. Циклы

В SCSS можно использовать циклы. Таким образом, вы можете избежать копипаста.

7. Условия

Условия SCSS можно использовать тоже для создания различных условий внутри ваших миксинов.

Вот так, буквально за три минуты вы окунулись в мир SCSS. Я надеюсь что те, кто его использовали узнали для себя что-то новое, а те, кто не использовали - начнут.
____

#вебразработка #вебразработчик #изучаемфронтенд #фронтенд #версткасайта #изучаемфронтенд #цсс #css #scss

👍4

3.94K viewsedited 18:43

0:15

https://codepen.io/frankyjo/pen/JjMqyNK - Делаем каркасную загрузку контента ( skeleton ) 🙂

3.66K views11:55

PyScript убийца JavaScript ?

Не так давно на PyCon 2022, который проходил 27.04 - 03.05, был сделан анонс и объявили о новой технологии PyScript 🙂

Я немного прочитал про нее и вот, что узнал 🤔

Разработчики рассказали, что теперь можно будет писать код на Python, встраивать его, используя специальные HTML-теги, подключать JavaScript библиотеки и все это благодаря PyScript 🙂

Звучит вроде неплохо. К тому же, с PyScript не надо думать о развертывании специального программного обеспечения. Также, создатели рассказали, что теперь можно будет поделиться дашбордами и моделями в html-файле, который будет запускать код всякий раз, когда другие открывают этот файл в веб-браузере.

Что же такого интересного в PyScript?🤔
А то, что он построен Pyodide ( Pyodide предоставляет способ запуска Python в браузере ) . А в будущем, PyScript может начать поддерживать написание и выполнение кода и на других языках🙃

Альфе-версию вы можете посмотреть на сайте pynoscript.net

В общем, Python теперь в браузере благодаря PyScript

👍5❤2

4.84K views18:15

https://codepen.io/frankyjo/pen/dydKRgZ - красивая карточка на чистом CSS

👍14🌭1

3.98K views09:33

https://codepen.io/frankyjo/pen/vYRerEB - пульсирующая кнопка

👏11💩1

3.04K views10:29

0:10

https://codepen.io/frankyjo/pen/vYRzzXP - анимированный текст

🔥11

2.96K views10:08

0:08

https://codepen.io/frankyjo/pen/jOzjaGb - анімація тексту

👍5👎1🔥1

2.75K views09:54

0:06

https://codepen.io/frankyjo/pen/eYrzbvM - Цікавий ховер ефект при наведенні на карточку

🔥10👍4👎3

2.76K views09:45

https://www.youtube.com/watch?v=RjsSOOIX3Qw

YouTube

Робимо анімованний текст що розкривається на чистому CSS тa HTML

У цьому відео я розповідаю як зробити анімованний текст що розкривається на чистому #CSS тa #HTML

instagram: https://www.instagram.com/popov_den1s/

ссылка на codepen - https://codepen.io/frankyjo/pen/YzLNqRq

👍10🔥2

3.07K views11:59

https://developer.chrome.com/blog/new-in-chrome-112/?fbclid=PAAabIKl5bRkWnbpTatyTBB4UjnHtJ3UhXGCA_ZYVZOXaPsyj_eF0zci33xL8

Chrome for Developers

New in Chrome 112 | Blog | Chrome for Developers

Chrome 112 is rolling out now! Now CSS supports nesting rules, the algorithm to set the initial focus on dialog elements was updated, no-op fetch handlers on service workers are skipped from now on to make navigations faster and there’s plenty more.

1.77K views12:00