Ring a Bell with CSS Keyframe Animations
April 26th, 2011 — 16 Comments
Time to have some more fun with a CSS animation as I’m going to show you how to realistically animate a ringing bell. Following on from the 3D lightbox animation tutorial I thought it would be good to get into a little more detail on how to create a realistic animation.
Create a CSS3 Image Gallery with a 3D Lightbox Animation
April 19th, 2011 — 14 Comments
For the most part, the CSS3 tutorials and examples out there are a little dull. Of course there are some really great examples out there such as Benjamin de Cock’s CSS Playground but most others consist of a drop-shadow here and a few rounded corners there and nothing more. It’s time to start doing something more inspirational and useful at the same time.
Create a Slick CSS3 Button with box-shadow and rgba
January 20th, 2011 — 9 Comments
When redesigning my new site, I experimented with creating a realistic behaving button with CSS3. You can see it in action on the contact page. It was created mainly with the use of different box-shadow values for the static state and the active state to mimic the real behaviour of a typical button.
Spin those Icons with CSS3
January 10th, 2011 — 50 Comments
On my new portfolio site, I included a neat effect which spins the social icons with the help of a CSS transform and transition when you hover over them. Nothing amazing but definitely a nice enhancement. I used Komodo Media’s excellent social network icon pack (along with a couple I created myself) which look fantastic. Let’s see how it’s done.
Read more...Simulate Realism with CSS3
February 16th, 2010 — 43 Comments
CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so.
However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before. Here are a few examples of how CSS3 can improve the web.
Read more...Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
January 25th, 2010 — 97 Comments
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.
This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?
View Demo | Download Files (.zip)
How to Create a Theme Development Environment for a Live WordPress Site
January 11th, 2010 — 72 Comments
Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using WordPress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.
With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress. We’ll do this by creating a bar at the top of the page which will clearly show you if you’re viewing the live theme (what everyone else sees) or the development theme with a link to switch between the two.
While there may well be a Worpdress plugin that does everything below, it’s much more rewarding and satisfying to create your own solution.
Read more...