CSS Tip: Learn CSS the easy way

One line of code that looks strange and confusing.

css-pattern.com: The Biggest Collection Of Background Patterns A unique URL per pattern Controls to adjust the size & colors Easy navigation between the patterns Optimized with CSS variables One-click to copy the code You can also surprise yourself with R…

Turn a simple input into single-digit inputs using a few lines of CSS.

How much code is needed to create a Sparkle shape?

Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors.

To target the html element, you either use "html{}" or ":root{}" but thanks to CSS nesting you can simply use "&{}" When used alone, the nesting selector will match the root element!

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.

css-shape.com: The Ultimate Collection of CSS-Only shapes Single-element implementation Optimized CSS code Easy to customize One click to copy the code The modern way to create CSS Shapes Read more

A lot of new CSS features can help you optimize your code and reduce redundancy.

Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code.

Create a Star shape using clip-path and only 5 points instead of 10.

Use modern CSS to cut the corner of an image with a pixelated effect.

Use modern CSS to create those famous rounded tabs with inner curves.

Use the round() function and create a fluid typography with a discrete function instead of a continuous one.

Use modern CSS and add a cool Wavy divider to your section.

Add a hover aniamtion with a fancy fragmentation effect using only the <img> tag.

Make your rotation look more natural by smoothly stopping it on hover instead of an abrupt stop.

Do you want to accelerate the rotation of your element on hover?

Transform your image into a cool postage stamp with a few lines of code No extra element (only the <img> tag) Only two CSS gradients Works with any image size Easy to adjust using CSS variables Read more

Place you image inside a wavy circular frame powered by modern CSS (mask, trigonometric functions, @property, animation-composition and more) No extra element (only the <img> tag) No pseudo element A cool animation on hover Optimized with Sass and CSS var…

Everyone is excited about the new align-content that works with block-level elements, but pay attention when you want to center elements such as <img>, <iframe>, <canvas>, <video>, etc. ⚠️ They won't get centered ⚠️ They will look centered but in reality,…

Do you know that some CSS functions can be used without arguments?

Create a fancy flower shape using an online generator 🌺 css-generators.com/flower-shapes Get an optimized code in no time.

CSS Nesting is cool and using the "&" is a lifesaver BUT be careful.

Another variation of the previous effect using the same code structure No extra element (only the <img> tag) No pseudo-elements Read more

Turn your image into a heart shape with a lovely hover animation 😍 No extra element (only the <img> tag) No pseudo-elements Less than 15 CSS declarations Read more

Creating a basic triangle shape is as simple as using two CSS properties aspect-ratio clip-path (with a 3-point polygon) That's it, and it works with any kind of elements including images.

Use modern CSS to: Set a max-width Center an element Set a minimum margin Add a full-width slanted coloration Make the slant effect responsive All of this, using only 3 properties and easy to control with CSS variables Read more

min() or max()?

Use the magic border-image and add as many borders as you want to your images for a fancy decoration No extra elements & No pseudo-elements Only one gradient Optimized with CSS variables Read more

Create a simple ribbon shape with a cool hover effect Only one element Optimized with CSS variables Powered by @property Read more

Place your image inside a wavy box using a few lines of code Only one element (the <img> tag) No pseudo-elements Optimized with CSS Variables Works with gradient coloration Read more

A modern way to create a triangle with rounded corners Only one element (no pseudo-elements) Only three CSS properties One variable to control the radius Read more

An easy and modern way to create Octagon shapes Only 2 CSS declarations No magic numbers A 4-point polygon (instead of 8) for the clip-path Read more

An easy and modern way to create Hexagon Shapes Only 2 CSS declarations No magic numbers A simple 4-point polygon for the clip-path Read more

Don't let your images fall.

Add a fancy decoration to the corners of your image using a few lines of code No extra element (only the <img> tag) No pseudo-element Optimized with CSS Variables Read more

Add a border with an inner radius to your image using a simple code.

An horizontal list is good but a circular one is better 🤩 Another list of stacked avatars using the same code structure Minimal HTML (images inside a container) Works with any number of images Powered by modern CSS (CSS variables, mask, @property, and mor…

Create a list of stacked avatars with a cool hover effect and with transparency Minimal HTML (images inside a container) Works with any number of images Powered by modern CSS (CSS variables, mask, @property, has() selector and more) Read more

Add a cool 3D effect to your name or your favorite number Only one element per word (not per letter) No pseudo-elements Optimized with CSS variables Read more

Here is another variation of the previous effect.

Place your image inside a 3D box and reveal it with a cool hover effect.

Add a fancy reveal effect to your images with a few lines of code No extra element (only the <img> tag) No pseudo-elements Powered by CSS Variables & @property Read more

Another variation of the previous effect with infinite stripes No extra element (only the image tag) No pseudo-elements Optimized with CSS variables Read more

Another variation of the previous effect where you can add a diagonal infinite shadow to your rounded image.

Add a reveal animation to your image with a simple code No extra element (only the image tag) No pseudo-elements Optimized with CSS Variables Read more

Create a ribbon shape with a fancy reveal effect on hover Only one element No fixed size (it fits your text content) Optimized with CSS Variables Read more

Add a fancy hover effect to your image with a gradient border No extra element (only the <img> tag) No pseudo-element Powered by CSS mask & @property Read more

The smallest code to create a simple Tooltip Shape One element (No pseudo-elements) Only 2 CSS Properties Optimized with CSS Variables Read more