Website Programming: Making a Hue-Gradient Infinite Loop
Bandung, Indonesia, October 14, 2020, 12:34PM-This time, in this era who doesn't know Apple? Oh come on, it's my favorite brand like MacBook, iPhone, iPad, if I have much money I would love to have them all and all I can do is just stare at the picture and made apple's logo glowing. Why do I love apple so much? Whenever Apple introduces a new product, consumer expectation is unmatched by any other brand today. Apple users have come to expect nothing less than brilliant innovation and revolutionary technology in their phones and computers. This is a brand that has managed to fill us with heart-pumping anticipation as we wait in line to buy the latest piece of personal tech that will "no doubt" be superior to all others. On the market, my first brand is apple.
In this lesson, I'm going to use hue-gradient color. See gradients were super played out back in the early web days, but now they're so ubiquitous that you'd be remiss not to drop them in your site. If you need a little inspiration before getting started, my gradient example is the best for beginners. Instead of learning how to use blended colors, we used everything inside so the color will changes
The main object we used (Apple's logo) comes from bootstrap. Bootstrap is a powerful toolkit for web developers just like a collection of HTML, JavaScript, and CSS tools for creating web pages. Bootstrap became popular these days, bootstraps are flexible and easy to work. The source code version comes from google, you can just copy and paste the source-code (link href to bootstrap) for example to gain access to an object like the logo we're using right now. Also, bootstrap is made available as well as CSS so bootstrap and CSS can be combined, this makes using bootstrap very convenient.
HTML
The first section of HTML is <head>, we use head to put the information on our website. Through <head> we can put <meta charset = "UTF-8"> is a Unicode-based encoding that can support many languages and can accommodate pages and forms in any mixture of those languages, a responsive coding circle <meta name= "viewport" content = "width=device-width, initial-scale=1.0>, we also can put an external link < link rel ...> I put CSS link, and for this lesson we didn't use picture for the apple logo instead we used bootstrap we used <href..> to link to the bootstraps website.
Just like what I said before, we didn't use an image for the logo instead of link and code like <i class = "fa fa-apple logo"> for the apple's logo.
CSS ( style.css )
The * in CSS means all elements, it's a universal selector. So we are setting all elements to have zero margins and zero paddings thus everything on the website is the same. The body has a similar meaning to *.
In this part, we're focusing on the gradient colors and movement, as you can see that the basic color of the logo is #0f0 and we will rotate the color with @keyframes.
A keyframe is similar to JavaScript, they have functions to the display. Keyframing is the simplest form of animating an object, if you've ever played with animation software like adobe flash, after effect, premiere, etc you can see that keyframes are a time where an object has a beginning state or condition and will be changing over time. In position, form, even color. In this picture, I used simple rotate coding to the keyframe so the "animate" will rotate, but rotate which I meant is the color. The color will be changing all the time in a linear infinite loop.
That's all for the lesson
Thank you for reading my blog and see you in the next article
Comments
Post a Comment