34421
FullStack-материалы от Senior-разработчика для WEB-специалистов Сотрудничество: @CodingLead Разработка сайтов любой сложности 👨🏻💻
💾 SVG Blob Animation – обтекаемая геометрическая фигура, которая меняет форму и цвет. Ее можно использовать для создания динамического фона сайта.
Сайтодел | #сниппет #css
💾 Cards With Inverted Border Radius – галерея карточек с кнопкой, встроенной внизу картинки. Это сделано за счет настройки радиуса углов в CSS.
Сайтодел | #сниппет #css
🐙 JSONEditor – это веб-инструмент для просмотра, редактирования, форматирования и проверки JSON. Он разные режимы: редактор кода, редактор древовидных списков и обычный текстовый редактор.
Сайтодел | #репозиторий #github
🖥 Microsoft Teams UI Kit – набор компонентов и шаблонов на основе пользовательских сценариев. В нем используются основные концепции веб-дизайна, такие как адаптивность и доступность.
Сайтодел | #макет #figma
✍️ Asap – шрифт без засечек с закругленными углами. Он разработан специально для экранов и имеет стандартную ширину символов, поэтому строки текста остаются одинаковой длины.
Сайтодел | #шрифт
💾 Papers – карточки в виде реалистичных, детализированных бумажных листков. Вращать бумажку можно правой кнопкой мыши.
Сайтодел | #сниппет #css
💾 Hamburgers – набор анимированных иконок для меню. Анимация сделана за счет вращения, а также расширения иконки вниз и вверх.
Сайтодел | #сниппет #css
✍️ Neue Montreal – нейтральный шрифт без засечек с четкими формами. Подходит для мелких текстов веб-страниц. Пример шрифта есть в макете Abstract 3D Coral Shapes
Сайтодел | #шрифт
🎨 Цветовая палитра макета "Web UI Elements" HEX | RGB #FEFADF | rgb(254,250,223)
#BC6C25rgb(188,108,37) #5F6C37 | rgb(95,108,55)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🐙 React Player – компонент React для воспроизведения различных URL-адресов, включая пути к файлам, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia и DailyMotion.
Сайтодел | #репозиторий #github
🖥 Dynamic 3D Business Icons Set – набор из 44 объемных иконок на тему бизнеса. У иконок красивые пастельные цвета, напоминающие конфеты.
Сайтодел | #макет #figma
💾 Neon Button – кнопка с радиальной неоновой подсветкой. Эффект запускается при наведении курсора и работает только в браузере Chrome.
Сайтодел | #сниппет #css
💾 Claymorphic SVG Button – кнопка в трендовом стиле клейморфизм. Ее можно использовать в модальных окнах, в составе меню или отдельно.
Сайтодел | #сниппет #css
💾 Toilet Paper Toggle – переключатель для текстов или изображений. Этот эффект можно использовать для выбора ответа.
Сайтодел | #сниппет #css
🐙 ESBuild – быстрый сборщик для веб-приложений, который поддерживает JavaScript, CSS, TypeScript, и JSX. Инструмент использует технологию tree-shaking для большей производительности.
Сайтодел | #репозиторий #github
🖥 Mid Mod – коллекция ярких, контрастных шаблонов для лендингов и презентаций. В ней есть карточки, основы для инфографики и мокапы.
Сайтодел | #макет #figma
🎨 Цветовая палитра макета "Alien Staff Assets" HEX | RGB #FFCC03 | rgb(255,204,3)
#2C9FF0rgb(44,159,240) #FF5DFE | rgb(255,93,254)
⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
💾 CSS Party – пульсирующий эффект с полупрозрачной подсветкой для шрифта. Скорость пульсации можно настроить вручную.
Сайтодел | #сниппет #css
💾 Single Keyframe Tricks – анимированные эффекты для кнопок: вращение, глитч, блюр, подсветка и заполнение цветом. При нажатии эффект исчезает.
Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Dynamic 3D Business Icons Set" HEX | RGB #F8E7CB | rgb(248,231,203)
#86E8DArgb(134,232,218) #D8A2ED | rgb(216,162,237)
⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🖥 Alien Staff Assets – более 20 PNG-элементов в футуристичном стиле. Шаблоны, изображения и иконки подойдут для веб-приложений развлекательного формата, а также для афиш и баннеров.
Сайтодел | #макет #figma
🐙 Earthworm – приложение на TypeScript для изучения английского языка. В заданиях нужно составлять предложения из отдельных слов.
Сайтодел | #репозиторий #github
💾 This Is Not A Button – кнопка с окрашенным фоном, который в активном состоянии превращается в полосу. Анимация растягивает элемент по горизонтали и меняет цвет.
Сайтодел | #сниппет #css
💾 Landing Page HTML & CSS – галерея из раскрывающихся элементов. Заголовок, написанный вертикально, отображается в открытой карточке.
Сайтодел | #сниппет #css
💾 Houdini-animated Spinners – набор анимированных спиннеров. Они отличаются друг от друга небольшими деталями, если смотреть слева направо.
Сайтодел | #сниппет #css
✍️ Lilita One – экранный шрифт, который подходит для заголовков и коротких текстов. Слегка сжатая структура и некоторые привлекающие внимание детали добавят странице индивидуальности.
Сайтодел | #шрифт
🎨 Цветовая палитра макета "HaHo Mobile UI Kit" HEX | RGB #EAEBE5 | rgb(234,235,229)
#FE6A5Ergb(254,106,94) #455A53 | rgb(69,90,83)⚠️ Цвет копируется одним кликом!
Сайтодел | #палитра
🖥 Web UI Elements – набор элементов в теплых природных оттенках. Здесь есть кнопки, иконки, переключатели, чекбоксы, шкалы прогресса, пагинация и многое другое.
Сайтодел | #макет #figma
✍️ Aston Script – каллиграфический шрифт с витиеватыми заглавными и строчными буквами. Пример использования можно посмотреть в заголовках макетов Colour Palettes/Moodboards
Сайтодел | #шрифт
💾 AI Inside – спиннер в виде объемного кольца, созданный с помощью библиотеки анимации GSAP. В середине спиннера скрыт еще один графический элемент.
Сайтодел | #сниппет #css