SEC S19W3 || Animation, Transition & Transform (HTML5+CSS3)

canvas

Hello friends welcome to another interesting challenge which I have participated in as given by professor @kouba01. In this, I will be showing you how to add background colors of different types to HTML files using CSS based on the exercise of the challenge.

---

Exercise 1:

Apply a dark gray background to the entire document and fuchsia pink text color by default and center the titles

Here the first thing that I did was to create two separate files: index.html and styleTP.css and set them appropriately to get the correct result to make it more beautiful I added an image into the HTML file. The screenshots below show how I set up the two files.

index.html

This is part of the file that contains the structure and content of my webpage.

---

styleTP.css

This is part of the file that contains the styling of the webpage as shown in the index.html part.

---

Output

This is the part that shows the results of both the index.html and styleTP.ccs parts.

---

Apply a light gray background When you move the mouse cursor over the page title

Here I applied a light gray background to the page title Steemit. on the styleTP.ccs part, which can only work if I move the mouse cursor over the page title.

styleTP.css

---

Output

---

Apply a double fuchsia color border to the image, an image width of 75%, and an automatic image height and rounding of images by 50% in the top left and bottom right corners

Here at this point, it is the image that I applied a double fuchsia color border on and also, an image with 75% with an automatic image height which is auto. I also added a round border of the image by 50% in the top left and bottom right corners as seen in the styleTP.ccs part shared in the below screenshot.

styleTP.css

The class="styled-image" attribute is what I used to apply specific styles to the image on the styleTP.ccspart.

---

Output

---

When you approach the mouse cursor over an image a transition is triggered allowing you to move its rounding towards the top right and bottom left corners. This transition has a one-second wait before triggering. It lasts 3 seconds and is fast at the beginning and decelerates at the end.

At this point, I still maintain the index.html code the way it is already and focus on the styleTP.ccs part which in my class of image style-image, I added a transition that will trigger one second of wait and then the last for 3 seconds if the mouse is removed from the image. In the h1: hover class I added a border-radius for the top left and bottom right to the zero so when we move to mouse the image, the border will return to 0 which means the border-radius has no effect.

styleTP.ccs

---

Output

To make you understand what we are doing I had to make a screen recording video which was uploaded on my YouTube channel before uploading it here on Steemit for you to see.

---

An animation is performed for the text. It consists of changing the font color and the background color.

index.html

At this point, I added classes in the p tage and to the last title tag h3as animated-text

---

styleTP.ccs

In the CSS part, I only put comments. The style of the image has already been stated after I then used keyframes to control the animation sequence. I also used color to change the background and font colors of the paragraph text. Align change is what I use for the keyframe to control the sequence of the title from the right side to the center and left side.

---

Output

---

(Exercise 2)

Structure of Page to have Image Gallery in HTML5 and CSS3 Code.

---

HTML5

In this exercise 2, I created a new HTML5 and CSS3 which as for the HTML5 I created: Babbar, section, basic layout, and footer. I also added minute links and named them using my Steemit profile name. The footer side is where I wrote my username.

---

CSS3

In this CSS3 part, I added a layout design for the basic website head, NAV section, and footer first. Also, I added a div and adjusted it using figure and alignment for the image. Finally, I then converted all the px to em using W3Schools converted.

---

Output

---

CSS Shading

Here I will be adding shadow to the work which I have already done as shown in the image below.

Output

---

CSS Rotation

At this point, I made use of the pseudo-class of CSS3 with selector nth-child and one element for each of the 6 images for the rotation. Before doing this I give a class name to all 6 images. Below is the code.

---

Output

---

CSS Animation

As for the animation, it is an animation property that I used to transform. The code that I used is transition: transform 0.
1s linear. I used 100mil second linear animation which you can see from the above code.

---

Output

For clarity, I uploaded the output of the animation on my YouTube channel, before sharing the video link here with you.

_{I am inviting: @dove11, @pelon53, @simonnwigwe, and @dave-hanny}

Best Regards,
Dynamic Devs Team
@kuba01
@starrchris

---

Disclaimer

_{All images that are used in this post are products of mine which were gotten as a screenshot and saved with my username along with the file name.}