Best of CSS Tip — 2023

1. 1
   Article

   CSS Tip·3y

   A Fancy Hover Effect For Your Avatar

   A Fancy Hover Effect For Your Avatar for your Avatar. Add a nice "Pop out" hover effect to your avatar using a minimalist code. No extra element (only the tag) - No pseudo-element - Less than 20 declarations - Optimized with CSS variables.

   35

   1
2. 2
   Article

   CSS Tip·3y

   A simple checkbox using CSS mask

   A simple checkbox using CSS mask is a simple design for your checkbox with a nice animation on click. No extra element (only the tag) - No pseudo-elements - One value to control the size - Less than 15 CSS declarations.

   32

   1
3. 3
   Article

   CSS Tip·3y

   A reveal hover effect using CSS mask

   A reveal hover effect using CSS mask Reveal your images with a nice hover effect and a few lines of code. Less than 10 CSS declarations - Powered by CSS Mask. See the Pen Hover reveal animation using mask by Temani Afif on CodePen.

   20
4. 4
   Article

   CSS Tip·3y

   A reveal hover effect using CSS mask II

   A reveal hover effect using CSS mask II by Temani Afif ( @t_afif) on CodePen. Another variation of the previous hover effect with a diagonal reveal. Using the same code structure - No extra element (only the tag) - Less than 10 CSS declarations - Powered by CSS mask and CSS gradients.

   17
5. 5
   Article

   CSS Tip·3y

   Infinite shadow for your images

   Infinite shadow for your images. Add an infinite shadow to your image in any direction using a few lines of code. No extra element (only the tag) - No pseudo-elements - Only 2 CSS properties - Works with rounded corners.

   15
6. 6
   Article

   CSS Tip·2y

   A circular reveal effect for your images

   Learn how to add a circular reveal effect to your images using CSS Variables and @property.

   14
7. 7
   Article

   CSS Tip·3y

   Zoom effect on hover

   Add a simple zoom effect on hover for your images with a small code. No extra element (only the tag) - 5 CSS declarations. See the Pen Zoom effect onhover (single element) on CodePen.

   14
8. 8
   Article

   CSS Tip·2y

   Infinite stripes shadow for your images

   Learn how to create an infinite stripes shadow effect for images using CSS variables and without the need for extra elements or pseudo-elements.

   12
9. 9
   Article

   CSS Tip·3y

   A Tooltip Shape using 2 CSS properties

   Learn how to create a simple Tooltip Shape using just 2 CSS properties and optimize it with CSS Variables.

   11