CQuinnDesign.com
  • Facebook
  • Feedburner
  • Foursquare
  • Google
  • Linkedin
  • Twitter
  • Youtube
  • Web Design
    • Landing Page Web Design
    • Web Design Pricing
    • Website Optimization
    • Website Maintenance
    • Web Design Process
    • Web Design FAQ
  • CMS Web Design
    • WordPress Design Experts
    • Drupal Design Experts
    • Joomla Design Experts
  • eCommerce Web Design
    • Open Cart Design
    • OSCommerce Design
    • Zen Cart Design
  • SEO Service
    • SEO Plans and Pricing
    • Social Media Marketing
    • SEO Copywriter
    • SEO Website Design
    • Search Engine FAQ
  • Portfolio
  • About
    • Why Choose Us
    • Web Design Affiliations
    • WordPress Tutorials
  • The Blog
  • Contact

CSS3 – Creating Shapes with pure CSS!

Posted on August 14, 2011 by CQuinnDesign in Website Design 1 Comment
Home» Website Design » CSS3 – Creating Shapes with pure CSS!
CSS3 – Creating Shapes with pure CSS!

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!

Twitter CSS Fail Whale

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 the 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 CQuinnDesign, LLC. 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:


[custom_list style="list-7"]

  • 8 point burst
  • 12 point burst
  • Talk Bubble
  • Pac Man
  • Egg
  • Diamond
  • Infinity
  • Heart
  • Octagon

[/custom_list]


[one_fourth_last]
[custom_list style="list-7"]

  • Hexagon
  • Pentagon
  • Star (5 point and 6 point)
  • Parallelogram
  • Triangles (from all angles)
  • Oval
  • Circle
  • Square
  • Rectangle

[/custom_list]
[/one_fourth_last]

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!

About CQuinnDesign

Owner of CQuinnDesign, LLC – Provides professional website design and development. Also enjoys search engine optimization and getting clients websites to the top of search engines. I love SEO, Web Design, WordPress, Twitter, FaceBook and pretty much anything related to programming and development.

Creating, CSS, CSS-Tricks, css3, HTML5, need, shapes, site, web design, web design how to, web design project, web design tips, web designers

One comment on “CSS3 – Creating Shapes with pure CSS!”

  1. Michael Anderson says:
    September 4, 2011 at 1:49 PM

    Truly useful cheers, I do believe your current followers would most likely want a great deal more writing along these lines keep up the good work.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Contact Us

Download Our Brochure!

CQuinnDesign Brochure

Our Technologies

Adobe After Affects DesignerAfter EffectsPhotoshop DesignersPhotoshop
Flash ProgrammersFlashDreamweaver ExpertsDreamweaver
InDesign DesignersInDesignIllustrator ExpertsIllustrator
HTML5 Web DesignHTML 5CSS3 Web DesignCSS 3
mySQL Database DevelopmentmySQLOpenCart DesignersOpenCart
PHP 4-5 programmersPHP 4 & 5Virtualmin ExpertsVirtualMin

Random Post

Google Levels the SEO Playing Field

The SEO playing field is about to change. Permanently. And while that might be good news for the vas[...]


Why Choose Us?

We are a web design & SEO company that was founded in 2006. CQuinnDesign, LLC is located in New Port Richey, FL in the heart of the Tampa Bay Area. Our team of website designers and SEO professionals ensure that your project is handled and executed right the first time. We don't believe in 12 month contracts and we only get paid if we perform.

Contact Us

  • Toll Free: 1-866-396-1181
  • Local: 1-727-569-1079
  • info@cquinndesign.com
  • Contact Us
  • cquinndesign
    • Facebook
    • Google
    • Twitter

(c) 2012 CQuinnDesign, LLC - Web Design by CQuinnDesign