Category: Tutorials

All PostsTutorialsWeb Design

How To Customize Your CSS Buttons With Pictogram Icons

Looking back 5 or 10 years ago the process of designing website buttons was very tedious. CSS could handle a lot of the outer edges, but gradient backgrounds and icons required static images. And these newer design trends are still at the cusp of innovation. This means you will find plenty of modern websites still using images in place of CSS3 effects.

I want to focus this tutorial on the power of CSS3 icon fonts for designing user interfaces. We will be creating some generic CSS3 buttons with added icons for design aesthetics. However the icons will not be loaded from static images or sprite sheets. Instead we will be using the Entypo icons font for generating pictograms inside your website layout.

Read More
HTML5 pre Code Syntax Highlighting with JavaScript
All PostsTutorials

HTML5 Pre/Code Syntax Highlighting with JavaScript

Performing a quick search in Google will yield a number of helpful JavaScript libraries for styling source code. Blogs and websites focused on frontend and backend development will frequently need to publish articles which use direct source code in the page. Basic monospaced fonts are not always enough, and with dynamic syntax highlighting it is…

Read More
How To Create Unique jQuery-Based Tooltips
jQueryTutorials

How To Create Unique jQuery-Based Tooltips

Tooltip libraries are fairly common amongst the open source community. A quick Google search will net you a series of results which you could apply into any typical project. However it can be difficult figuring out some of the various options for customization. Or even the decision for which library to use can be a…

Read More
A Guide To Retina Graphics Your WordPress Theme
All PostsTutorialsWordPress

A Guide To Retina Graphics For Your WordPress Theme

With the release of the retina screen by Apple it would seem the future is a very high resolution one, with more and more users slowly using a retina or high resolution device to browse the web on it would seem the retina device is the future. With this in mind, its pretty important to understand how to create retina graphics and how to implement them on your WordPress site.

In this article I am focusing on the use of retina graphics within your WordPress website.

Read More
All PostsTutorials

Dynamic Newsletter Signup Form with jQuery Animations

Landing pages are some of the toughest website layouts to put together. You need to converge with a series of different techniques for attracting your visitor’s attention and getting them interested enough to perform some action. In this tutorial we will create a simple newsletter signup page which is advertising a new iOS application.

The dynamic form effects will be handled in jQuery with some additional CSS3 properties as well. I haven’t connected any backend script into the form. But there are methods for situating a full registration form, such as MailChimp or even your own custom storage. This layout is a fantastic example of what can be accomplished using just a little bit of HTML5/CSS3 and JavaScript techniques.

Read More