CSS

How to disable text selection in HTML with CSS

If you're just here for the code snippet, here is the quick rundown of it. * set user-select to none in your CSS. What is user-select in CSS? It's a CSS property that lets you specify if a text element can be selected. For example, if you hold your mouse over

16th Oct, 2022

Read: 2 min read

CSS

How to create rainbow gradient text colors in CSS

Rainbow gradients are everywhere. They're cool and fun looking. The text is also fully readable by bots. Here are some cool examples in the wild: Vercel - cloud platform But how is it done?   The magic lies in linear-gradient, -webkit-background-clip and -webkit-text-fill-color Here's the quick code snippet for it 👇 h1{

9th Aug, 2022

Read: 3 min read

CSS

Subscribe to our newsletter

Great! Check your inbox and click the link.
Sorry, something went wrong. Please try again.

What Is SMACSS and How Does It Work?

> This piece is part of a Learn HTML & CSS series. Check out part 4 here: What is OOCSS and How OCSS Works [https://matcha.fyi/ocss-explained/] SMACSS Pronounced “smacks”, SMACSS stands for Scalable and Modular Architecture for CSS. The idea behind SMACSS is to break your CSS down into five

14th Jun, 2021

Read: 4 min read

What is OOCSS and How OCSS Works

> This piece is part of a Learn HTML & CSS series. Check out part 3 here: HTML, The Cascade and Ways To Think In CSS [https://www.dottedsquirrel.com/css-introduction/] OOCSS OOCSS stands for Object-Oriented CSS. The idea behind OOCSS is that you can reuse your HTML structures and patterns, meaning

14th Jun, 2021

Read: 3 min read

HTML, The Cascade, and Ways To Think In CSS

> This piece is part of a Learn HTML & CSS series. Check out part 2 here: Parts Of An HTML Document And How It Works With CSS [https://www.dottedsquirrel.com/html-explained-2/] I started learning how to code back in the early 2000s. For context on how long ago that was

14th Jun, 2021

Read: 5 min read

Creating 3D Pure CSS Hover Flip Card Effect

When it comes to front-end, your aesthetics implementation skills are limited by how well you can make CSS do whatever you want it to do. A pure CSS hover flip card effect is something that we often see in portfolio sites and splash pages. They can also be modified to

7th Jun, 2021

Read: 8 min read

CSS

Create An Animated Search Box Using HTML, CSS, & 2 JavaScript Functions

Have you ever wondered how those fancy expanding search boxes or forms are done? While it looks cool and feels like it could be complicated to code, it turns out to be quite simple. All you need is a few lines of HTML, a good dash of CSS, and two

2nd Jun, 2021

Read: 7 min read

CSS

Pure CSS Social Media Buttons With Tooltip Hover Effect

Social media icons are a staple of web design. Most of the time, designers and developers just settle for a simple button with the social icon slapped on it. But let’s get real — basic and standard icons are boring. They’re everywhere and nothing makes them stand out. In

26th May, 2021

Read: 7 min read

CSS

Fun Animated Button Hover Effect In CSS

Hover effects are one of those things we know, see and hear about — but the implementation is generally pretty basic. In this tutorial, we’re going to create a button hover effect, but with a fun twist to it. -------------------------------------------------------------------------------- This is what we’ll be making: While it looks

21st May, 2021

Read: 4 min read

CSS

How To Create An Animated Range Slider In HTML, CSS, and Simple JavaScript

Range sliders — they look fancy and cool, but how exactly is it done? It turns out, with a good splash of CSS and a few lines of JavaScript is enough to do the trick. -------------------------------------------------------------------------------- This is what we will be making: Let’s start with the HTML.

100
0

20th May, 2021

Read: 7 min read