.png "Creating a Solar System with HTML and CSS: A Step-by-Step Guide")
In this comprehensive tutorial, we'll walk through the process of building a basic solar system using HTML and CSS. Our solar system will consist of a sun, an earth, and a moon orbiting around the earth. We'll delve into each step with detailed explanations to ensure a thorough understanding.
Step 1: Setting Up the HTML Structure
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
</body>
</html>
```
Explanation
- We begin with the HTML structure.
- We use a `<div>` element with the class "container" to enclose our solar system.
- Inside the container, we have:
- A sun represented by a `<div>` element with the class "sun".
- An earth represented by another `<div>` element with the class "earth".
- Inside the earth, we have a moon represented by a `<div>` element with the class "moon".
Step 2: Styling the Solar System Using CSS
```css
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth, .moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before, .moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
```
Explanation:
- We style our solar system using CSS.
- The body is set to have no margin, taking up the entire viewport height, and centered both horizontally and vertically.
- The container div sets the dimensions and position of our solar system.
- The sun is styled with a yellow background color, a border-radius to make it circular, and a box-shadow to give it a glowing effect.
- Both the earth and moon are styled with borders to create a circular shape. The moon's border is set to transparent so it only appears as a crescent shape.
- The earth and moon are positioned absolutely within the container and animated using the `orbit` animation.
- The `orbit` animation rotates the earth and moon around their respective axes, creating the orbit effect.
- Before pseudo-elements are used to create the earth's blue color and the moon's gray color.
HTML,CSS Combination:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.earth::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
</div>
</body>
</html>
Output Of HTML CSS:
Enter the HTML and CSS code here..... If output not working try This {Click Here}
Conclusion:
Congratulations! You have successfully created a simple solar system using HTML and CSS. By following this detailed guide, you've learned how to structure the HTML, apply styles using CSS, and animate elements to simulate planetary orbits.
Feel free to experiment with the code, customize the sizes, colors, and animation speeds to create your own unique solar system representation!
.png)
Feel Free to Comment .
ReplyDelete