On my day 3 of JS30 challenge I got introduced primarily to CSS variables but also to many other things.
The key concepts I learned from today’s challenge were:
- CSS variables
-
dataset
property on DOM elements - Image blur
- Color input
CSS variables
CSS variables work very similar to how we use variables in JS or any other programming language. They let us define their value at one place and then just use that same value anywhere we refer to that variable.
For example, we can define at one place that we want text on our website to be white
then we can define it like this
:root {
--text-color: white;
}
Here we define this text-color
variable at the root element. Now any place that we need to use this value we need to do something like
.content {
color: var(--text-color);
}
CSS variables can be used for more than just colors. In today’s project we used these variables for storing the border thickness and color of an image and also for storing the blur amount for that image.
Note: One fun idea I have with CSS variables is that I can define the color palette of my website at one place and then provide the user with a night-mode switch. I can change colors across the whole website by changing them at just one place.
To modify their value via JS a simple method call does the trick.
<dom-element>.style.setProperty('--text-color', 'red');
The above snippet will change the value associated with --text-color
at any point in the dom-element
and any of dom-element
.
dataset
property on DOM elements
In HTML whenever we want to write a custom-property on an element we make use of what are called data
attributes. A sample can be like
<input id="blur" type="range" name="blur" min="0" max="25" value="5" data-sizing="px" data-purpose="A slider input to select blur amount">
Here we have defined 2 data attributes, namely data-sizing
and data-purpose
.
Now when we need to use these in JS we can simply do
console.log(inputElement.dataset.sizing); // Used to access the data-sizing attribute.
console.log(inputElement.dataset.purpose); // Used to access the data-purpose attribute.
dataset
is a very simple property on DOM elements which lists all the data
attributes defined on that element.
Image blur
Today I learnt a nifty simple trick to blur an image using only CSS.
img {
filter: blur(5px);
}
We can just specify a blur
CSS filter and our work is done. There are lots of other functions available which can be used as filter
, do make sure to take a look at that list.
Color input
Standardisation of HTML and CSS has made it easy to create a simple and functional color-picker. The only thing that needs to be done is
<input id="base" type="color" name="base" value="#43bc46">
Here we have just declared an input tag which then takes care of displaying a color picker and also shows the user with a tiny sample of the color they have picked.
Conclusion
That’s all folks, that was it for today. If you have anything unclear in this article or want to discuss anything else, hit me up on twitter @varun_barad.
Top comments (0)