In this article we’re going through the process of creating a 3D download button using CSS3. This button can be used in your websites, for example, when you want to share some resource with your visitors. At the end of this tutorial you can also download the PSD file so you can play with the colors or modify the button.
In this quick tutorial we’re going to create some rounded transparent notifications using CSS3 and jQuery. The design of these notifications comes from Victor Erixon, a Swedish designer that created them for premiumpixels.com. This design was originally intended to be used as a Growl notification style and today we’re going to make a CSS3 version of it. This way we can improve our CSS3 skills while coding a detailed PSD design with CSS3.
We’ll use CSS3 only for creating the notifications except for the two icons, the cloud and the shopping cart, that will be PNG images. Then we’ll add some jQuery for making the notifications appear when we click on the menu buttons.
Let’s begin!
This is the second part of the Under Construction page tutorial. Today we’re going to code the page in HTML5, CSS3 and we’ll add some animations with jQuery. We’ll also use the 960 Grid System for coding a small part of the page. If you have missed the first part of this tutorial, you can find it here:
Create a Bold “Under Construction” Page, Part 1: Photoshop
You can view a live demo of the page here:
So, let’s begin!
Creating an “under construction” page is very important when you’re launching a new website or product, or when you’re redesigning an established website. This way you can inform the users of the remaining time to the website’s launch and you can even start to collect their emails for notifying them when the site is ready. A well designed “under construction” page can catch the attention and can make your website or product look more professional in the users’ eyes.
So, today I’m going to show you step by step how to design an “under construction” (or coming soon) page in Photoshop. You can download the PSD file at the end of this tutorial. In the second part of the tutorial I’m also going to code this page in HTML/CSS/jQuery.
In this tutorial I’m going to show you how to create a clean Web 2.0 login form. This is the first part of the tutorial and I will show you step by step how to design the login form in Photoshop. You can download the PSD file at the end of this article.
With Christmas at the door all people are happy and have already begun to think about gifts for their closest relatives and friends. There’s a great atmosphere in the air here in Turin with the streets full of happy people and I’m happy too. So, for today I’ll present to you an amazing collection of 10 free Christmas Photoshop tutorials. Here they are: