In a recent redesign of my own personal blog I decided to use a calendar style icon to display the post date . It’s one of those elements that would once have been created with background images, but now thanks to the wealth of CSS3 features it can be created entirely in CSS3. We’ll be using properties such as linear-gradients, border radius and box shadow to replicate the icon’s original Photoshop design.
Continue this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this second and final part of the series we’ll go through the process of building the Photoshop concept into a working HTML/CSS web page then add the jQuery plugins to pull in our Dribbble portfolio shots.
Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.
If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.
Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the
@font-face CSS property to transform the digital text into handwriting.
If you post helpful information on your blog chances are some of your early posts are now outdated as technologies have changed over the years. Let’s take a look at how we can add a mix of PHP tags to our WordPress themes to automatically add a small disclaimer or warning message to posts over X years old.