Tag CSS3

Site Launch: DaveMcCollum.com

September 28th, 2010


Proud to launch my completely redesigned personal site. My old site was the first site I ever designed and was a static HTML site that badly needed to be redone. Finally had some time to work on my own  site and I am very happy with the results. Before I began designing my new site,  I had a few goals that I wanted to accomplish.


  • I wanted the blog to be the centerpiece of the new site
  • A large picture to capture the readers attention
  • A sidebar that is useful
  • Minimalistic styling


I wanted my new site to be a blog about my thoughts, ideas and personal experiences.  I felt the best way to  focus the reader’s attention on my post would be to start it with a large picture.  This is something that is fairly common in newspaper sites but less common in blogs.  I decided to have each image have 16 x 9 dimensions so there would be uniformity between the blog posts.


A blog’s sidebar is often something that is overlooked and hastily thrown together.  The sidebar can have two forms.  If the blog is within a larger site and not the main page then the sidebar should be focused on blog navigation.  However, if the blog is the main page or the only page, then the sidebar should give additional information about the blog and have the navigation be secondary.


For my personal site I chose to include information by descending importance.  I started with a photo of me  so the reader would be able to have a face to put with the content of the blog.  A brief bio explaining who I am, what I do and how to contact me. After the link to the contact page I chose to include social media icons as another way to get in touch.  I thought it was important to desaturate the icons so the reader’s eye would not be distracted by the colorful social media icons. After the icons I chose to include my twitter feed to give the blog a personal and quickly updated feel. For this I simply used the official twitter widget and adjusted the CSS to match my blog.  I also added some javascript that made the widget load after the rest of my site loads.  I don’t want my site to be held up if Twitter’s server’s are slow or down.  Finally, I chose to include my latest Flickr photos with the Flickr RSS plugin.  I styled this section just like the twitter widget above it.  I added the Flickr logo and the link to the right to match the styling above.


The overall styling of the page was meant to keep the user focused on the content and not distract them with the design.  I chose to use shades of black for styling.  The background is a grainy shade of gray and  the border of the main content has a slight box shadow made with CSS3. The design looks good but in no way does it overpower the content.


My personal site has come a long way since my first attempt at creating a website.  I look forward to continuing to add worthwhile content in the future.



Posted in Launch Tagged with , ,

View Comments

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
Home | Log in
© 2012 Web Rhetoric, LLC. | Web Strategy and Design based in Boulder, CO | Valid HTML5