Fried Logic

Tara's Top Tweets of the Week

I’ve decided to quit sending out multiple emails a day to my colleagues with links to articles concerning web design, development, art, and social media. So, instead of the many emails that clog up my co-workers’ mailboxes, I’m going to start posting an article a week here, on Fried Logic, for everyone to peruse. Where do I find all of the article links  that I share? I get most of them through Twitter and a few from Google Buzz, Facebook, LinkedIn Groups, and shared links on Delicious. I post ALL of my links on Twitter, so if you’re looking for more than just the few resource articles below, please check out my Twitter page – http://www.twitter.com/tmaxwell

Top CSS3 Articles for this week:

1. CSS3 Examples and Best Practices from WebDesignerWall:  Really nice collection of CSS3 techniques you can start using now which degrade nicely so that IE users and other non-supported browser users still see your overall page layout without it “breaking”.  As many of you probably know, CSS3 allows designers and developers to do a lot more creative work without having to use a lot of images or Adobe Flash; however, older browsers and most Internet Explorer versions don’t support all of the selectors for CSS3, yet.  To get more information on what CSS3 selectors are supported by which browsers, and for the latest on CSS3 in general, you should check out CSS3.info (Great domain name, eh?)  My favorite example from “CSS3 Examples and Best Practices” is about how Bobulate.com uses a custom font but provides a back-up, similar sized font in case the user’s browser doesn’t support it.
   

   CSS3 Custom Font Usage on Bobulate.com

2. 10 Examples of Futuristic CSS3 techniques from CatsWhoCode: This article does a very nice job of showcasing the author’s picks for the top 10 CSS3 examples. Note that he describes his picks as “futuristic” – meaning that they are great techniques to try out and sample but probably shouldn’t be used much (especially for clients) until all popular browsers fully support them. What’s great about this article is that the examples are from sites that explain how to create the effect shown and most have full code samples. One of my favorites is “Create a fancy web form with field hints using only CSS3“  (using no JavaScript).
   

   CSS3 Form Field Hints

3. A Fresh Bottom Slide Out Menu with jQuery from Codrops: While this article is more about jQuery, it also uses several CSS3 properties for the shadow effects and rounded corners.  It steps you through the full markup, CSS, and JavaScript to create a really nice looking and creative slide out menu. I just found this site through a Tweet today!  It looks to have some really great tutorials for the latest web technologies.
   

   jQuery and CSS3 Slide Out Menu from Codrops.com

4. 6 CSS3 Smashing Generators from Marked Lines: Nice collection of CSS3 generators.  These generators show you the code used for different special effects you may want to use in your site design, allowing you to spend more time creating cool designs and concepting and less time looking up the CSS3 code you need for every browser. Most of these generators allow you to input colors using a color picker or pallets, border radii, shadow width and offset, etc, and allow you to preview the results before copying and using the code.  My favorite generator is #5 (my next link).
5. CSS3 Sandbox from westciv: This CSS3 generator(s) showcases gradients, shadows, transforms, and text strokes.  You can choose which browser you are using to see the preview properly and provides generated code for each supported browser.  They also provide a tool called XRAY, which is a fantastic bookmarklet using CSS3 features to show you position, margins, padding, dimensions and more details of any element of the page you are visiting. Note: You have to use a Webkit or Mozilla-based browser to get the best display of information.
   

   westciv Tools and CSS3 Generators

6. 10 Amazing Examples of Innovative CSS3 Animations from Design Shack: The title pretty  much says it all! Once again, you will need a modern browser (non-IE) to fully appreciate each example – several of them will only work on WebKit browsers like Safari. Because I’m a Star Wars fanatic, I really like the “Star Wars Crawl” example.
   

   Star Wars Crawl from Guillermo Esteves

7. CSS3 = Progressive Enhancement = Smart Design from Perishable Press: Last, but certainly not least, this article goes into depth on several CSS3 techniques and when to use them (going back to the topic of the first link above). It’s my favorite CSS3 article to date! Here’s a quote from their article: “In practice, progressive enhancement enables designers to design websites according to some predetermined support baseline and then gradually improve and optimize appearance and functionality to accommodate the most advanced browsers. Closely related to this idea is the principle of graceful degradation, which is what should happen when newer design methods aren’t understood or supported by certain browsers.”

That’s all folks!  Next week’s topic will be all about WordPress – stay tuned!