Part 2 of our code snippets series takes a look at more handy pieces of html, ajax and css that you can incorporate into your web designs. If you missed part 1 you can see it here.

Tables with style - It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

203.jpg

CSS Shadows - So for a couple of years now, folks have been trying to find ways to work around the fact that the box-shadow property from CSS3 seems to perpetually be just a few months away from actually appearing in Web browsers everywhere. Box shadows are a very common design element, and not being able to use them on the Web is a real pain in the ass.

126.jpg

Airtight Corners - Here’s a quick number on how to produce a box with rounded corners using only one image, and off-setting that image for each corner.

218.jpg

Collapsing Tables With DOM and CSS - Each of the tables below has a class called “footcollapse” which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.

312.jpg

3D Box Model Diagram - Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram.

412.jpg

Docking Boxes - Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements.

512.jpg

CSS Submit Button - For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.

610.jpg

PHP Style Switcher - For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.

77.jpg

Two Color sIFR - How to implement two color sIFR

810.jpg

Styled images with caption - The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.

96.jpg

Simple CSS Image Switcher - This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function.

105.jpg

Dynamic Pie Chart with CSS - This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries

233.jpg

Replicating a Tree Table - The aim is to replicate a graphic table tree using HTML

1112.jpg

Listamatic - Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.

127.jpg

Simple accessible external links - How to identify external links

134.jpg

CSS Element Hover Effect - Using css and html only

145.jpg

CSS Going to Print - You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

154.jpg

Drop Caps with CSS - The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look.

163.jpg

CSS: Unordered List Calendar - This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be faily stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.

173.jpg

Visited Links - Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they’ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead.

183.jpg

Smart Back to top link - Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height

193.jpg

Displaying percentages with CSS - In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea

219.jpg

Unobtrusive Sidenotes - Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs.

224.jpg

CSS Cheatsheet - The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

243.jpg

CSS Navigation Techniques - A roundup of 37 different nav bars

252.jpg

Advertisement

Making money on internet is not a difficult task. Just buy domain name and the enough web space needed for a web site to come online. A striking as well as proper domain name with appropriate extension also increases the worth of the site. If the site is about banking or accounting than try directory submission in popular business directories. A higher ranked site along large number of visitors can also take part in affiliate marketing and make enough money through blog marketing as well.

Related Link: 642-812 Exam Questions That Prepare you for the CCNP Certification. 642-812 Test Exam Questions

del.icio.us:25 Code Snippets for Web Designers (Part2) digg:25 Code Snippets for Web Designers (Part2) spurl:25 Code Snippets for Web Designers (Part2) wists:25 Code Snippets for Web Designers (Part2) simpy:25 Code Snippets for Web Designers (Part2) newsvine:25 Code Snippets for Web Designers (Part2) blinklist:25 Code Snippets for Web Designers (Part2) furl:25 Code Snippets for Web Designers (Part2) reddit:25 Code Snippets for Web Designers (Part2) fark:25 Code Snippets for Web Designers (Part2) blogmarks:25 Code Snippets for Web Designers (Part2) Y!:25 Code Snippets for Web Designers (Part2) smarking:25 Code Snippets for Web Designers (Part2) magnolia:25 Code Snippets for Web Designers (Part2) segnalo:25 Code Snippets for Web Designers (Part2) gifttagging:25 Code Snippets for Web Designers (Part2)

94 Responses »

  1. Keith Dsouza on March 16th, 2007 at 5:51 pm:

    Cool part 2 rocks just like part 1

  2. » Top 10 Sites for Web Designers on March 16th, 2007 at 9:14 pm:

    [...] You might also be interested in our article on Killer Code Snippets for Web Designers [...]

  3. live television on March 17th, 2007 at 1:50 am:

    nice how abot some javascript ones though

  4. 25 Killer Code Snippets every Good Designer Should See « Tons of Fresh News on March 17th, 2007 at 2:33 am:

    [...] Killer Code Snippets every Good Designer Should See 25 Killer Code Snippets every Good Designer Should See Round up 25 of the Best CSS, scripts, html and widgets that you can use on on your website or blog [...]

  5. Rio on March 17th, 2007 at 2:58 am:

    Spectafantasticular. And then some.

  6. 50 Snippets de código para Diseñadores Web | Blog Vecindad Gráfica Diseño Gráfico on March 17th, 2007 at 3:32 am:

    [...] 25 Code Snippets for Web Designers (Part2) [...]

  7. Keith Donegan on March 17th, 2007 at 4:10 am:

    Yes now Javascript please

  8. 25 Killer Code Snippets every Good Designer should see « //burnz.blog on March 17th, 2007 at 9:18 am:

    [...] Source [...]

  9. 电子网 on March 17th, 2007 at 10:20 am:

    You might also be interested in our article on Killer Code Snippets for Web Designers

  10. Warclimb.com » Link Shuffle #14 on March 17th, 2007 at 10:23 am:

    [...] 25 Code Snippets: 25 trucos para el diseño web [...]

  11. R.Daneel on March 17th, 2007 at 10:36 am:

    Yes, another extra-useful list of snippets!
    Thanks a lot!!
    Let’s have some javascripts now! ;)

  12. 25 Killer Code Snippets every Good Designer Should See « News Coctail on March 17th, 2007 at 10:37 am:

    [...] Snippets every Good Designer Should See Filed under: Uncategorized — recar @ 10:37 am 25 Killer Code Snippets every Good Designer Should See Round up 25 of the Best CSS, scripts, html and widgets that you can use on on your website or blog [...]

  13. 25 code snippets for you - WickedFire - Internet Marketing Affiliate Webmaster Forum on March 17th, 2007 at 11:29 am:

    [...] social bookmarking site some days ago. (Don’t remember which) It is still useful, so here we go: » 25 Code Snippets for Web Designers (Part2) ::emp:: __________________ The blog: Blind Ape Seo ~~~~~~~~~~~~~~~~~~~~ Easy Domain Names | [...]

  14. Oli on March 17th, 2007 at 11:59 am:

    For the Javascript-wanters - check out our post on Ajax tutorials - loads there for you!

    http://tutorialblog.org/100-ajax-tutorials-and-resources/

  15. Mac on March 17th, 2007 at 1:39 pm:

    Good stuff… Thanks.

  16. 25 Killer Code Snippets every Good Designer Should See » Prateek on March 17th, 2007 at 3:37 pm:

    [...] read more | digg story [...]

  17. Too many topics, too little time. » » 25 Code Snippets for Web Designers (Part2) on March 17th, 2007 at 4:23 pm:

    [...] » 25 Code Snippets for Web Designers (Part2): 25 Code Snippets for Web Designers (Part2) [...]

  18. davidbisset.com » 25 Code Snippets for Web Designers on March 17th, 2007 at 5:07 pm:

    [...] This is the link to part 2, with part 1 linked in the article. [...]

  19. gleuch on March 17th, 2007 at 5:11 pm:

    sifr3 allows for multiple colors, as well as varying styles and sizes.

    http://novemberborn.net/sifr3

  20. jayoh on March 17th, 2007 at 6:58 pm:

    bravo!

  21. Michael Josh on March 17th, 2007 at 7:23 pm:

    Thank you very much for this list. It a definite must read for web designers and coders alike. Cheers.

  22. » 25 Code Snippets for Web Designers (Part2) » Kwotem on March 17th, 2007 at 8:19 pm:

    [...] http://tutorialblog.org/25-code-snippets-for-web-designers-part2/ [...]

  23. Fatih HayrioÄŸlu’nun not defteri » 18 Mart 2007 Web’den seçme haberler on March 17th, 2007 at 10:22 pm:

    [...] CSS ile hazırlanmış 25 güzel kodlama. Link [...]

  24. IndianGeek » Blog Archive » links for 2007-03-17 on March 17th, 2007 at 11:21 pm:

    [...] » 25 Code Snippets for Web Designers (Part2) (tags: ajax blog css design javascript tutorial programming html webdesign) [...]

  25. blog.teranetworks.de ~ geeks? » Linkdump for March 17th on March 18th, 2007 at 12:31 am:

    [...] 25 Code Snippets for Web Designers - handy pieces of html, ajax and css that you can incorporate into your web designsFiled under: css webdesign web2.0 webdev snippets for:hijacker [...]

  26. mcdave.net » links for 2007-03-18 on March 18th, 2007 at 6:22 am:

    [...] » 25 Code Snippets for Web Designers (Part2) Lleno de muchas cosas bonitas, como las supernenas (tags: css webdesign design tutorials) [...]

  27. links for 2007-03-18 at Webmercial.dk: wordpress, weblogs, new media, streaming, film+internet, social media m.m. on March 18th, 2007 at 11:20 am:

    [...] » 25 Code Snippets for Web Designers (Part2) (tags: webdesign tips guide) [...]

  28. zoel on March 18th, 2007 at 4:18 pm:

    thanx u, but how about css frameworks, code plz?

  29. Flavor 8 » Good CSS Tutorial on March 18th, 2007 at 5:13 pm:

    [...] 25 Code Snippets For Web Designers Related Comments Related [...]

  30. pristina.org | everything design » links for 2007-03-18 on March 18th, 2007 at 6:15 pm:

    [...] » 25 Code Snippets for Web Designers (Part2) 25 codigos uteis para webdesign (tags: Css webdesign design tutorials html snippets web code) [...]

  31. links for 2007-03-18 « toonz on March 18th, 2007 at 11:22 pm:

    [...] » 25 Code Snippets for Web Designers (Part2) (tags: css Design tutorials) [...]

  32. links for 2007-03-19 | Patrick Kempf on March 19th, 2007 at 12:23 am:

    [...] 25 Code Snippets for Web Designers (Part2) (tags: css WebDesign design tutorials snippets web html) [...]

  33. Japhy.at - Usability, Web 2.0 und das Leben in Wien » Archiv » del.icio.us Bookmarks vom 18.3.2007 on March 19th, 2007 at 12:33 am:

    [...] 25 Code Snippets for Web Designers (Part2) – Part 2 of our code snippets series takes a look at more handy pieces of html, ajax and css that you can incorporate into your web designs. [...]

  34. Recursos con CSS y Javascript | Pandibia on March 19th, 2007 at 4:16 am:

    [...] sobre las joyitas que se consiguen con CSS y JS, una recopiación de 25 recursos para usar en diseños Web. Marzo 18, 2007 miniblog, [...]

  35. 1983 » Blog Archive » 2007-03-19 Daily Catch on March 19th, 2007 at 5:15 pm:

    [...] 25 Code Snippets for Web Designers Part 2 Tutorialblog presents a few nice code goodies. [...]

  36. Neil Galloway on March 19th, 2007 at 7:51 pm:

    Awesome collection. I custom built my own blog site and have been tweaking a few things here and there. These collections are great when looking for things to improve.

  37. 25 Code Snippets for Web Designers » Kwotem on March 20th, 2007 at 6:23 pm:

    [...] http://tutorialblog.org/25-code-snippets-for-web-designers-part2/ [...]

  38. experimentlist.com » 25 code snippets for web designers (part2) on March 21st, 2007 at 8:48 am:

    [...] tutorialblog.org [...]

  39. Craig Vidler | Weblog » links for 2007-03-17 on March 23rd, 2007 at 12:44 am:

    [...] 25 Code Snippets for Web Designers (Part2) TutorialBlog’s roundup of common CSS/Javascript components, snippets and techniques (tags: css javascript) This entry was written by Craig and posted on March 17, 2007 at 6:18 pm and filed under Bookmarks. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2007-03-16 links for 2007-03-18 » [...]

  40. links for 2007-03-23 » mhinze.com on March 23rd, 2007 at 11:21 am:

    [...] » 25 Code Snippets for Web Designers (Part2) (tags: css webdesign) [...]

  41. Links for 2007-03-23 » Graham English's Integral Conversations on March 23rd, 2007 at 1:41 pm:

    [...] 25 Code Snippets for Web Designers (Part2) Handy pieces of html, ajax and css that you can incorporate into your web designs. (tags: advice AJAX blog design gallery guide hacks howto Javascript Links link list lists programming Reference resource resources scripting script tips tricks tutorial tutorials usability web2.0 Web webDesign webmaster website work snippets HTML CSS) [...]

  42. kost on March 23rd, 2007 at 2:40 pm:

    Thanks!

    Especially for CSS Navigation Techniques.

  43. PHP Devils » 25 Code Snippets for Web Designers on March 25th, 2007 at 12:10 pm:

    [...] Часть 1 Часть 2 [...]

  44. Recursos con CSS y Javascript — Vidablog on March 26th, 2007 at 6:49 am:

    [...] sobre las joyitas que se consiguen con CSS y JS, una recopiación de 25 recursos para usar en diseños Web. MiniEnlaces, [...]

  45. jawe.net » Blog Archiv » Links vom Mittwoch, 21. März 2007 on March 26th, 2007 at 12:05 pm:

    [...] 25 Code Snippets for Web Designers (Part2) Tags: dev web webdesign html css ajax javascript [...]

  46. Near-Mint Heroes » Archive » Lots of Links on March 26th, 2007 at 4:37 pm:

    [...] 25 Code Snipets for web designers. [...]

  47. CSS Help and Design Roundup ~ Web Developers on March 27th, 2007 at 2:43 am:

    [...] 25 Code Snippets for Web Designers [...]

  48. Near-Mint Heroes on March 27th, 2007 at 7:02 am:

    [...] 25 Code Snipets for web designers. [...]

  49. Free CSS Editors : lxpages.com blog on March 29th, 2007 at 6:49 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  50. Aprendiendo Hojas de Estilo (CSS) « on April 4th, 2007 at 9:44 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  51. tracce on April 10th, 2007 at 12:29 pm:

    Interesting comments.. :D

  52. Best of March 2007 | Smashing Magazine on April 11th, 2007 at 4:04 pm:

    [...] 25 Code Snippets for Web Designers An overview of useufl techniques and code snippets. There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series. 25 more code snippets can be found in the second part of the article. [...]

  53.   Some very useful links… by .: Jnbn :. on April 13th, 2007 at 11:21 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  54. links for 2007-04-16 | The Marketing Technology Blog on April 16th, 2007 at 6:22 pm:

    [...] 25 Code Snippets for Web Designers (Part2) 25 Code Snippets for Web Designers (Part2) (tags: css webdesign design tutorials snippets html javascript) [...]

  55. yoZi » 25 Killer Code Snippets every Good Designer Should See on April 17th, 2007 at 5:03 pm:

    [...] Best CSS, scripts, html and widgets that you can use on on your website or blog (Part 2) …..read more | digg [...]

  56. SachinKRaj - get something useful from web 25 AJAX Snippets « on April 18th, 2007 at 10:41 am:

    [...] AJAX Snippets April 18th, 2007 — sachinkraj After our code snippets for web designers series, I am presenting you with 25 Ajax tutorials and code [...]

  57. Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007 on April 18th, 2007 at 4:30 pm:

    [...] 25 Code Snippets for Web Designers An overview of useufl techniques and code snippets. There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series. 25 more code snippets can be found in the second part of the article. [...]

  58. Web设计者的25个CSS代码片段 on May 6th, 2007 at 4:09 am:

    [...] resources for web designers so get them bookmarked! If you missed them, also check out part one , part two and part [...]

  59. Aprendiendo Hojas de Estilo (CSS) « Disenia on May 6th, 2007 at 2:59 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  60. Bundesliga Blog on May 7th, 2007 at 6:16 pm:

    I often refer my friends to Listamatic whenever a navigation list has to be styled

  61.   The resourceful webdesigner’s toolkit. — BlogoSquare on May 11th, 2007 at 12:45 pm:

    [...] things that are free and you’re free to play with. Tutorial blog has thus gathered not 1,2,3 but 4 perhaps more in further series of handy scripts, bits of html and widgets that you can [...]

  62. ivaaip on May 13th, 2007 at 3:04 am:

    Hi My Name Is ivauqx.

  63. Andrew on May 19th, 2007 at 8:50 pm:

    Good web site!!! Thank you for your job!!! I will recommend you to all my friends… Visit my site and add your comments :)

  64. 25 Killer Code Snippets every Good Designer Should See « Shirley’s design on June 1st, 2007 at 2:34 pm:

    [...] read more | digg story [...]

  65. Irvine Ca Web Design on June 10th, 2007 at 3:35 am:

    I have seen snippets for web design part 1 but I didnt know part 2 was out already. Nice.

    Sarah

  66. 101 CSS Tips, Tutorials and Examples : lxpages.com blog on July 2nd, 2007 at 12:29 am:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  67. Open Source Web Design » Blog Archive » 101 CSS Tips, Tutorials and Examples on July 3rd, 2007 at 1:18 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  68. Jack Nicholson on July 4th, 2007 at 12:00 pm:

    You can check out this web site and can get an idea how the CSS has been scripted…

  69. Bleebot | Christophe Lefevre » 101 astuces CSS, tutos et examples on July 10th, 2007 at 8:08 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  70. All in a days work… on July 22nd, 2007 at 8:59 pm:

    [...] 25 Code Snippets for Web Designers (Part2) [...]

  71. 101 css tips and tutorials on July 25th, 2007 at 6:11 pm:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  72. Jakob on July 31st, 2007 at 8:10 am:

    This is exactly what I expected to find out after reading the title o.us poetry. Thanks for informative article

  73. Jessie on August 5th, 2007 at 11:06 pm:

    Jessie

    Will you post on my comments too? Trying to make my site look popular lol :)

  74. suzie on August 18th, 2007 at 4:12 am:

    nice collection again, thanks…

  75. Kiwihaus - Matias Etchevane - » links for 2007-03-17 on September 5th, 2007 at 9:06 pm:

    [...] 25 Code Snippets for Web Designers CSS HTML - 25 code snippets para web (tags: CSS html) [...]

  76. shaz on September 22nd, 2007 at 11:37 am:

    These are really easy to use

  77. Rencontre asiatique on September 26th, 2007 at 6:27 am:

    I read part1 and now part2, it is a good tutorial.

  78. cam balkon on October 2nd, 2007 at 10:00 pm:

    very nice thanx

  79. sohbet on October 9th, 2007 at 2:26 am:

    nice collection again,thanks :)

  80. chat on October 9th, 2007 at 2:27 am:

    gooodd veri veri :))))))

  81. hikaye on October 16th, 2007 at 6:06 pm:

    erotich hikaye

  82. sohbet on October 19th, 2007 at 1:36 am:

    thanks a lot..

  83. Sohbet on October 27th, 2007 at 5:42 pm:

    thanx for all nice

  84. ogretmenler sitesi on October 28th, 2007 at 4:56 pm:

    thanks for you

    Ögretmenler Sitesi

  85. Sohbet on October 29th, 2007 at 9:54 am:

    I have seen snippets for web design part 1 but I didnt know part 2 was out already. Nice.

    Sohbet

  86. Design Pilez » Blog Archive » 25 Killer Code Snippets every Good Designer Should See on October 29th, 2007 at 10:49 am:

    [...] read more | digg story [...]

  87. Porno on November 22nd, 2007 at 1:05 am:

    thans your for all nice

  88. bumm top searches » Blog Archive » 25 Killer Code Snippets every Good Designer Should See on November 24th, 2007 at 5:20 am:

    [...] Best CSS, scripts, html and widgets that you can use on on your website or blog (Part 2) …..read more | digg story Similar posts: google [...]

  89. Links for 2007-03-23 by Graham English on December 9th, 2007 at 5:37 pm:

    [...] 25 Code Snippets for Web Designers (Part2) Handy pieces of html, ajax and css that you can incorporate into your web designs. (tags: advice AJAX blog design gallery guide hacks howto Javascript Links link list lists programming Reference resource resources scripting script tips tricks tutorial tutorials usability web2.0 Web webDesign webmaster website work snippets HTML CSS) [...]

  90. Leo.锦州 - 周亮的博客 » Blog Archive » 101 个经典CSS技巧和实例 on December 12th, 2007 at 3:46 am:

    [...] 25 Killer Code Snippets every Good Designer Should See [...]

  91. Gadget on December 15th, 2007 at 8:25 am:

    25 killer good thanks

  92. sohbet on April 2nd, 2008 at 10:33 pm:

    thanks i will use them.

  93. Links « Blogging by Sandee on April 8th, 2008 at 6:56 pm:

    [...] Square Corners with CSS 25 Killer Code Snippets every Good Designer Should See Tableless forms A Cool CSS Effect to Dim the Screen (Dashboard Style) Top 10 CSS image gallery [...]

  94. Darren Rowse on April 11th, 2008 at 6:38 am:

    I’ve tried to think it over and I guess this is just a rumor. I hate rumors that ruin private life so advise you not to believe it and leave your comments by yourself.

Ad-Links

Logo Maid
PSD to HTML

Translate