Home 👉 Web Projects
Step 1: Markup (HTML):-
This code is written in HTML, a language used for creating web pages. It represents a simple webpage structure. Inside the `<body>` tag, there is a `<div>` element with the class "base." Within this "base" `<div>`, there are four other `<div>` elements with different class names: "yellow," "red," "green," and "blue." These classes are typically used for styling or applying CSS (Cascading Style Sheets) to these elements, allowing you to change their appearance on the webpage. In essence, this code sets up a basic structure with a container "base" and four colored boxes inside it, but it doesn't specify any content or further styling details.
Step 2: Set an initial CSS rule in <style> tag that removes all default settings:-
This code is written in a style language called CSS, which is used to style and format web pages. In simple terms, this code is telling all the elements on a web page, like text and images, to have no padding, no margins, and to use a "box-sizing" property that makes sure the width and height of elements are calculated in a specific way. The `*` means it applies to all elements, while `*::after` and `*::before` refer to any content added after or before an element. Essentially, this code helps ensure that everything on the webpage is neatly arranged and doesn't have unexpected spacing or sizing issues.
Step 3: Style body tag that sets the contents at center:-
This code is for styling a webpage using CSS. It targets the entire webpage body. It sets the height of the body to be equal to the viewport height (100vh), which means the body will take up the full height of the visible screen. It also makes the content inside the body display as a flex container. This allows you to control the alignment of items inside the body. The "align-items: center" property centers items vertically within the body, and "justify-content: center" centers items horizontally. So, this code essentially centers the content on both the vertical and horizontal axes of the webpage.
Step 4: Create a base for loader-
This code defines a CSS class called ".base." It sets the height and width of elements using this class to be 150 pixels by 150 pixels. It also uses the "display: flex" property, which allows the elements to be displayed as flexible boxes, and "align-items: center" and "justify-content: center" properties to horizontally and vertically center the content inside the elements. So, any HTML element with the ".base" class will be a 150x150 pixel square that centers its content both vertically and horizontally.
Step 5: Style shapes at once:-
This code is describing how to style HTML elements with the class "base" that are inside a <div> tag. It sets their height and width to 50 pixels, and positions them absolutely on the web page. It also applies a CSS animation called "rotate" to these elements. This animation lasts for 3 seconds and has a linear timing function, which means it plays continuously in a smooth, unchanging manner. The animation repeats infinitely, so the elements with the "base" class will keep rotating in place on the web page.
Step 6: style yellow shape:-
This code defines a CSS style for an HTML element with the class "yellow." When this style is applied to an element, it will have a yellow background color. The "left" property is used to horizontally position the element at the center of its parent container. It does this by calculating 50% of the parent's width and then subtracting 50 pixels. The "top" property centers the element vertically, calculating 50% of the parent's height and subtracting 0 pixels (effectively keeping it centered). Finally, the "border-bottom-left-radius" property creates a rounded or circular shape for the bottom-left corner of the element with a radius of 100 pixels, giving it a curved appearance at that corner.
Step 7: style green shape:-
This code is defining the style for an HTML element with a class name "green." When an element is given this class, it will have a lime green background color. It will be positioned in the middle of its parent container both horizontally and vertically because of the "calc" function. The "border-top-right-radius" property gives the top-right corner of the element a circular or rounded appearance with a radius of 100 pixels. So, this code essentially styles an element to be a green box with rounded corners, positioned in the center of its parent container.
Step 8: Set degrees for shapes yellow and green:-
This code is defining a CSS style for elements with the classes "yellow" and "green." It's using a CSS custom property called "--degree" to set the rotation degree to -90 degrees. This means that any element with either the "yellow" or "green" class will be rotated 90 degrees counterclockwise, giving it a slanted or tilted appearance. This custom property can be reused in other parts of the CSS to easily apply the same rotation degree to multiple elements without having to manually specify -90 degrees each time.
Step 9: Style blue shape:-
This code is defining the style for an HTML element with the class "blue." It sets the background color to light blue (aqua), positions the element in the center of its container both horizontally and vertically using the `calc` function, and gives it rounded corners with a border radius of 100 pixels on the top-left corner. Essentially, it's styling an element to have a light blue background and be positioned at the center of its parent container with a rounded top-left corner.
Step 10: Style red shape:-
This code is defining a CSS style for elements with the class "red." It specifies that elements with this class should have a red background color. The "left" and "top" properties are used to position the element in the middle of its container, but the values "calc(50% - 0px)" essentially keep it centered with no horizontal or vertical offset. Lastly, it gives the element a rounded bottom-right corner with a radius of 100 pixels, creating a circular appearance at the bottom-right corner of the element.
Step 11: Set degrees for shapes red and blue:-
This code is defining a style for elements with the class "red" and "blue" using CSS (Cascading Style Sheets). It sets a custom CSS variable called "--degree" to the value of 90 degrees. This variable can then be used to control various properties like the rotation of these elements in your webpage. So, any HTML element with the class "red" or "blue" can now use this "--degree" variable to specify a 90-degree rotation in their styling. This code snippet simplifies the process of styling these elements by centralizing the degree value for rotation in one place.
Step 12: Add keyframes:-
This code defines a set of keyframes named "rotate" that are used in CSS animations. These keyframes specify how an element should rotate as it goes from 0% to 100% of its animation duration. At the start (0%), the element has no rotation (0 degrees). Then, in small increments at various points, it rotates using a value that depends on a custom CSS variable called "--degree." The degree of rotation increases at different stages, and this rotation pattern continues until it reaches 100%. So, this code creates a custom rotation animation with varying degrees based on the value of "--degree" at different points during the animation, which can be applied to an HTML element to make it spin or rotate in a controlled manner.
Comments
Post a Comment