Seriously, I don’t understand why it’s so difficult for people to just update their browsers! It is so simple and does us web designers a huge favor. When you update your Internet browser you are opened to a whole new world of design and security. If those are not enough reasons to update, maybe this article will help. I’m going to show you the benefits of CSS3 and how to utilize the new CSS3 in your next web design project.
Twitter’s Fail Whale is PURE CSS!
We all know by now that CSS3 and HTML5 are very powerful. CSS3 reduces the need to use images in your designs, which comes in handy too. That’s why I am going to show you how to create shapes with pure CSS. This can come in handy because it is very efficient to utilize CSS in web design because it takes less load off your web hosting servers and offloads the computing to your site visitors CPU (I mean their computer, duh!). In turn this lowers bandwidth of your site and can improve speed, SEO, etc.
So lets get to the point here, creating freakin’ shapes with only CSS. Rounded corners are created using CSS and nothing else, this eliminates the need for CSS sprites and such. Drop shadows on boxes or behind images, the infinity symbol and others are also created using CSS3. A good site to look for tons of CSS how-to’s is a very well known site, CSS-Tricks. The web developer, Chris Coyer, from CSS-Tricks actually works for a company called WuFoo, that creates online forms for websites. This company is located in Tampa Bay just like XTELWEB. cool huh? (not really) Okay okay, I get it.
Anyway, CSS-Tricks has a lot of great info on CSS and how to use it in your web design.
Some of the shapes you can create are:
- 8 point burst
- 12 point burst
- Talk Bubble
- Pac Man
- Egg
- Diamond
- Infinity
- Heart
- Octagon
- Hexagon
- Pentagon
- Star (5 point and 6 point)
- Parallelogram
- Triangles (from all angles)
- Oval
- Circle
- Square
- Rectangle
So basically if you have a look at this link on CSS-Tricks it goes into more detail about how the shapes are actually created in CSS. Of course, if you hire a web development company to design your website, you will not have to worry about things like this!
