CSS3 3D Download Button + PSD

CSS3 3D Download Button

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.

Read more

Rounded Transparent Notifications with CSS3 and jQuery

CSS3 Rounded Transparent Notifications

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.

VIEW DEMO

Let’s begin!

Read more

Create a Bold “Under Construction” Page, Part 2: HTML5, CSS3, jQuery

Under Construction - Page

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:

VIEW DEMO

So, let’s begin!

Read more

Mini Icons Series: #2 Media Icons Set

Mini Icons Series: #2 Media Icons Set

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!

Read more

Mini Icons Series: #1 Arrow Icons Set

Mini Icons Series: #1 Arrow Icons Set

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!

Read more

Create a Bold “Under Construction” Page, Part 1: Photoshop

Under Construction Page

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.

Read more

Bold Input Field, PSD

Bold Input Field

This is a bold input field that you can use in your next website. I was designing a new HTML template these last days (probably I’ll write a tutorial about it and I’ll publish it here soon) and this input field is part of the template. It comes in PSD version so you can customize it as you like and use it as a search field or as a newsletter subscription form.

Read more