Website Programming: Glowing Border in Responsive Way
Bandung, Indonesia, October 5, 2020, 17:06PM - Who doesn't know a website? Everyone knows well, from children to adults. But do you know that websites can also display a beautiful bunch of animations that can attract various visitors? Every modern website should have animation and appeal. Now you are still learning the basics, namely by giving gradient color effects to the borders and you can imagine if the colors can change? Or maybe moving around the border becomes like a gaming mouse these days, it would be attractive even if people don't like the article, but if there is something that feels interesting, first they will definitely come back again to see the beauty of the website.
Try to imagine those of you who enter a website full of .html and javascript only. Okay, maybe the function of the website is what you need, but believe it or not, you will prefer to find another website that has the same function and of course has an amazingly beautiful effect as learned in this article where we studied .css as a programming language to form and provide attractive effects on websites. Now I will show you, this gradient color based animation called "Glowing Border".
The flowing border in question is not a glowing border where the colors on the surrounding border going around the border or changing color, to reach a higher level, it would be better if we learned the easy ones then continued to the difficult ones so that when moving to a lower part it will be very easy to enter into memory and better understanding.
HTML
HTML is the basis of a website, if you want to make a website you have to use HTML.
We'll start from <head>, in HTML <head> is the first section in coding that contains information about website page's property, you can put responsive website coding circle in the head, and we can link to an external file, for example, <link rel="stylesheet" href="style.css"> following to the code the head section links to a file named style.css. And <meta name="" content"""><meta charset=""> are responsive website coding circle, so depending on the screen size, the website being able to react quickly to automatically adjust for different screen size.
In terms of customizing your page content, you need text, pictures, videos, etc. You need to put them on your page in the center. The elements you want depends on your requirement on the website, if you want to put many pictures and texts then you can just put it on the page, but make sure to label them using div, div means division, it's usually given a unique id to distinguish from other elements on the same page.
CSS (style.css)
To adjust the page display, we need elements like margin, padding, display, align-items, background, etc. In some conditions you have to put "box-sizing: border-box;" to make sure the website responsive, because sometimes in terms to get a responsive coding circle, need more than one responsive coding circle for example in an HTML file we put <meta charset, name, content> and box-sizing: border-box; in the CSS, but in a few conditions you have to use different codes, the responsive coding circle has many codes to put into a website to be responsive.
The next level codes for the display of the website, in this part we focused on margin(include top, left, right, bottom), background, index, position, filter, and content. Don't concern too much about the before-after, because it's like a variable on coding (like java, C/+/#, python, etc) instead focus on the execute code ".box:before,.box:after" with intention of giving gradient color to the box
That's all for the lesson, this is the very basic of CSS, just giving gradient color, adjust text size, padding, margin, spacing, making a variable, etc. Through this lesson, we can upgrade it into some amazing animation like moving color, hover animation, checkbox, and many other things.
Thank you for reading my blog and see you in the next article
Comments
Post a Comment