CSS Simplified

By Shruti Balasa

Fall in love with CSS one tip at a time. You receive one short digestible issue every Wednesday right into your inbox.

Fall in love with CSS one tip at a time. You receive one short digestible issue every Wednesday right into your inbox.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that CSS Simplified will receive your email address.

1.04K

subscribers

21

issues

#21・

Do you still use float? Here is a nice use case

The CSS float property has mostly become obsolete, thanks to flexbox and grid. But it still has a few use cases. It's not the best option for layouts anymore, but little things can still use float.One of the use cases is to highlight the first letter of a par…

 
#20・

Split background color with one line of CSS

First off, I have some great news! CSS Simplified newsletter now has 1000 subscribers

 
#19・

CSS is overwhelming? This tip will help you

I’ve brought you something different this week. One tip for you to make CSS a little less overwhelming.I’ve often been asked how to get better at building large web page layouts. As a beginner, you learn CSS by practicing all the different properties on indiv…

 
#18・

CSS only tooltip using attr()

Usually we'd choose to use JavaScript or some little weight plugin to show tooltips. But it's possible to create toolips like these on hover, using CSS only :)Note: Before we proceed, please be aware that tooltips aren't that great for accessibility. Use them…

 
#17・

Floating label for input in CSS

Have you seen these kind of floating labels in forms? I used to think you need some JavaScript to make these. But nope, you can do it in pure CSS :)

 
#16・

Where is "inline-flex" used?

You may or may not know what display: inline-flex does. But do you actually know why and where to use it?An exampleI'm sure you've seen tags like these to "follow interests" when you sign up on a social media site.

 
#15・

Dropdown Navigation in Pure CSS

Did you know you could toggle a dropdown navigation on click using only CSS?

 
#14・

Change text colour based on background to create cool designs

Last week I saw a web page design which had two contrasting background colours but the text colour changed seamlessly based on the background. Something like this below 👇

 
#13・

Super useful flexbox trick you might not know

Look at this navigation bar for a moment. If you had to implement this with CSS flexbox, how would you do it?

 
#12・

Create triangle badge at the corner of a div

Recently I had to create a triangle at the right top corner of a block with a "Pro" label. Something like this:

 
#11・

Create a smooth transition from one gradient to another

Have you ever tried to slowly transition from one gradient background to another on hover? You might have quickly realized that it's not possible to do so with the CSS transition property on background-image. But isn't this a nice effect?

 
#10・

Did you know about scroll padding? Easy solution to fixed header problem

If you've ever had a fixed header with navigation bar and links to sections on the same page, you surely have faced this problem. You click on a link and the page smoothly scrolls to the particular section, but the top part of the section gets hidden behind t…

 
#9・

Quickest way to add space between child elements (without adding space around them)

Ever had a navigation menu and wanted to add space only between the navigation items and not around it? Like this 👇

 
#8・

Is there a grid-wrap similar to flex-wrap?

Short answer: No, there isn't a CSS property grid-wrap similar to flexbox's flex-wrap to wrap elements on smaller screens when they don't fit in a single row.Long answer: We can use the grid-template-columns property with a unique value to make equal-width gr…

 
#7・

Background opacity with one line of CSS

When you want to display text on a background image, you need some contrast to make the text readable. The most common and easiest way to achieve this contrast is to add a dark transparent overlay on the image. Something like this:

 
#6・

Create pie charts and donut charts in CSS

Looking at graphs and charts in web apps, I always thought it would be complex to make those. But do you know how easy it is to make pie charts and donut charts like these in CSS?

 
#5・

Why is `position: absolute` not working as expected?

While using the CSS position property, it's critical to understand how it works, but most importantly - why it might not work as expected!Before we move further, I have a suggestion. Ask yourself every time you're tempted to use absolute positioning, "Do I re…

 
#4・

How do you keep the footer always at the bottom - Flexbox or Grid?

So how do you keep the footer at the bottom of the web page no matter how long your viewer's screen is?We can use either Flexbox or Grid for this. Let's explore both, and then you can use whichever suits your need.Here's the markup first:

 
#3・

Text Underline Animation Explained

See this text underline animation? Looks really nice right? Let’s go straight into understanding how to create it step-by-step.

 
#2・

Did you know about ‘display: contents’ CSS rule?

Consider this blog post display section. On a wider screen, we want the image to be on the right separated from the text. While on a mobile screen, we want the image to appear in between our heading and the paragraph.