Tag: CSS3

All PostsjQueryTutorials

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 to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.

Read More
All PostsTutorialsWeb Design

CSS3 Animated Image Slideshows with Flux Slider

There are so many JavaScript image slideshow plugins out on the Internet, it can be difficult pinpointing what you need. Developers who are not looking to start from scratch often search the web targeting the perfect solution. And although each technique has its drawbacks, the wide assortment of choices will offer plenty of rewards and something to fit your layout.

In this tutorial I want to focus on using a library called Flux Slider which was created by Joe Lambert. This image slideshow plugin is unique in that it defaults to using CSS3 transitions with JavaScript-controlled alternatives. All modern CSS3-compliant browsers will support the native features which can be set using jQuery or Zepto.js as the core library. Catch a glimpse of the demo we are building in my live example below.

Read More
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
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 PostsCSSTutorials

15 Thorough & New CSS3 Tutorials

For today I have selected 15 fresh and useful CSS3 tutorials for your next project. CSS3 and HTML5 are the topics that you see and hear everyday and I think it is the right time to start diving into it. While there is no freedom in expressing our ideas in CSS3 prior to weak support in major browsers we want to be the first ones when it is fully supported right? Besides chasing the trends you will gain valuable experience in CSS3, HTML5 and jQuery which will help you to solve your problems in your projects.

In this compilation you will find only newest CSS3 tutorials on creating amazing transition effects, slideshows, navigation menus and much more.

Read More
All PostsTutorialsWeb Design

Enhancing Your Typography With CSS3

Information has been vital component of the Internet for ages and that is the reason why people started to design websites – to access all available and needed information easily. Most of the information on the Web is text or typography and it plays very important role in website design too. Appropriate use of typography can improve overall design look so you definitely should pay some attention to this aspect of design.

Today I would like to present you some nice CSS3 techniques for improving your web typography. Unfortunately these experiments won’t work on all browsers because of weak CSS3 support but it is always interesting and fun to give a try on upcoming stuff.

Here are 15 unusual and beautiful CSS3 typography effect examples and explanations how to do them.

Read More