CSS is one of the most basic building blocks of modern web design. It creates the structure and style that surrounds your content and is capable of making your site a joy to use or a pain in the neck. Mastering CSS is one of the most important things a web designer can do, and has really become an essential criteria for being a successful designer.
In Part 1: Styling Design Elements1 we covered the basics of web design with CSS. In Part 2 we’re offering up some more advanced techniques and effects you can achieve with CSS. Everything from creating your own online apps (like calendars) to styling web pages for use with the iPhone to some basics of working with CSS3 is covered here.
1. Calendars, Lists, Tables, and Timelines
CSS can be used to build calendars, timelines, and even “tables” (or charts). The tutorials below sometimes use CSS combined with various programming languages.
CSS/jQuery Sequential List2
Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.
Build a Calendar Using PHP, XHTML, and CSS Example13
A simple tutorial for creating a dynamic online calendar.
CSS: Menu List Design15
This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the li element, then use the absolute position property to shift the nested elements down to cover the border.
Date Badges and Comment Bubbles for Your Blog19
“One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.”
2. iPhone CSS Techniques
iPhone has revolutionized the way many people view the Web. Mobile web browsers before that were often clunky and were primarily used for quickly looking things up online, not for general browsing. But now, the iPhone and similar new mobiles devices make browsing online while on the go much easier. It makes sense to design with the iPhone in mind now. Below are some resources for creating CSS specifically for the iPhone.
iPhone Application UI Design Patterns23
The iPhone is one big constraint — no keyboard, small screen, few buttons — so designing applications for the iPhone is an exercise in building smart, simple software. There are three main interaction concepts that correspond to three different types of View Controllers: Navigation Controllers, Tab Bar Controllers, Modal View Controllers and Table View Controllers respectfully. These are the building blocks for crafting iPhone applications.
Safari on iPhone Graphics, Media, and Visual Effects Coding How-To’s27
This is a complete guide from Apple on working with Safari on the iPhone, including information on graphics, media and more.
How to Get Started with iPhone Dev30
This article is an introduction to the various ways of getting content and applications onto the iPhone. It is by no means a full guide, but hopes to point you in the right direction and give you an overview of what is involved in the process.
6 Tips to Optimize Your Website for iPhone32
Ordinary websites are receiving more traffic from mobile devices than ever before. Even if you have no immediate plans to serve a microsite to your iPhone visitors, there are steps you can take to make your current website more iPhone friendly. In this article you will explore several techniques you can perform to present optimized content for these users.
jPint is a set of libraries designed by Journyx to allow developers to build web-based applications that look and feel as much like native iPhone apps as possible, while retaining the ability for those apps to be used by people who, for whatever reason, don’t actually have an iPhone.
43 iPhone Development Resources34
Programming for the iPhone is still pretty new. It might be a bit tougher to find iPhone developer resources, but we found a bunch that will get you through building any iPhone app you might be starting on. Check out our list of our favorite developer books, blogs, podcasts, screencasts, open-source libraries, communities, forums, conferences, training, and more.
3. Form and Search Techniques
Creating user-friendly forms, login screen, and search boxes is an important bit of design. Whether you just want to make your forms a bit more aesthetically pleasing or if you want to increase usability by changing the appearance of standard forms, the resources below can help.
Create Custom Search Bars with Image Replacement using CSS35
The incorporation of custom elements, like search boxes, can set your website apart from its competitors. This tutorial covers how to add a custom search bar to your site, though it’s not cross-browser compatible.
Designing The Search Submit Button – A CSS Cross-Browser Compatible Solution39
Learn how to create a custom image like a magnifying glass, or the word ‘GO’ in a circle, instead of the default search submit button.
Making Forms Convert Through Awesome Inline Labels41
This tutorial shows how to increase form follow-through by using better inline labels.
45+ Really Essential Free HTML [Form] Enhancements45
This collection of free form enhancements covers a number of CSS techniques.
4. Visualization Techniques
Creating visual representations of data can really set your website apart. Whether these are just tables clarifying the relationships between data sets or even things as simple as loaders and progress bars, creating an effective visualization of your data improves user experience and increases the likelihood your visitors will comprehend your site’s content.
5. Other Handy Techniques and Tips
Here are a handful of other CSS techniques for creating things like transparency and realistic hover effects.
Placing a CSS background image horizontally right on an h2 using a span element58
Learn how to add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.
Snazzy Pullquotes for Your Blog 60
Learn how to add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.
Creating Thumbnails Using the CSS Clip Property66
clip property in CSS is useful for clipping images and creating thumbnails without having to create additional files. This trick can be used to create square thumbnails, or to create other kinds of thumbnails without actually duplicating files on the server. Here is the rundown.
CSS image replacement with… images!68
Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn’t show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color. This article present a method that uses a print-optimized image in the html, and CSS to swap out the image with a screen-friendly one.
6. CSS3 Techniques
Below are a variety of techniques specifically for CSS3. They include information on mixing CSS3 with jQuery, using shadow effects and gradients, and even some collections that cover multiple techniques and tutorials.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials 80
A great collection of CSS3 tutorials to do just about anything.
7. CSS Tools
The tools listed here can make your CSS better, faster, and more efficient.
SlickMap CSS – A Visual Sitemapping Tool for Web Developers82
A tool to create a styled sitemap from a basic HTML unordered list.
Phoenix : Add-ons for Firefox84
Boks – a visual grid editor92
Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS’s framework. It’s been designed for those who think the Grid System is good but never really took the time to give it love. It handles grid configuration, baseline rhythm pimpin’, CSS (with or without compression) and grid.png export and HTML layout.
Typeselect – Selectable text replacement97
By leveraging typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text, Type Select is able to combine custom fonts with your browser’s native text selection funcationality. You can now interact with beautifully rendered typefaces just like you do with normal text. Drawbacks: no support for :hover or line breaks, text is not selectable in IE.
This articles gives a good overview of GZip compression.
8. More Articles and Resources
The articles below offer up some great additional resources for working with CSS. They include hacks, creating interactive designs with CSS and jQuery, and a collection of CSS tricks for working with WordPress, among others.
Different Ways To Format CSS105
This post will focus on the different ways to format CSS, which differs from the different ways to organize CSS. Definitely related concepts, but organization has more to do with how things are grouped and ordered while formatting has to do with spacing and indenting.
CSS Sprites are Stupid — Let’s Use Archives Instead!106
An article covering why using archives is better than CSS sprites.
7 tiny CSS tricks you’ll always need for a WordPress theme.108
A roundup of essential CSS tricks and techiques specific to WordPress design and development.
15 Effective Tips and Tricks from the Masters of CSS110
A roundup of advice from some of the masters of CSS.
21 Stylish CSS/jQuery Solutions To Beautify Your Web Designs 112
A collection of CSS and jQuery techniques to make your websites more aesthetically pleasing.
10 CSS properties that ‘were’ impossible to implement in IE6116
This post covers ten CSS techniques that were supposedly impossible to implement in IE6, as well as information on how to make them work.
About the author
Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing119. She’s also the author of the forthcoming book Internet Famous120.
- 1 http://www.smashingmagazine.com/2009/08/03/mastering-css-styling-design-elements/
- 2 http://www.webdesignerwall.com/tutorials/jquery-sequential-list/
- 3 http://www.webdesignerwall.com/tutorials/jquery-sequential-list/
- 4 http://css-tricks.com/date-display-with-sprites/
- 5 http://snook.ca/archives/html_and_css/css-text-rotation
- 6 http://css-tricks.com/date-display-with-sprites/
- 7 http://mattbango.com/notebook/web-development/pure-css-timeline/
- 8 http://mattbango.com/notebook/web-development/pure-css-timeline/
- 9 http://www.katemonkey.co.uk/article/18/a-css-based-timeline
- 10 http://www.katemonkey.co.uk/article/18/a-css-based-timeline
- 11 http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery
- 12 http://www.stefanoverna.com/log/create-astonishing-ical-like-calendars-with-jquery
- 13 http://davidwalsh.name/dw-content/php-calendar.php
- 14 http://davidwalsh.name/dw-content/php-calendar.php
- 15 http://www.webdesignerwall.com/tutorials/css-menu-list-design/
- 16 http://www.webdesignerwall.com/tutorials/css-menu-list-design/
- 17 http://www.imaputz.com/cssStuff/bigFourVersion.html
- 18 http://www.imaputz.com/cssStuff/bigFourVersion.html
- 19 http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/
- 20 http://css-tricks.com/date-badges-and-comment-bubbles-for-your-blog/
- 21 http://www.timrivera.com/tests/csstables.html
- 22 http://www.timrivera.com/tests/csstables.html
- 23 http://flyosity.com/application-design/iphone-application-design-patterns.php
- 24 http://flyosity.com/application-design/iphone-application-design-patterns.php
- 25 http://minimaldesign.net/articles/read/serving-iphone-specific-css
- 26 http://minimaldesign.net/articles/read/serving-iphone-specific-css
- 27 http://developer.apple.com/safari/library/codinghowtos/Mobile/GraphicsMediaAndVisualEffects/index.html
- 28 http://developer.apple.com/safari/library/codinghowtos/Mobile/GraphicsMediaAndVisualEffects/index.html
- 29 http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/
- 30 http://www.webdesignerdepot.com/2009/05/how-to-get-started-with-iphone-dev/
- 31 http://www.webdesignerdepot.com/2009/05/how-to-get-started-with-iphone-dev/
- 32 http://www.iphonemicrosites.com/articles/6-tips-to-optimize-your-current-site-for-the-iphone/
- 33 http://www.journyx.com/jpint/
- 34 http://theappleblog.com/2009/06/01/43-iphone-development-resources/
- 35 http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css
- 36 http://www.nimlok-louisiana.com/blog/create-custom-search-bars-with-image-replacement-using-css
- 37 http://www.sitepoint.com/article/fancy-form-design-css/
- 38 http://www.sitepoint.com/article/fancy-form-design-css/
- 39 http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
- 40 http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
- 41 http://www.zurb.com/article/271/making-forms-convert-through-awesome-inli
- 42 http://www.zurb.com/article/271/making-forms-convert-through-awesome-inli
- 43 http://cssglobe.com/post/3875/cssg-collections-web-forms
- 44 http://cssglobe.com/post/3875/cssg-collections-web-forms
- 45 http://www.tripwiremagazine.com/tools/html/45-really-essential-free-html-form-enhancements.html
- 46 http://www.onderhond.com/blog/work/css-minimal-form-layout
- 47 http://www.onderhond.com/blog/work/css-minimal-form-layout
- 48 http://blog.benogle.com/2009/06/16/simple-css-shiny-progress-bar-technique/
- 49 http://blog.benogle.com/2009/06/16/simple-css-shiny-progress-bar-technique/
- 50 http://www.tripwiremagazine.com/design/css-techniques/20-css-data-visualization-techniques.html
- 51 http://www.tripwiremagazine.com/design/css-techniques/20-css-data-visualization-techniques.html
- 52 http://www.alistapart.com/articles/accessibledatavisualization/
- 53 http://www.alistapart.com/articles/accessibledatavisualization/
- 54 http://www.komodomedia.com/blog/2006/01/css-star-rating-part-deux/#
- 55 http://www.komodomedia.com/blog/2006/01/css-star-rating-part-deux/#
- 56 http://weblensblogs.blogspot.com/2006/04/two-techniques-for-css-transparency.html
- 57 http://weblensblogs.blogspot.com/2006/04/two-techniques-for-css-transparency.html
- 58 http://veerle.duoh.com/blog/comments/placing_a_css_background_image_horizontally_right_on_an_h2_using_a_span_ele/
- 59 http://veerle.duoh.com/blog/comments/placing_a_css_background_image_horizontally_right_on_an_h2_using_a_span_ele/
- 60 http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php
- 61 http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php
- 62 http://www.daltonlp.com/view/217
- 63 http://www.daltonlp.com/view/217
- 64 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
- 65 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
- 66 http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
- 67 http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html
- 68 http://www.askthecssguy.com/2009/06/css_image_replacement_for_imag.html
- 69 http://css-tricks.com/text-blocks-over-image/
- 70 http://css-tricks.com/text-blocks-over-image/
- 71 http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
- 72 http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
- 73 http://monc.se/kitchen/140/disabling-deprecated-html-using-css
- 74 http://monc.se/kitchen/140/disabling-deprecated-html-using-css
- 75 http://www.webair.it/blog/2009/07/09/mixing-css3-and-jquery-how-to-css3-effects-via-jquery/
- 76 http://ajaxian.com/archives/css-gradients-in-action
- 77 http://ajaxian.com/archives/css-gradients-in-action
- 78 http://www.james-blogs.com/2009/04/19/the-shadow-effect-in-css3/
- 79 http://inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3/
- 80 http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html
- 81 http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html
- 82 http://astuteo.com/slickmap/
- 83 http://astuteo.com/slickmap/
- 84 https://addons.mozilla.org/en-US/firefox/addon/11708/
- 85 https://addons.mozilla.org/en-US/firefox/addon/11708/
- 88 http://www.grafikk.co.uk/gridmaker/#/12,60,500,10,16761021,true,10,10,16732743/
- 89 http://www.grafikk.co.uk/gridmaker/#/12,60,500,10,16761021,true,10,10,16732743/
- 90 https://addons.mozilla.org/en-US/firefox/addon/1002
- 91 https://addons.mozilla.org/en-US/firefox/addon/1002
- 92 http://toki-woki.net/p/Boks/
- 93 http://toki-woki.net/p/Boks/
- 94 http://www.modernizr.com/
- 95 http://drewish.com/tools/vertical-rhythm
- 96 http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/
- 97 http://www.typeselect.org/
- 98 http://www.typeselect.org/
- 99 http://cssprism.com/
- 100 http://cssprism.com/
- 102 http://webstandard.kulando.de/post/2009/06/02/interactive-webdesign-with-css-and-jquery
- 103 http://webstandard.kulando.de/post/2009/06/02/interactive-webdesign-with-css-and-jquery
- 104 http://www.sitepoint.com/article/top-ten-css-tricks/
- 105 http://css-tricks.com/different-ways-to-format-css/
- 106 http://kaioa.com/node/99
- 107 http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
- 108 http://www.flisterz.com/2007/07/30/7-tiny-css-tricks-youll-always-need-for-a-wordpress-theme/
- 109 http://www.flisterz.com/2007/07/30/7-tiny-css-tricks-youll-always-need-for-a-wordpress-theme/
- 110 http://www.noupe.com/css/15-effective-tips-and-tricks-from-the-masters-of-css.html
- 111 http://www.noupe.com/css/15-effective-tips-and-tricks-from-the-masters-of-css.html
- 112 http://www.smashingapps.com/2009/06/05/21-stylish-cssjquery-solutions-to-beautify-your-web-designs.html
- 113 http://www.smashingapps.com/2009/06/05/21-stylish-cssjquery-solutions-to-beautify-your-web-designs.html
- 114 http://forabeautifulweb.com/blog/about/css_a_tribute_to_selectors/
- 115 http://forabeautifulweb.com/blog/about/css_a_tribute_to_selectors/
- 116 http://www.productivedreams.com/properties-that-were-impossible-to-implement-in-ie6/
- 117 http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
- 118 http://www.mailchimp.com/blog/background-images-and-css-in-html-email/
- 119 http://cameronchapman.com
- 120 http://internetfamousbook.com
- 121 http://www.smashingmagazine.com/2009/08/05/the-smashing-book-pre-order-now-and-save-20/?utm_source=Smashing%2BMagazine&utm_medium=editorialbox&utm_content=editorialbox%2Bbottom&utm_campaign=Smashing%2BBook
- 122 http://www.smashingmagazine.com/2009/08/05/the-smashing-book-pre-order-now-and-save-20/?utm_source=Smashing%2BMagazine&utm_medium=editorialbox&utm_content=editorialbox%2Bbottom&utm_campaign=Smashing%2BBook
- 123 http://shop.smashingmagazine.com/smashingbook-dispatcher.php?utm_source=Smashing%2BMagazine&utm_medium=editorialbox&utm_content=editorialbox%2Bbottom%20to%20cart&utm_campaign=Smashing%2BBook