JSFiddle

  • Styling https and http links differently

    As above

    <p>
    A paragraph of text with a <a href="https://renaissance-design.net">https link</a> and a <a href="http://renaissance-design.net">http link</a>. 
    </p>
  • Fixing poor colour choices

    Sometimes brand guidelines can be hard on the eyeball, and you don't have the clout to rewrite them.

    <div class="demo">
    <h3>This div is a pain in the dick to read, because it has horrible contrast</h3>
    <p>Sometimes you may be forced ...</p></div>
  • Art Deco borders

    A quick demo of some Deco borders thrown together with a couple of pseudo-elements

    <div class="deco">
      <h2>Art Deco borders with pseudo-elements</h2>
      <p>
        The only requirement is that the .deco element has non-static position, so the pseudo-elements can ...</p></div>
  • Wrap around headings #4 is the latest revision

    Trying to do it in a single element

    
    
  • Anchor as button

    Where a button element doesn't belong (outside of a form, for example), an anchor can be used with the same visual styles. Indistinguishable to the user from a button, but semantic markup.

    $('.button').click(function(){
        $('#result').toggleClass('active');
        preventDefault(); 
    });
  • Demo of simple tabs without jQuery UI #13 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript

    $(function() {
    	$(".tabs-menu a").click(function(event) {
    		var tab = $(this).attr("href");
            $(this).parent().addClass("current").siblings().removeClass("current");
    		$(".tab-content").not ...
  • CSS3 navigation demo

    A demo navbar built with CSS3, no images. Falls back to flat colours for older browsers.