Animate Calligraphy with SVG in CSS 🦋

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. 🤔

But upon closer inspection, what the questions are really trying to ask is something like this :

How do you animate calligraphy ⁉️

This article answers this question. ✨


https://t.me/pgimg/143

[ Article ] : https://kutt.it/g0QuEh

〰〰〰〰〰〰
#HTML #CSS #FrontEnd
@ProgrammingTip

Card Surge 🌈

Designing cards takes tweaking subtle details, and an easier to use playground makes finding the right styles faster. 🏃🏻

Card Surge is a playground for designing cards in a web interface. ✨

Designing cards that look 🔥 takes careful tweaking and attention to detail, and Card Surge makes it easy. 🙅🏻‍♂️

Take existing styles from well designed sites and use them as a starting point, or begin playing with your own. Copy the code out into your own project once your done. 💎


https://t.me/pgimg/145

[ Website ] : card.surge.sh

〰〰〰〰〰〰
#CSS #UI #Cards
@ProgrammingTip

Common Webpage Design Mistakes ⚠️

Simple layout and design tips to help you create a stunning webpage. 🦋

This article shows 30 common design mistakes and their solution with images included. 🌈


https://t.me/pgimg/150

[ Article ] : kutt.it/mstk

〰〰〰〰〰〰
#UI #Design #CSS
@ProgrammingTip

Bulma 🍀

Bulma is a modern CSS framework based on Flexbox. ✨

Bulma is a CSS framework. As such, the sole output is a single CSS file: bulma.css 💎

You can either use that file, "out of the box", or download the Sass source files to customize the variables. 🌈

There is no JavaScript included. People generally want to use their own JS implementation. ⚡️

Bulma can be considered "environment agnostic": it's just the style layer on top of the logic. 🌀


https://t.me/pgimg/167

[ Website ] : bulma.io
[ Github ] : kutt.it/blgit

〰〰〰〰〰〰
#CSS #Framework
@ProgrammingTip

New horizons in CSS: Houdini and the Paint API 🌈

The way we write CSS is about to change. No, I don’t mean you have to change how you write your styles, but we as developers are about to get a lot more control. 💪🏻

What am I talking about❓That would be the CSS Houdini spec and the new browser APIs that are coming out as a part of it. ✅


https://t.me/pgimg/189


[ Article ] : kutt.it/papi

〰️〰️〰️〰️〰️〰️
#CSS #PaintAPI
@ProgrammingTip

CSSFX ✨

Beautifully simple click-to-copy CSS effects. 🔥

A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. 💎

Powered by CSS with minimal markup. ✅
Completely open source and MIT licensed.⚡️


[ GitHub ] : github.com/jolaleye/cssfx
[ Demo ] : cssfx.dev

〰️〰️〰️〰️〰️〰️
#CSS #Effects
@ProgrammingTip

Pickr 🌈

Flat, simple, responsive and hackable Color-Picker library. ✨
No dependencies, no jQuery. ⚡️
Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more❗️


[ Demo ] : simonwep.github.io/pickr
[ Github ] : github.com/Simonwep/pickr

〰️〰️〰️〰️〰️〰️
#CSS #FrontEnd
@ProgrammingTip

Bootstrap 5 alpha! 🎉

Bootstrap is one of the open source that many developers love, including me. So what do we expect of the new changes when Bootstrap 5 is released?

Features ✨:
• jQuery removed
• Updated forms
• Enhanced grid system
• CSS custom properties by dropping support for Internet Explorer

Comming soon: RTL, offcanvas, and more 💎

Head to https://v5.getbootstrap.com to explore the new release. 🔥

〰️〰️〰️〰️〰️〰️
#Bootstrap #CSS
@ProgrammingTip