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
datasetproperty on DOM elements
- Image blur
- Color input
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
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
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.
The above snippet will change the value associated with
--text-color at any point in the
dom-element and any of
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
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.
Today I learnt a nifty simple trick to blur an image using only CSS.
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.
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.
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.