Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal.
Year: 2012
How To Create a Featured Post Layout in WordPress
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 customizing 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 post snippets was used to create a custom featured post layout in WordPress.
How To Create a Cool Blog Post Date Icon with CSS
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.
Create a Responsive Web Design with Media Queries
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.
20 Free Sans-Serif Fonts Licensed for @Font-Face
Remember back when @font-face and Google Fonts were first introduced? We only had the choice of a handful of custom fonts we could use. Nowadays it’s quite the opposite, we’re spoilt for choice with hundreds of cool fonts licensed for free @font-face embedding. This post rounds up a collection of 20 stylish sans-serif fonts, all of which can be downloaded and used freely to spice up your website design’s typography.
How To Build a Handwritten Letter Style Contact Form
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.
30 Free UI Kits Featuring Detailed Web Elements
When working under time constraints or on a tight budget crafting every single UI element by hand in Photoshop just isn’t economical. Thankfully there’s a range of ready-made web elements available in UI kits that can be quickly copied over to your own website or web app design projects. This post rounds up a collection of 30 detailed user interface Photoshop kits that can all be downloaded absolutely free!
How To Create a Vibrant Cloud Icon in Photoshop
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.
