Today I was trying to make a webpage with the Houston Astros colors as the background. I thought it would be cool to have a site that looked like my favorite baseball team. So, I started messing around with some simple stuff to get this done.
First, I needed to figure out what the exact colors of the Astros were. After a quick search, I found out they mainly use navy blue and orange. I went for the hex codes #002D62 for the navy and #EB6E1F for the orange. These were the main ones I needed.
Next, I started writing the code. I created a basic HTML file. I kept it super simple, just a plain background for starters. Inside the HTML, I added a style tag. This is where the magic happens, you know?
In the style section, I targeted the body of the webpage. I set the background-color property to the navy blue hex code I found. I saved the file and opened it in my browser. Boom! The whole background turned navy. It was a start, but I wanted something more interesting than just a single color.
Then, I thought about making a gradient. This would make the background look way cooler. I changed the background-color to background-image. I used the linear-gradient function. I wanted the gradient to go from top to bottom, so I used “to bottom” as the direction. I put the navy blue color first, then the orange color. Saved it and checked again. Now it had a nice gradient, starting from navy on top and going to orange on the bottom. It was looking pretty good, but I wanted to play around a bit more.
After that, I tried changing the direction of the gradient. Instead of “to bottom,” I used “to right.” This made the gradient go from left to right. Then I tried “to bottom right,” which made it diagonal. I experimented with different angles and directions until I found something I really liked.
I wanted to make it even fancier, so I looked up how to make a radial gradient. This one was a bit different. It goes from the center to the edges. I used the radial-gradient function and set the colors. The navy was in the center, and the orange was on the outside. I also played around with the shape and size of the gradient, but I found that the default circle looked the best.
In the end, I decided to go with a linear gradient from top to bottom. It just looked cleaner and more like the Astros’ style. I also made sure to add a little bit of text in white so it was easy to read against the dark background. Here’s what the final CSS in the style tag looked like:
-
body {
-
background-image: linear-gradient(to bottom, #002D62, #EB6E1F);
-
color: #FFFFFF; / This is for the text color /
-
font-family: Arial, sans-serif;
-
margin: 0;
-
padding: 20px;
So, that’s how I messed around and made a webpage with an Astros-themed background. It was a fun little project, and I learned a bit more about CSS gradients along the way. Not gonna lie, it took a few tries to get it right, but that’s part of the fun, right? Figuring stuff out and making something cool in the end.
