CSS Shapes 101 answered a lot of my questions about thinking outside of the box for website design. So far I have felt restricted to creating layouts based on stacked and layered rectangles and squares, but the article introduces me to infinite new options.
The article had images of websites with layouts that were splashed across the page almost haphazardly. Though the images weren’t anything I personally wouldn’t want to use on a webpage, they gave me ideas for how to break out of a rectangular grid.
Lots of code was provided to show exactly how to use and apply shapes to images and text. Unfortunately though, I was unable to implement any of the code examples. I tried to make a codepen with circle or pentagonal images, but I was unsuccessful. The code didn’t seem to do anything to the images at all. I’m not sure if “CSS Shapes” is a different part of the language that I would have to download to use, or if the browser I was using just doesn’t support it. I don’t know why I was unable to make it work, but my frustration lead me to other solutions.
Then moving on to the second page of the website, “Our Roasters,” I felt pretty comfortable with the code and had an example to work from. Though there were no instructions, I was able to reuse a lot of the code from the home page of the coffee shop website. I had to change a couple of image references, and the content of the article headline and paragraphs, and then add the links so that the pages connect. Changing the html code was a simple task, but creating the CSS code was even more simple. I started to create a new CSS file for the “Our Roasters” page, but realized that I was copying everything exactly from the CSS file of the home page. Knowing this, I changed the CSS link in the “Our Roasters” to the one for the home page so that both html files reference the same CSS file. The website rendered perfectly. This process was a good lesson in simplifying code to work to your advantage. It seems that keeping all the html files connected to the same CSS file is a good way to keep a website consistent.
After seeing what could be done with CSS shapes, I had to figure out a way to break out of a rectangular grid. I ended up googling some ways to make shapes and what I found was pretty amazing. There are some simple explanations of how to round corners, or make circle and ovals, but one website had a list of code for increasingly complex shapes. It started with a circle and ovals and diamonds, but got to hearts, infinity signs, stars, and speech bubbles.
Though the code for these was really intense and definitely not as powerful as the code in the article I read, it did work for me in codepen. Knowing that it is possible to make shapes besides rectangles has spurred my imagination for new website designs. I will look into how to make CSS shapes work, but for now I am content knowing that my options are open!