Today’s web design resource is a beautiful green contact form template that you can use in the contact page of your next website. I was working on this template lately and I was also planning to make a Photoshop tutorial and code it in HTML and CSS. But then I thought it would be a good idea to share with you the PSD first and see what you think. So, download it and stay tuned for the tutorial. Enjoy!
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!
Today I’ll continue the mini icons series with another icons set. This time it’s a Media Icons Set containing 28 icons. As always it comes in PSD version so you can customize the colors, effects and size as you like. All the icons are shapes and can be resized without losing quality. You can download this icons set from the link below. Enjoy!
While I was preparing the second part of the “under construction” page tutorial I came up with the idea of launching an icons series and since I like very much mini icons, this first series will be a mini icons series. Every icons set of the series will contain icons of the same theme for example: internet, media, business, etc.
So, today the first set of the series is an Arrow Icons Set containing 24 icons. It comes in PSD version so you can change the colors and effects as you like and use the icons in your websites and applications. All the icons are shapes and can be resized without losing quality. You can download this icons set from the link below. Enjoy!
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.