55 Checkboxes With Online Demo & Source Code 👾

http://freefrontend.com/css-checkboxes/

#CSS #UI
@ProgrammingTip

Loader.css 🌀

Delightful and performance-focused pure css loading animations. 💎

https://github.com/ConnorAtherton/loaders.css

Demo : https://connoratherton.com/loaders

〰〰〰〰〰〰
#CSS
@ProgrammingTip

What is currentColor in CSS ❓

currentColor — As name says , it pick the current color reference in an class and when you assign currentColor as one of the value of the property it will show the refer color.

[ Article ] : http://bit.do/curro

〰〰〰〰〰〰
#CSS #Tips
@ProgrammingTip

🌈 WebGradients

WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. 🖥

Easy copy CSS3 Crossbrowser code and use it in a moment! They Have also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop. 🔥

https://t.me/pgimg/12
[ Website ] : https://webgradients.com/

〰〰〰〰〰〰
#css #color #gradient
@ProgrammingTip

CSS Variables — What You Need to Know 🎨

CSS variables are more accurately described as custom properties.

They are useful in preventing DRY — Don’t Repeat Yourself code.

With the ability to change a property once and have that change made all over your style sheet is magical ❗️

[ Article ] : http://bit.do/cvar

〰〰〰〰〰〰
#CSS #Variable
@ProgrammingTip

Enjoy CSS 🍻

Online CSS3 Code Generator With a Simple Graphical Interface. 🤠

[ Website ] : http://enjoycss.com

〰〰〰〰〰〰
#FrontEnd #Css
@ProgrammingTip

UnCSS ✨

UnCSS is a tool that removes unused CSS from your stylesheets. ✅

It works across multiple files and supports Javascript-injected CSS. 🗂


How❓🤔

1️⃣ The HTML files are loaded by jsdom and JavaScript is executed.

2️⃣ All the stylesheets are parsed by PostCSS.

3️⃣ document.querySelector filters out selectors that are not found in the HTML files.

4️⃣ The remaining rules are converted back to CSS.

https://t.me/pgimg/43

[ Website ] : https://uncss-online.com/

[ Github ] : https://github.com/giakki/uncss

〰〰〰〰〰〰
#FrontEnd #Css #Tools
@ProgrammingTip

Pretty Checkbox 🌈

A pure CSS library to beautify checkbox and radio buttons. ✨

Framework Compatability 🔥 :
• Angular
• Bootstrap
• React
• Vue

https://t.me/pgimg/106

[ Website ] : http://bit.do/csspr

〰〰〰〰〰〰
#CSS #Library
@ProgrammingTip

Flexbox Froggy 🐸

Flexbox Froggy is a game for learning CSS flexbox. 👾

Flexbox Froggy takes inspiration from the classic arcade game Frogger, and web literacy games like the brilliant CSS Diner and Erase All Kittens, where you learn about CSS selectors and HTML markup respectively. 🔥


https://t.me/pgimg/130

[ Learn ] : flexboxfroggy.com

〰〰〰〰〰〰
#FlexBox #CSS
@ProgrammingTip

All You Need To Know About CSS-in-JS 🌈

Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). 🗂


What is CSS-in-JS❓

JSS is a more powerful abstraction over CSS. 🦋

It uses JavaScript as a language to describe styles in a declarative and maintainable way. 🗣

It is a high performance JS to CSS compiler which works at runtime and server-side. 💎

This core library is low level and framework agnostic. ✨

It is about 6KB (minified and gzipped) and is extensible via plugins API. 💉


https://t.me/pgimg/141

[ Article ] : kutt.it/jss

〰〰〰〰〰〰
#CSS #JavaScript #JSS
@ProgrammingTip

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