Earlier this week I launched a redesign of my personal blog over at ChrisSpooner.com. The new design showcases a featured post in the header, before listing out the rest of the archives in a standard layout. It took a fair bit of customising to get everything working as I wanted, so I thought I’d share the process to hopefully help others out. Follow this overview post to see how a mix of query posts snippets were used to create a custom featured post layout in WordPress.
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.
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.
Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.