WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

CSS List Expander

CSS List Expander

This technique makes an unordered list go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects. Parent items, the ones we should click to expand child objects, don’t need to be wrapped inside an anchor element. Script checks for child objects and adds appropriate clickable elements. Furthermore the script adds two buttons above the list, one for expanding and one for collapsing all the elements.

Folded Corner using CSS

Folded Corner using CSS

There are many techniques on the web for adding folded corners to DIV containers. This one does so by using relative positioning to slightly offset a DIV to the right and bottom, so its a background image, which is a curly image, falls inline with the border of the outer DIV.

Perfect Fluid CSS Layout

Perfect Fluid CSS Layout

The perfect fluid width layout works on all major browsers. The layout can shrink to 780px which accommodates 800×600 resolution and also grows to 1260px for 1280×768 resolutions.

CSS Image Maps

CSS Image Maps

This works by placing the title of the item hotspot into the definition-term tags of your list, followed by the description in the definition-description tags. The CSS then hides the definition-term (which is really used for when CSS is disabled), as well as the definition-description (displayed upon hover of the anchor) and displays the definition description (in this case, the description of the hotspot(s) you’ve chosen for your imagemap), and absolutely positions and displays the description upon rolling over the hotspot (also defined in the CSS).

CSS Style Sheet Switcher

CSS Style Switcher

Using CSS and Javascript, you can use alternate style sheets which can change the look and feel of your website at a single click. View source to see the code.

Visual Site Map using CSS

Visual Sitemap

StyleMap uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an embedded definition list. The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.

CSS Speech Bubbles

CSS Speech Bubbles

Works nicely for blog comment styling. Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.

CSS Pricing Matrix

CSS Pricing Matrix

A matrix table using CSS where clicking on a cell should highlight the associated cell in the top row and left most column. This helps in establishing relationships among the information provided in the table quickly.

CSS Candy Menu

CSS Candy Menu

Candy Menu is a stylish CSS drop down menu that’s comes in six provocative color schemes – Caramel Cream, Blueberry Blast, Black Licorice, Green Apple, Grape Sensation and Raspberry Punch. You can also use it in your WordPress themes if you have the necessary expertise in theme modification.

CSS Image Highlighting with Opacity

CSS Opacity Mouseover Highlighting

This example changes the opacity of any image link when the mouse moves over it using the “hover:” pseudo class of CSS. Note the two different properties used to specify opacity in CSS below. In IE 5.5+, the “filter” property is used (range: 0-100), and in Mozilla/NS6+, “-moz-opacity” (range: 0-1). Both properties are proprietary, and not formally endorsed by the W3C.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. Tina Wang left a comment on March 24, 2016 at 2:27 am |

    Dalian Huagong Innovation Technology Co., Ltd. is a new high-tech enterprise devoting to innovation and research and development established in 2003 with business covering many countries all over the world. It concentrates on industry, automobile, electric, consumption, energy and construction fields. The company was listed on NEEQ in Jan. 2014. It is one of enterprises listed in the first batch after expansion of NEEQ. Stock Code: 430615. Stock Abbreviation: Huagong Innovation. Sealing system, thermal insulation glue injection system and door & window system of the Huagong Innovation HGIT Brand provide innovative and beneficial solutions for clients, thus improve their product quality. In the meanwhile, the company customizes energy-saving, environment protective, beneficiating and cost-effective system automation lines aiming at customers’ requirements and serves customers all over the world with professional technology.
    The company values combination of production, teaching and researching. It not only has scientific research and development projects aiming at future development with domestic first-class schools, but also has close strategic cooperation relation with many international transnational corporations.
    As a strategic partner of the Dow Chemical – a world 500 top in polyurethane thermal insulation project, the company and HANs Chemical (Dalian) Co., Ltd. – a wholly-owned subsidiary of the company jointly provide systemic solutions for building heat preservation and energy saving.
    The Huagong Innovation will persistently provide comprehensive support for customers with innovative technology, excellent solution and superior service.
    http://www.hgcx.cn/en

  2. http://www.theuscoachoutlet.com left a comment on October 9, 2012 at 3:18 am |

    Furthermore the script adds two buttons above the list,

  3. Mark left a comment on March 26, 2012 at 2:38 pm |

    I have been making the same types of elements in JavaScript. I’m in the works of figuring out how to replicate them using CSS, everyone is doing it… Thanks for the great resource.

  4. the facebook guy left a comment on May 19, 2011 at 9:47 am |

    Greetings I am so glad I found your web site, I really found you by mistake, while I was searching on Bing for something else, Anyways I am here now and would just like to say kudos for a tremendous post and a all round exciting blog (I also love the theme/design), I don’t have time to go through it all at the moment but I have saved it and also added your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb work.

  5. optimized website design left a comment on September 23, 2010 at 11:55 am |

    These are some great blogging solutions. CSS Speech Bubbles are a nice touch. That would be nice to add that to my blog.

  6. Link Building left a comment on June 2, 2010 at 5:13 am |

    Good job, really nice site, keep continue, I would really prefer Mixx for others.

  7. oes tsetnoc left a comment on November 22, 2009 at 10:58 am |

    nice and cool list. tx

  8. nur left a comment on September 5, 2009 at 1:09 am |

    cool. Nice, impressive and useful list.

  9. ksall left a comment on May 11, 2009 at 1:52 pm |

    Um. Almost all these are javascript techniques that manipulate

  10. Chen left a comment on April 13, 2009 at 7:34 am |

    Still hard to learn…
    I wondering if ever photoshop or illustrator are able to export a fully functioning CSS file + xml file… that will awesome…

  11. oldvovk left a comment on March 21, 2009 at 2:41 pm |

    Really helpful post! Have interested 7 and 8. I use in new blog. At the same time, if not object, I shall publish translation of clause.

  12. PS3 left a comment on March 18, 2009 at 8:40 pm |

    Really interesting and helpful post.

    Gonna try it out, later today.

    Thanks for sharing.

  13. Cathy left a comment on March 10, 2009 at 10:55 am |

    Really helpful post! Thank you.

  14. adit left a comment on March 5, 2009 at 9:06 pm |

    nice info.. thx bro

  15. Rob left a comment on March 2, 2009 at 7:10 am |

    Um. Almost all these are javascript techniques that manipulate the DOM and CSS, not how to play it cool with CSS.

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project