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.
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 |
|---|
| styleTP.css |
|---|
index.html part.
| Output |
|---|
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 |
|---|
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
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.