Category: Tutorials

You learn something everyday if you pay attention

Building a Circular Navigation with CSS Transforms

VIEW DEMO DOWNLOAD SOURCE In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I… Continue reading Building a Circular Navigation with CSS Transforms

Create an Awesome Single-Page Website

Not every website needs to be complex or include multiple pages of content and information. Sometimes one page is enough. But just because you are creating a website with only one page, does not mean that it will be easy. Developing a single-page layout can require just as much thought and planning as some more complex… Continue reading Create an Awesome Single-Page Website

Add Depth to Flat UI with Flat Shadow.js

A while ago, I stumbled upon a post called Flat design casts a long shadow by the fine folks at Web Designer Depot and I was amazed by how adding a simple shadow could create such a beautiful depth of design to the flat UI elements. What if we bring this effect to the web? Today, let… Continue reading Add Depth to Flat UI with Flat Shadow.js

Useful Hacks to Make WordPress Work Better

If you came here looking for ways to break into someone’s WordPress site, you choose the wrong definition of the word hack. No, this article is all about ways to make WordPress work better for you and your visitors by getting your hands dirty with WordPress’ actual code, you know the functions.php files, .htaccess and… Continue reading Useful Hacks to Make WordPress Work Better

CSS3 Menu Tutorial : Cool Bouncing Effects

In this tutorial I will show you how to create CSS3 menu with bouncing effect. In thisCSS3 menu tutorial we will use keyframes to apply bouncing effect on menu. With thekeyframes rule, you can create animation. During animation you can change the style as much as you want. As you know how important is menu navigation on… Continue reading CSS3 Menu Tutorial : Cool Bouncing Effects

How To Design a Responsive Site Correctly

Businesses must decide whether to build a native mobile apps or a responsive site for their digital presences. Should you invest in separate iOS and Android development or simply design a site that works across all devices? If you opt to build out a responsive site, here are some best practices to make your design seamless on… Continue reading How To Design a Responsive Site Correctly

CSS 3D Image Flip Gallery With Dynamic Shadows

My recent book Pro CSS3 Animation walked the reader through a simple version of a 3D flip image gallery. After publication, I wanted to take it further: thus, this article. The UI challenge addressed here is the same focused on in many of my other CSS 3Dworks, such as the Origami UI: we live in a world of increasingly diversified… Continue reading CSS 3D Image Flip Gallery With Dynamic Shadows

How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a… Continue reading How To Create a Set of Vector Weather Line Icons

Tutorial: How To Build Input Fields with Tag-Style Item Blocks

Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself. For this tutorial I want… Continue reading Tutorial: How To Build Input Fields with Tag-Style Item Blocks

Icon mouse hover effect using CSS3

This tutorial will show how simple it is to achieve simple animation mouse hover using CSS3. We use transitions and animations css properties to achieve some of the interactive animation. 1. Simple image popup effect using pure CSS3 *{margin:0;padding:0;} body{margin-top:80px;font-size:12px;font-family:arial,sans-serif;color:#9C9C91;background:#fff;} a {color:#333;text-decoration: none;} a:hover {color:#f00;} .wrap {width:720px;background:#f2f2f2;margin:0 auto;} ul.works {list-style:none;margin:0;padding:0;} ul.works li {float:left;display: inline;margin:0 20px… Continue reading Icon mouse hover effect using CSS3

How To Build a Range Slider Input with jQuery UI

Looking at the HTML5 range input element you can see a number of advancements. Forms are able to take in restricted information from users sliding between number segments. But unfortunately these HTML5 inputs are only supported in modern browsers. So although there are a few limitations we can try to work around them. I want… Continue reading How To Build a Range Slider Input with jQuery UI

Hash Passwords With PHP 5.5

Almost every PHP developer would have to build an application that relies on a user login. This will involve the user of the website having a Username and Password which is stored in the database so they can login into your website. As passwords are stored in the database it is important that you hash these… Continue reading Hash Passwords With PHP 5.5

Applying Categories, Tags and Custom Taxonomies to Media Attachments

Have you ever been frustrated by the fact that WordPress doesn’t let you assign categories or tags to your images or uploaded media?  Imagine how useful it could be: you could create dynamic galleries of images from specific places or of specific types (landscapes, abstracts etc.), or you could create listings pages for sites with… Continue reading Applying Categories, Tags and Custom Taxonomies to Media Attachments

25 Best Photoshop Video Tutorials

Photoshop’s all about the visuals, so it’s no surprise that it makes for some good videos. You can see step-by-step how buttons, collages or even paintings are created. Instead of reading through books describing what needs to be selected, activated and clicked, you can simply imitate mouse clicks knowing exactly that you are actually doing… Continue reading 25 Best Photoshop Video Tutorials

33 Best Free Html5 Responsive Templates

HTML5 is the latest edition of standard HTML that has brought a revolution in web designing industry. The popularity of HTML5 is because it supports many new features like multimedia elements (like video, audio & canvas elements), the latest type of form controls, new attributes and global attributes, flexibility to use inline SVG and Math ML,… Continue reading 33 Best Free Html5 Responsive Templates

Working with Types: Typography Tutorial for Beginners

In this typography design tutorial, I will guide you on how to transform boring texts to your advantage. You will learn how to utilize typography for your website, or even for your print needs. This article will extend from web page design, to printing to graphic images. They say letters are boring. Unlike videos and… Continue reading Working with Types: Typography Tutorial for Beginners

Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

In this tutorial, I’m going to show you how to create portfolio page with filtering and also hover effect for each of your project item. We will be using a CSS3 and jQuery filter & sort plugin called MixItUp. This script should work pretty well with our previously published tutorial – display images with shape masking and… Continue reading Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

Making a Super Simple Registration System With PHP and MySQL

Writing a registration system is a lot of work. You have to write code that validates email addresses, sends confirmation emails, provides forgotten password functionality, stores passwords securely, validates input forms and a lot more. Even when you do all of this, users will still be reluctant to register as it involves a lot of… Continue reading Making a Super Simple Registration System With PHP and MySQL

What’s New With Adobe Illustrator CC: Image Brushes

Final Product What You’ll Be Creating In Adobe Illustrator CC now you can create brushes from raster images. This cool new feature allows you to set up Art, Pattern and Scatter brushes in a completely new way. You can learn everything you need to know about these options from this tutorial.  

12 Free Photoshop Actions to Enhance Digital Photos

Photoshop is a tool without which modern day designing cannot survive. Moreover, Photoshop tasks are becoming more and more used and they compile to create one big bag of tricks. One of these tasks is Photoshop Actions; intended to enhance the impact of digital images. There are various Photoshop Actions available. Each has its own… Continue reading 12 Free Photoshop Actions to Enhance Digital Photos

10 Simple and Effective CSS Tricks for Web Designers

CSS is one of the important powers for web developing. You should have known lot of CSS tricks and tips which is simple but effective. Sometime a simple code makes a sweet impact in design. In this post you can learn 10 Simple and Effective CSS Tricks to implement in design. I supposed to post… Continue reading 10 Simple and Effective CSS Tricks for Web Designers