I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pretty decent looking retro style image effect using just CSS. With the help of CSS gradients and filters, let’s take a look at how a cool vintage photo effect can be created directly in the browser.
Create a Cool Website with Fancy Scrolling Effects
I’m sure we’re all familiar with the popular parallax effect in web design. It has become a great tool to create a fun browsing experience that responds to the user’s controls as they scroll up and down the page. In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.
Create a Custom WordPress Login Without Plugins
WordPress Logins are probably one of the least touched–upon subjects as far as WordPress theme design is concerned, but it can really help create a unique look and feel for a client’s website, or even your own! Here’s how to easily make a login of your own without the need of a plugin.
Top Places to Find Free Photoshop UI Kits Online
Ready made Photoshop UI kits are useful resources for web designers to quickly put together website or application interface designs with buttons, menus and input fields. There’s plenty of high quality free UI kits available across the web, but it’s sometimes difficult to know where to look. This post rounds up the best websites to find great quality UI sets, with a selection of samples from each.
How To Create a Pure CSS Dropdown Menu
With the help of some advanced selectors, a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step-by-step process of building your own pure CSS dropdown menu.
30 Free Icon Packs from the Dribbble Community
Dribbble is not only a great website to find insights into what fellow designers are working on, it’s also home to an array of freebies available for download from generous Dribbble users. This post rounds up 30 high-quality icon sets that can be downloaded and used in your own projects for free.
10 CSS Rules Every Web Designer Should Know
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.
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.
