Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.
In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.
In this tutorial I want to demonstrate how to build a simple Instagram-style filter webapp using jQuery. The library is called CamanJS which is easily extendable to create your own filter plugins. This doesn’t require jQuery but I’ve chosen to use it for a simpler development environment. Take a look at my live sample demo to understand the goal of this tutorial.
There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.
In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!
The use of online portfolios has become a popular choice by many digital artists. The goal would be showcasing yourself and your skills to anyone curious, maybe hiring companies or potential clients. Another simpler way to accomplish this task is to create your own digital vCard page. It’s usually a single page containing a brief resume, your work experience, and some interesting tidbits about yourself.
In this tutorial I want to demonstrate how to build a simple tabbed webpage layout in the style of a simplistic portfolio. We can incorporate jQuery fade effects to switch between the tabs, sticking to a formal responsive design. Take a peek at my live sample demo to see what the final product looks like.
If you’ve ever signed up for an email subscription you should know about MailChimp. It’s a company which helps webmasters and marketers deliver newsletters and other similar campaigns. They provide some HTML templates to use for signup forms and confirmation pages, but these are so generic that most subscribers are bored of this same interface.
I’d like to demonstrate how to customize the MailChimp signup form into something more unique. Everything is based off the original MailChimp HTML/CSS code and the form submission will use Ajax. It sounds complicated but the whole process is simpler than you might expect. Take a look at my sample demo to get an idea of the full tutorial.
Many portfolio websites include a list of previous clients to build trust from other potential customers. Reading what other people have said about a service or product is one way to garner support from visitors who have never heard about your company before. (Of course, this design technique only works if you have previous clients to draw from!)
In this tutorial I want to demonstrate two distinct styles of rotating carousels. The first is a testimonial box which includes a small quote talking about the services. Then I’ve constructed a long horizontal carousel that rotates through a list of company logos. These would normally be companies you have done business with – but may also include corporate partners or resources.
This design technique is commonly found on personal portfolios or design studio websites. Skill bars represent a level of knowledge related to certain tasks – web design, illustration, branding, character design, you name it! Adding some fancy animations to these skill bars will provide a quicker connection to the viewer.
There’s a recurring trend of using animated page elements in web design at the moment — as you scroll down the page, items will naturally animate into view. These animations only happen one time, and they only begin once the element is within the browser viewport.
I’ve explored this concept a bit using jQuery, along with CSS3 transitions. In a nutshell, this script checks for special classes on the page and uses jQuery to append a new class for transition effects. Those elements which have already animated are then removed from the event handler. And once there are no more elements to animate, the event handler is completely removed until you refresh the page. Take a look at my demo example to see exactly what we’re creating, and follow along!
Many online shops and e-commerce websites use a small details panel to offer more information about a product. I remember this from the early days of browsing Template Monster, and it has grown into a common trend for modern web designers.
In this tutorial I’d like to explain how we can duplicate this effect using some very basic code. I’ve provided two different versions, one built on jQuery and another built using CSS3. There are benefits to each one and you can download a copy of my tutorial code to see which you would prefer.
Website pagination is a crucial aspect to any layout with repeating content. Blogs are often a consideration, but also portfolio listings or related news/feed links or any other types of archive. Organizing a blog post into many pages helps to cut down on reading time – especially with particularly in-depth articles.
In this tutorial I want to demonstrate a collection of CSS techniques for designing pagination. Once you combine these designs with content systems like WordPress you can see how the interfaces really work in action. To get an idea of the final product take a look at my live sample demo below.
HTML5 has made many things simpler in web development, one of which is using embedded audio. Today, we’re going to work through the process of completely customising the HTML5 audio player element, which can adapt to older browsers with fallbacks. It’s a simple method that’s easy to build upon and tweak.
The open source project MediaElement.js is wildly popular, and has even been built into the core of WordPress since version 3.6. It allows you to embed any HTML5 audio or video using a native player interface which can dynamically adapt into a Flash/Silverlight player when needed. I was really impressed to see all the features and it seems to be one of the more advanced solutions for handling legacy browsers. We’ll be using that as a starting point!
Input buttons are used in web forms where a user needs to select one option from a larger collection. This often happens with unique values like newsletter subscriptions, profile settings, and submission categories. I have always liked the old-school Digg-style input buttons where you click a link to choose your story category.