Introduction ... Static headers with boring backgrounds are everywhere... why don't you try and spice yours up with a simple CSS animation? I'd like you to meet Bob, he's my friendly static image and he'd really like to wave hello to you! Let's give him the chance. First up we'll need to do a quick operation and temporarily remove his arm (Sorry Bob!) Then we're going to rotate his arm (very gently) by 45 degrees. Now we can start re-assemble him using some simple HTML <div class="logo"> <div class="arm"></div>...
Introduction ... I’m going to tell you a story, its about love, death and re-birth... Or something In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers...
I quite like the developer drive logo animation. I remember seeing it a when I first found the site and thought it was simple, yet effective. I also wondered if it would be possible to replicate it using just CSS. In this snippet we'll cover CSS3 transitions and using @font-face to import some custom fonts. The first thing we need to do is import out fonts, I wasn't sure what the current 'd' font is so I have a similar font. The best place to go is www.fontsquirrel.com, you can pick from a wide selection of fonts...
Introduction ... In a previous tutorial, we created an abstract class for basic SCRUD database operations. Today we're going to build on that to create a generic database abstraction layer (DAL). The aim of this is to allow you to connect to any database type without having to worry about changing your Data Layer classes. We're also going to be introducing 2 of the most common design patterns. Factory Singleton First download the previous tutorial source code from here. We'll be creating 2 new classes...
Introduction ... Building on my previous tutorial, I thought it would an idea to show how to apply what we learned to the most basic of website features, the menu! I would strongly suggest reading my previous tutorial as we'll be jumping in at the deep end here. Once again, no JavaScript was used in the making of this tutorial! Every website has a menu, and there are lots of different styles that you can use. One style that is quiet popular in web applications and mini-sites is the accordion menu. The accordion...
Introduction ... SCRUD is short for Select, Create, Read, Update and Delete. These are the general actions that any program will perform when working with databases. Yes, there are plenty of ORM applications ( http://en.wikipedia.org/wiki/Object-relational_mapping ) out there that can replace this, but as a general introduction to abstract or generic classes and general development I still think this is worth a read. I should also explain why I have used an abstract class instead of an interface....
HTML5 introduced two new elements with seemingly identical roles ... <nav> ( http://www.w3.org/TR/html-markup/nav.html ) <menu> (http://www.w3.org/TR/html5/interactive-elements.html#the-menu-element ) Their use is actually quite different and you're unlikely to see both used at the same time. The <nav> element is actually for grouping <a> elements for navigating a website, and the <menu> element is for grouping both <a>, <input>, <button>...
In this tutorial we'll be dealing with some basic HTML5 additions and their uses. We'll also be creating a simple animated gallery using just CSS3 and HTML5 In making the gallery, we'll also try and deal with responsiveness and scaling the gallery for different resolutions and devices. Throughout this tutorial JavaScript will not be used! Step 1: Understanding the HTML5 additions ... http://www.w3.org/TR/html51/ There are lots of new tags in HTML5; today we'll be dealing with the some of the most...