Website Programming: How to Make Hue-Gradient Checkbox in Responsive Way
Bandung, Indonesia, October 15, 2020, 12:47PM - In this lesson, we're going to make a hue-gradient checkbox so whenever you check the box, the box glowing. Simply put a checkbox is a form element that allows users to select multiple options from a range of options. Do you know that on the website, everything is possible? I made a creative checkbox using only HTML and CSS in a modern way to attract many people to visit your website.
So, what are the differences between checkboxes and radio buttons (i think they have the same function)? Radio buttons allow the user to select only one option(if you intend to use the radio button then use it, in exchange you can only see half purpose of this lesson because I will show you the law of the time, so every time you check the box in a different time, the colors will have a different time to appear) instead checkbox allows users to select more than one checkbox(multiple options). Basically, if you want to use "checkbox" you have to put code, Let me explain the codes while coding.
HTML
First of all, we have to put <head> so our visitors can have information about your website through the title. Head has many functions, like put an external link. I put 2 external links in the head which are CSS and bootstrap. Maybe this is your first time reading "bootstraps". To put it simply, bootstrap is a toolkit for web development like HTML, CSS, and JavaScript. To gain a "logo" like the gif above we have to use bootstraps and in terms to use bootstraps we have to link the bootstraps to the HTML so HTML can access the logo to put into the body.
Through bootstraps, we can call the object/logo with coding like <i class = "fa fa-...(items)" aria-hidden = "true"></i> or you can visit bootstraps website and search the logo you want and the website will give you the codes. I put 5 Logo in total (Globe, graduation, Apple, Heart, and Music)
CSS
In the first section of CSS, we adjust the basics of the website. First, we used * (The * in CSS means all elements, it's a universal selector, so whenever you put the codes in the * area, it means you put the codes to all the elements on the website. In the CSS, we can adjust the responsive coding circle and add them in the universal selector, like "box-sizing: border-box;". At row 28 there're special codes like input[type = "checkbox"] in programming language we can put them as a variable but sometimes we used them directly and put the raw to the code.
In this part, we can see the codes are complex but if you see them in detail, the codes are much simpler than you think. We just adjust the position, margin( top and left), width, and height (with a little calculation, items, content, box-shadow, and background
This is the last section of the CSS. In this section, we play with the color, as you can see in row 71 especially input[type = "checkbox"]:checked ~ .icon . fa , said that if the checkbox represented an icon and "fa" ( the code we used to call logo to HTML) checked then the color will be changed to #00f3ff and we put "animation" command inside to tell that I'm going to use animation which is running in 5 seconds and will going linear infinite called loop. In row 78, we used @keyframes(similar to adobe flash, after effect, adobe premiere, etc if you've ever used them), basically, keyframes are a time where an object has a beginning state or condition and will be changing over time. In the coding, I used 0% as a start condition and 100% as a stop condition.
That's all for the lesson
Thank you for reading my blog and see you in the next article
Comments
Post a Comment