Website Programming: Animation Open The Card Pure HTML & CSS in Responsive Way
Bandung, Indonesia, October 8, 2020, 15:26PM-Animation on the appearance of the website is highly recommended because animation makes the website look more attractive and not boring to be seen. Currently, there are so many animations that we can make using various programming languages, this time I will share a tutorial related to animation, namely how to make a hover animation with CSS3. Hover animation is very popular because by only using CSS3 syntax, we can create a hover animation.
Well, here I will practice How to Make a Hover Animation with CSS3. The animation that I will share is the Open Card animation where there is an image and if the mouse cursor/pointer (if using a cellphone, then it must be touched) it will offer an animation of opening the card to display text. I know that many people only want to try to make something awesome at a time, but you have to learn from the basics so you can understand the flow to the great animation. Let's just get into the practice
HTML
In HTML, we'll start from <head>, in HTML <head> is the first section in coding that contains information about the website page's property, you can put responsive website coding circle in the head, and we can link to an external file. Does this website responsive? Yes, it is, we can look from the coding I put a responsive coding circle into <head> so depending on the screen size, the website being able to react quickly to automatically adjust for different screen sizes.
This is the body of HTML where you put content on the website's page, you can put text, pictures, videos, and a bunch of creative stuff inside. From the codes, I can say that I put 2 images with the details (for the details and pictures are up to you, but I suggest to use half size of a smartphone because I would look fancy and easier to see, maybe 300x300 pixel) And for the detail, you can use your own style, like color, font, even you can put gradient color inside.
CSS ( style.css )
To adjust the page display, we need elements like margin, padding, display, align-items, background color, etc. As you can see that I used # as labeling instead. (dot). Are they different? Nope, div.class and div.id aren't much different, they're using in different ways like a class for box and id for the specific. But I prefer using div.class than div#id because it's easy to type, I mean when you use div.class you only need dot(.) to labeling instead of # which you need 2 keys to type #.
For the #card, we adjust the size with the picture. I'm using 340x550 pixel but if you have 300x300 than use it (i don't know but I sometimes landscape or vertical picture can give a critical image to visitors). With transition 1s(if you prefer slower than making it slower like 2s, but for me, 1s is a normal condition, not too fast not too slow)
This is the time where you have to start making the condition like :hover ( means if someone touches me(if you're using a smartphone) or if a cursor point at me then condition >> Open the card). For the others, it's just adjustment for the position and size.
This is the last part, where you're making style on your text like giving padding(giving extra spacing inside), etc. If you want you could add many styles like the color (gradient-color maybe), zoom animation when pointer go to a specific area, and many other styles to add as the style of the text.
That's all for the lesson
Thank you for reading my blog and see you in the next article
Comments
Post a Comment