Independent Science + Technology

Author: Temani Afif

Responsive Hexagon Grid Using Modern CSS

Post date January 23, 2026
Post author By Temani Afif
Post categories In Articles, CSS functions, math, shapes

Responsive List of Avatars Using Modern CSS (Part 1)

Post date December 15, 2025
Post author By Temani Afif
Post categories In Articles, images, mask

Sequential linear() Animation With N Elements

Post date October 15, 2025
Post author By Temani Afif
Post categories In animation, Articles, CSS functions

Better CSS Shapes Using shape() — Part 4: Close and Move

Post date July 7, 2025
Post author By Temani Afif
Post categories In Art, Articles, clip-path, CSS functions, CSS Shapes

Better CSS Shapes Using shape() — Part 3: Curves

Post date June 6, 2025
Post author By Temani Afif
Post categories In Art, Articles, clip-path, CSS functions, CSS Shapes

Better CSS Shapes Using shape() — Part 2: More on Arcs

Post date May 30, 2025
Post author By Temani Afif
Post categories In Art, Articles, clip-path, CSS Shapes, functions

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

Post date May 23, 2025
Post author By Temani Afif
Post categories In Art, Articles, clip-path, CSS functions, CSS Shapes

A CSS-Only Star Rating Component and More! (Part 2)

Post date March 7, 2025
Post author By Temani Afif
Post categories In Articles, forms, Scroll Driven Animation

A CSS-Only Star Rating Component and More! (Part 1)

Post date February 28, 2025
Post author By Temani Afif
Post categories In Articles, attributes, borders, forms

Fancy Menu Navigation Using Anchor Positioning

Post date January 17, 2025
Post author By Temani Afif
Post categories In Anchor Positioning, Articles, Links & URLs

CSS Tricks That Use Only One Gradient

Post date October 11, 2024
Post author By Temani Afif
Post categories In Articles

How to Create a Custom Range Slider Using CSS

Post date May 18, 2023
Post author By Temani Afif
Post categories In css, html-css

What’s your CSS level? Take a CSS Quiz!

Post date May 15, 2023
Post author By Temani Afif
Post categories In css, webdev

Different Ways to Get CSS Gradient Shadows

Post date February 10, 2023
Post author By Temani Afif
Post categories In Article, box-shadow, gradients, shadow

A Fancy Hover Effect For Your Avatar

Post date February 3, 2023
Post author By Temani Afif
Post categories In Article, gradients, hover, mask, scale

CSS Infinite 3D Sliders

Post date December 16, 2022
Post author By Temani Afif
Post categories In 3d, Article, carousel, slider, transform

CSS Infinite Slider Flipping Through Polaroid Images

Post date December 9, 2022
Post author By Temani Afif
Post categories In Article, carousel, css animation, images, slider, z-index

CSS Infinite and Circular Rotating Image Slider

Post date December 2, 2022
Post author By Temani Afif
Post categories In Article, carousel, css animation, images, mask, slider

Making Static Noise From a Weird CSS Gradient Bug

Post date November 18, 2022
Post author By Temani Afif
Post categories In Article, background-clip, conic gradients, gradients, mix-blend-mode, radial-gradient

CSS Grid and Custom Shapes, Part 3

Post date November 11, 2022
Post author By Temani Afif
Post categories In Article, clip-path, CSS Shapes, grid, hover, images

Fancy Image Decorations: Outlines and Complex Animations

Post date October 28, 2022
Post author By Temani Afif
Post categories In Article, clip-path, gradients, hover, mask, outline, transition

Fancy Image Decorations: Masks and Advanced Hover Effects

Post date October 21, 2022
Post author By Temani Afif
Post categories In Article, clip-path, gradients, hover, linear-gradient, mask, radial-gradient

Fancy Image Decorations: Single Element Magic

Post date October 14, 2022
Post author By Temani Afif
Post categories In Article, clip-path, conic gradients, hover, images, mask, multiple backgrounds

How to Create Wavy Shapes & Patterns in CSS

Post date September 26, 2022
Post author By Temani Afif
Post categories In Article, mask, multiple backgrounds, radial-gradient

How I Made a Pure CSS Puzzle Game

Post date September 9, 2022
Post author By Temani Afif
Post categories In Article, checkbox hack, game, grid, mask, radial-gradient

CSS Grid and Custom Shapes, Part 2

Post date August 22, 2022
Post author By Temani Afif
Post categories In Article, clip-path, CSS Shapes, grid, hover, mask

CSS Grid and Custom Shapes, Part 1

Post date August 15, 2022
Post author By Temani Afif
Post categories In Article, clip-path, CSS Shapes, grid, implicit grid, mask

Single Element Loaders: Going 3D!

Post date July 1, 2022
Post author By Temani Afif
Post categories In 3d, Article, clip-path, gradients, loader, mask

Single Element Loaders: The Bars

Post date June 24, 2022
Post author By Temani Afif
Post categories In Article, loader, pseudo-elements

Single Element Loaders: The Dots

Post date June 17, 2022
Post author By Temani Afif
Post categories In Article, background-position, gradients, loader, mask

Single Element Loaders: The Spinner

Post date June 10, 2022
Post author By Temani Afif
Post categories In animation, Article, gradients, loader

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

Post date May 26, 2022
Post author By Temani Afif
Post categories In 3d, Article, background-clip, hover, mask-clip

Cool Hover Effects That Use CSS Text Shadow

Post date May 13, 2022
Post author By Temani Afif
Post categories In Article, hover, text-shadow

Another CSS Art from Demon Slayer

Post date April 28, 2022
Post author By Temani Afif
Post categories In css, html, showdev, webdev

Cool Hover Effects That Use Background Properties

Post date April 27, 2022
Post author By Temani Afif
Post categories In Article, background, background-position, hover, links

Tricks to Cut Corners Using CSS Mask and Clip-Path Properties

Post date March 30, 2022
Post author By Temani Afif
Post categories In Article, clip-path, mask

A Super Saiyan CSS Art!

Post date February 21, 2022
Post author By Temani Afif
Post categories In css, html, showdev, webdev

Fancy CSS Borders Using Masks

Post date January 26, 2022
Post author By Temani Afif
Post categories In Article, borders, gradients, mask

I am back with 100 “Dark Mode” CSS loaders

Post date January 12, 2022
Post author By Temani Afif
Post categories In beginners, css, showdev, webdev

A Colossal CSS Art!

Post date December 20, 2021
Post author By Temani Afif
Post categories In css, html, showdev, webdev

Responsive Layouts, Fewer Media Queries

Post date November 22, 2021
Post author By Temani Afif
Post categories In Article, clamp, flexbox, grid, media queries, responsive

A One Piece of CSS Art!

Post date November 18, 2021
Post author By Temani Afif
Post categories In css, html, showdev, webdev

Exploring the CSS Paint API: Rounding Shapes

Post date October 22, 2021
Post author By Temani Afif
Post categories In Article, canvas, CSS Paint API, houdini

Exploring the CSS Paint API: Polygon Border

Post date September 20, 2021
Post author By Temani Afif
Post categories In Article, canvas, clip-path, CSS Paint API, houdini

Build your CSS loader with only one div — The Dots

Post date September 15, 2021
Post author By Temani Afif
Post categories In beginners, css, tutorial, webdev

Upgrading the CSS only Multi-line Typewriter effect

Post date September 5, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

A multi-line CSS only Typewriter effect

Post date September 2, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

Exploring the CSS Paint API: Blob Animation

Post date August 30, 2021
Post author By Temani Afif
Post categories In animation, Article, canvas, CSS Paint API, houdini

The CSS ‘Scrabble’ writer — The next gen typewriter

Post date August 29, 2021
Post author By Temani Afif
Post categories In codepen, css, html, webdev

A scalable CSS only Typewriter Effect

Post date August 28, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

Exploring the CSS Paint API: Image Fragmentation Effect

Post date August 26, 2021
Post author By Temani Afif
Post categories In codepen, css, tutorial, webdev

Adding 100 underline/overlay animations | The impressive CSS collection ⭐️

Post date August 10, 2021
Post author By Temani Afif
Post categories In codepen, css, showdev, webdev

Exploring the CSS Paint API: Image Fragmentation Effect

Post date August 9, 2021
Post author By Temani Afif
Post categories In Article, canvas, CSS Paint API, houdini

A CSS-only reaction component using emoji

Post date July 18, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

Build Complex CSS Transitions using Custom Properties and cubic-bezier()

Post date July 14, 2021
Post author By Temani Afif
Post categories In @property, animation, Article, cubic bézier, transition

The “safe” star rating & the ONE star unlimited rating

Post date July 9, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

The ONE star rating system — the future of rating

Post date July 6, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

Scalable “star rating” without JS (and no SVG or image for the star)

Post date July 4, 2021
Post author By Temani Afif
Post categories In beginners, css, html, webdev

Adding 100 CSS loaders to the collection of — 500 CSS loaders ?

Post date June 29, 2021
Post author By Temani Afif
Post categories In beginners, css, showdev, webdev

Nothing left to load.