Ali Calimli (@alicalimli)

CSS clamp() for Fluid Typography Explained

Use CSS clamp() for fluid typography that scales smoothly without media queries. Learn the safer rem + vw pattern, cqi variant, and common gotchas. You can make text responsive without media queries b

Aug 19 · 5 min readblog.alicalimli.com

Windows 10 Setting Hover Effect: A Step By Step Tutorial

HTML Structure <div> <div class="container"> <div class="box"> <div class="box-content">Lorem Ipsum</div> </div> <div class="box"> <div class="box-content">Lorem Ipsum</div> </div> <div class="box"> <div cl...

1Apr 30, 2023 · 3 min readblog.alicalimli.com

Cool Button Hover Effect: A Step By Step Tutorial using HTML, CSS and JavaScript

Behind The Scenes Preview To help you understand how this hover effect really works, here's what it looks like behind the scenes: Starting HTML Structure <button class="btn"> Hover me </button> CSS Styles body{ background: #111; } .btn { bac...

1Apr 27, 2023 · 3 min readblog.alicalimli.com

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

HTML Structure Let's start by creating the HTML structure, We will create four boxes only to keep this tutorial simple. <div> <div class="container"> <div class="box"> <div class="box-content">1</div> </div> <div class="box"> ...

14Apr 25, 2023 · 3 min readblog.alicalimli.com

Learn how to create this awesome border hover effect

HTML Setup <button class="btn"> Hover me </button> CSS Styles body { background: #111; } .btn { cursor: pointer; background: none; border: none; color: white; border-radius: 100vmax; padding: 1rem 2rem; position: relative; } Th...

1Apr 23, 2023 · 2 min readblog.alicalimli.com

Ali Calimli

About

Available for

Ali Calimli's blogs

CSS clamp() for Fluid Typography Explained

Windows 10 Setting Hover Effect: A Step By Step Tutorial

Cool Button Hover Effect: A Step By Step Tutorial using HTML, CSS and JavaScript

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

Learn how to create this awesome border hover effect

Ali Calimli

About

Available for

Ali Calimli's blogs

CSS clamp() for Fluid Typography Explained

Windows 10 Setting Hover Effect: A Step By Step Tutorial

Cool Button Hover Effect: A Step By Step Tutorial using HTML, CSS and JavaScript

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

Learn how to create this awesome border hover effect

Ali Calimli

About

Available for

Ali Calimli's blogs

CSS clamp() for Fluid Typography Explained

Windows 10 Setting Hover Effect: A Step By Step Tutorial

Cool Button Hover Effect: A Step By Step Tutorial using HTML, CSS and JavaScript

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

Learn how to create this awesome border hover effect

Search Hashnode

Ali Calimli

About

Available for

Ali Calimli's blogs

CSS clamp() for Fluid Typography Explained

Windows 10 Setting Hover Effect: A Step By Step Tutorial

Cool Button Hover Effect: A Step By Step Tutorial using HTML, CSS and JavaScript

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

Learn how to create this awesome border hover effect