Must See: Famous Logos and Icons in Pure CSS



There are some incredible things happening with CSS these days, and I think I found my favorite.

Cool things are happening over at ECSSpert. So far they have reproduced pure CSS logos for Twitter, Adidas, Adobe, an awesome animated Atari, and well… just go look for yourselves. More after the jump.

Read More

20 Great Uses of HTML5 Techniques



As one application programming, HTML5 is widely used in some platforms script based. One of the functions that can be optimized is the use of the HTML5 web design to application development. Some of the techniques that you can try are to do some modification of the script code from a web design. With HTML5 and application of existing techniques, you can make some changes, including doing a combination of techniques HTML5 with j-Query. If you are interested in trying some of the existing functionality, is currently a lot of tutorials that can be alternatives, including how to use the HTML5 technique that suits as your needs.

Read More

Integrating Datepicker with jQuery



Gone are the days when we have to write code, manually from scratch, to create a Website in an editor, mostly it was Notepad. Nowadays, we are using tools like Adobe Dreamweaver, Zend Studio, Microsoft Visual Studio Express and existing code libraries to simplify our work and get it done with fewer efforts in less time.

Today, we will discuss about one such code library named jQuery. It is an open source, is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. In this write up, we will show how you can create a Datepicker using this jQuery library.

You can download the source files used in the end of the article.

Read More

Building a Compact jQuery News Ticker



Many websites today feature a small news ticker that provides text links to pages with recent news or other features. It’s a great way to highlight important links without using much space. In this tutorial, I’ll show you how to easily build one of these news tickers using jQuery. We’ll start with a HTML list of links, then use jQuery to make them automatically cycle, fading in and out. When the user hovers over a link, the ticker will pause so they can click the link to learn more.

Read More

htmlspecialchars in JavaScript



htmlspecialchars is an extremely useful PHP function, but proves useful in more languages that just PHP. It is necessary to use these HTML entities whenever you want HTML to display as plain text instead of being parsed.

Read More

WDF Launch WordPress Theme Download



Today we have a cool treat for everyone. We’ve taken the theme you see here at Web Design Fan and packaged it up for the Web Design Fan Club. Now you too can enjoy our beautiful design, as well as build your own variations of it.

In the package comes the full Wordpress theme as well as 2 PSDs: the home page and a post page. Also included is documentation to help you through the process of installation and modification.

Read More

Tracking Links with PHP, jQuery and MySQL [Video Tutorial]



Today, Doug Feder will be guiding you through the steps to integrate jQuery with PHP while using a MySQL database to count clicks on links. This tutorial will help beginning coders see how to get started using MySQL with PHP and see cool jQuery tricks to improve the look and functionality of designs. We also have a live demo and source files for download below so that you can work along with the video.

Read More

How to Make an Image Magnifier in jQuery



This is a tutorial for what is the most complicated jQuery program I have written to date. It is a beautiful script with a simple output that has many potential uses. Undoubtedly, it caused me more stress than it should have, as I debated the most efficient method of displaying a cropped image. Should I use background position or image clipping, scaling or thumbnailing? Which of the many options between methods and styles are cross-browser compatible? After days of debate and testing, I found the perfect combination for a code that supports all high-request browsers (including Internet Explorer 6).

Read More

How to Make a Graphical News Slider in jQuery



The graphical news slider: something used so often in so many places for so many different purposes. I had made one ages ago as one of my first jQuery projects. I figured I could write a tutorial to share that code with WebDesignFan’s readers, but was taken aback when I reviewed the code I had made so long ago. It was not bad formatting or compatibility or any such thing, as I would never allow such problems to be a part of my programs. However, it wasn’t very extensible as I feel all public code should be. It was merely designed to support the features I needed at the time. Having spent the last few days revising the code, namely to allow custom image dimensions, I am happy to share with you the revised code.

Read More

Hiding Content for the Visually Impaired



If you subscribe to my design philosophy, then you’re very careful to create web sites that are friendly to people with disabilities of all kinds. As creators of content that is largely visual, we need to be particularly cognizant of the needs of our visually impaired friends. This means sticking to a few basic rules that will make it much easier for the user of a screen-reader to use the site.

In this article, we will be discussing using label tags for input elements.

Read More