Pull to refresh
52.29

CSS *

Cascading Style Sheets

Show first
Rating limit
Level of difficulty

HDR Displays and CSS: Enhancing Color and Brightness on the Web

Level of difficulty Easy
Reading time 3 min
Views 2.6K
CSS *JavaScript *
Review
Sandbox

High Dynamic Range (HDR) allows for a wider range of colours and brightness levels. This technology works on displays that support HDR format. Nowadays web advantage of display gamuts such as Display P3 and Rec. 2020, which can display a much larger color space than traditional sRGB displays. It is 50% more colours.

CSS is ready to fix it (at least for Apple users). Find colour gamuts comparison, code examples and device support overview below.

Unlock HDR with CSS - read more
Total votes 1: ↑1 and ↓0 +1
Comments 2

What is the difference between px, em, rem, %? The answer is here

Reading time 3 min
Views 4.2K
Web design *Website development *CSS *
Tutorial

Introduction


Beginners in web-development usually use px as the main size unit for HTML elements and text. But this is not entirely correct. There are other useful units for the font-size in CSS. Let's look at the most widely-used ones and find out when and where we can use them.


Read more →
Total votes 3: ↑0 and ↓3 -3
Comments 2

Eliminating Render-Blocking JavaScript and CSS on WordPress

Reading time 4 min
Views 1.2K
WordPress *Website development *CSS *JavaScript *HTML *
Tutorial

Outstanding loading speed is an essential website feature for a high ranking in SERP (Search Engine Result Pages). PageSpeed Insights by Google is an excellent tool for precisely that — optimizing your website’s loading speed. Let’s say you’re using this tool and get the “Eliminate render-blocking JavaScript and CSS in above-the-fold content” warning. No need to worry! In this tutorial, I will show you how to address the issue.

Read more →
Rating 0
Comments 0

3D Keyboard Key on CSS

Reading time 3 min
Views 1.5K
Web design *CSS *
Sandbox

Introduction


People use their gadgets every day. And the main attribute of any gadget is a keyboard. But have you ever thought about creating a keyboard that would display on your screen?

In this article, we will create a 3D Keyboard Key with awesome animation after clicking on it. And yes, we will not use any programming language. Our key will be on the power of CSS! Let’s get started!

image

Implementation

Read more →
Total votes 7: ↑3 and ↓4 -1
Comments 4

Authors' contribution