CSS3 Made Simple

July 13th, 2010


The use of CSS3 in web design is beginning to see more and more popularity.  Unfortunately, users of Internet Explorer (which still has a large browser market share) are left out of the party until the release of IE 9.  However, this doesn’t mean that you should abandon the cool features that the next generation of CSS has to offer.  CSS3 allows designers to simplify their efforts which used to be based on designing images in Photoshop.  Now designers can let the code do the work of rounding corners and adding shadows.  Here are three simple CSS3 methods that every designer should know.


 

Rounded Corners


The old way of rounding corners in your design was to painstakingly include photoshoped images.  This process bloated your code and made it frustrating if you wanted to change aspects of your design after including the images.  With the CSS3 property of border-radius, the process is much simpler.


Simply add the following code to the element you want rounded in your CSS file.  If you want your corners to be only slightly rounded use a smaller number of px.  If you want large rounded corners use a larger number of px.


border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;


Does the code above seem kind of repetitive?  Well, it is.  The top line is the official code to transform your element to have rounded corners.  However, CSS3 is not uniformly supported by all browsers yet.  As a result (-moz-border-radius) is needed for Firefox and (-webkit-border-radius) is needed for browsers such as Safari that use the WebKit engine.  Once CSS3 is adopted across the board, the only code you will need is (border-radius).


Box Shadow

To make a really beautiful design that stands out from the crowd, it’s all about the details.  The CSS3 element box-shadow allows you to add a subtle shadow to the outside of a box element.


Take a look at the code below.


box-shadow: 3px 3px 10px #000;
-moz-box-shadow: 3px 3px 10px #000;
-webkit-box-shadow: 3px 3px 10px #000;


Here is what the values mean after the box-shadow property.
  • The first value controls how far the shadow moves left or right.  Use a positive number to move it to the right and a negative number to move your shadow to the left.
  • The second value controls whether the shadow will be above your box or below it.  Use a positive number for the shadow to appear below the box and use a negative number for the shadow to appear above it.
  • The third value controls how blurry your shadow will be.  If you set the value to 0 the shadow will be sharp, if you set the value higher it will be blurrier.
  • Finally, the fourth value you will recognize as a standard RGB code for color.  In the code listed above the color is set to black (#000)


Take note that I included the Firefox (-moz-box-shadow)  and WebKit ( -webkit-box-shadow) versions of this property.  You should include this code in your own design.


Text Shadow


To add more emphasis to your headlines (or any other text) a cool new feature in CSS3 is the text-shadow property.


Take a look at the code below.


text-shadow: 2px 2px 1px #000;


Here is what the values mean after the text-shadow property (they are exactly the same as the box shadow values.
  • The first value controls how far the shadow moves left or right.  use a positive number to move it to the right and use a negative number to move your shadow to the left.
  • The second value controls whether the shadow will be above your text or below it.  Use a positive number for the shadow to appear below the text and use a negative number for the shadow to appear above it.
  • The third value controls how blurry your shadow will be.  If you set the value to 0 the shadow will be sharp, if you set the value higher it will be blurrier.
  • Finally, the fourth value you will recognize as a standard RGB code for color.  In the code listed above, the color is set to black (#000)


With these three CSS3 properties you can make dramatic changes to your design with a few lines of code that before were only possible with Photoshopped images.  As support of CSS3 becomes more widespread it will become the standard used on websites everywhere.  How are you using CSS3 in your designs?  If you have any comments or questions about CSS3 please let me know in the comment section below.




Posted in Web Development Tagged with ,

View Comments

Web Development and Rhetoric

July 1st, 2010


When I tell people that the name of my web design company is Web Rhetoric they are often confused as to what rhetoric is and quite often they are unsure how to spell it.  I chose to include the term rhetoric in my company’s title because it was at the core of my education at the University of Colorado and hope it will be a large part of my future career.  But what is rhetoric?


There are countless definitions of rhetoric from ancient philosophers such as Plato and Cicero to more modern thinkers such as Kenneth Burke and Gerard Hauser.  However, one of the best definitions comes from the ancient Greek philosopher Aristotle who defines rhetoric as “the ability to see in each particular case the available means of persuasion”.  In easier terms, Aristotle is explaining that rhetoric is simply using language to communicate effectively.   Even if you haven’t heard the term rhetoric or just don’t know how to spell it, I guarantee that you use it every day. Back in Aristotle’s day, the art of persuasive discourse was extremely important.  Quite often whoever could give the best speech would have the most influence over public opinion and civic life.  Over 2,000 years later in our modern day culture, rhetoric is just as important as it was in ancient Greece.  Rhetoric is seen everywhere from President Obama’s carefully crafted speeches to our arguments with friends over what movie to watch.  We are constantly trying to persuade and influence the opinions of those around us.  So what does this have to do with the internet? Everything.


The rise of the internet has given rhetoric a new medium to be expressed with an exponentially growing audience.  The web is the perfect place to demonstrate rhetoric at its finest.  In the ancient Greek days, speakers only had their voice and the stage they were standing on to influence their audiences.  Today, the web presents countless opportunities to connect with people. The web started out with designers using basic web development techniques such as manipulation of colors, fonts and pictures to persuade viewers.  Modern web development fully engages the viewer using videos, comments and two way interactions such as Twitter or Facebook.  There are more ways than ever to engage, interact and persuade the opinions of others.


With every site that I create, I attempt to engage, interact and connect with the viewer.  I think about who the audience is and why they are visiting this website.  What information did they come looking for and what impression do I want them to leave with? The web is a tremendous place to express rhetorical skill.  I wonder how Aristotle would use the web if he were a designer?


Posted in Rhetoric, Web Development Tagged with , , , ,

View Comments
Home | Log in
© 2012 Web Rhetoric, LLC. | Web Strategy and Design based in Boulder, CO | Valid HTML5