Learn CSS™

CSS animation-timing-function explained

120 views01:30

Learn CSS™

Use CSS repeat function for clean code🚀

119 views12:57

Learn CSS™

What does 100% mean in CSS?

#article #tutorial #css

https://bit.ly/31jetx1

116 views00:44

Learn CSS™

0:39

This media is not supported in your browser

VIEW IN TELEGRAM

Reverse Engineer CSS Animations

Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.

Official docs:
https://developer.chrome.com/docs/devtools/css/animations/

567 viewsedited 04:38

Learn CSS™

I find two amazing sites that will improve your CSS skills.

- https://moderncss.dev/
- https://html-shark.com/

And it's free.

111 viewsedited 02:59

Learn CSS™

Useful Tailwind CSS tools that you're not using yet.

- COLOR PALETTE GENERATOR

- https://tailwind.ink/

- https://hypercolor.dev/

- https://palettolithic.com/

- https://grayscale.design/

-https://www.tailwindshades.com/

-http://tailwind.simeongriggs.de/

-https://gradient-designer.csspost.com/

-https://javisperez.github.io/tailwindcolorshades/

-https://adevade.github.io/color-scheme-generator/

- COMPONENTS & TEMPLATES

-https://tailwindcomponents.com/

- https://tailblocks.cc/

- https://merakiui.com/

- https://tailwindtoolbox.com/

-https://kitwind.io/products/kometa/components/

-

https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation

-https://component.tailwindow.com/

-https://tailwindtemplates.io/

- CHEATSHEETS

-https://flaviocopes.com/tailwind-cheat-sheet/

-

https://nerdcave.com/tailwind-cheat-sheet

-https://tailwindcomponents.com/cheatsheet/

- OTHERS

-https://tailwind-typography-playground.vercel.app/

- https://tailwind.run/new

-https://appseed.us/developer-tools/bootstrap-to-tailwind-css

122 viewsedited 03:13

Learn CSS™

Forwarded from Programming World👨‍💻 (☠️Anonymus Venom☠️)

These websites can help you as a developer👇

➣ pullrequest .com
• Code review as a service by expert engineers

➣ learn-anything.xyz
• Search anything here and it will show you the correct roadmap

➣ cheatography.com
• Over 4000 Free Cheat Sheet

103 views06:54

Learn CSS™

A simple visual cheat sheet for Flexbox

🌐 https://flexbox.malven.co/

115 viewsedited 08:50

Learn CSS™

Free Backgrounds for your next projects👇

➳ bgjar .com
➳ bg.siteorigin .com
➳ Repeat-X Repeat-Y
➳ Texture King
➳ Pattern8
➳ cssgradient .io
➳ svgbackgrounds
➳ Subtle Patterns
➳ Patternico
➳ BG Patterns
➳ Lost and Taken
➳ Freepik
➳ coolbackgrounds
➳ bggenerator

117 views14:26

Learn CSS™

Forwarded from Learn Web Development

Are you developer? These 3 websites can help 🚀

➜ patternico .com
Create your own patterns using Font Awesome icons

➜ http://wit.ai/
Enable people to interact with your products using voice and text

➜ graphonline .ru
Useful tool for visualizing Graphs

100 views15:06

Learn CSS™

Coffee ☕😉

187 views15:32

Learn CSS™

CSS Pro Tip 🎨

- Zoom image on hover using one line of CSS

Example

HTML:

<img src = "https://pbs.twimg.com/profile_images/1347536368751177731/Jtb7ZdZj_400x400.jpg" />

CSS:

body {
  height: 100vh;
  display: grid;
  justify-content: center;
  place-items: center;
  margin: 0;
}

img {
  border-radius: 50%;
  height: 300px;
  transition: 1s;
  cursor: url("https://img.icons8.com/emoji/48/000000/magnifying-glass-tilted-left-emoji.png"), auto; 

}

img:hover {
  transform: scale(1.1);
}

145 viewsedited 17:14

Learn CSS™

Bootstrap Cheat Sheet 📃

- An interactive list of Bootstrap 5 classes, variables, and mixins. The only Bootstrap 5 CheatSheet you will ever need.

https://bootstrap-cheatsheet.themeselection.com/

132 views04:39