Category Archives: CSS

BonBon Buttons – A CSS3 Examples

BonBon Buttons - A CSS3 Examples

BonBon Buttons, a sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. A mate, glossy and glass are the different 3 version of materials.

These CSS3 buttons are just for demo only and not meant to be used on your next project that target the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Create a Custom HTML5 Video Player with CSS3 and JQuery

Create a Custom HTML5 Video Player with CSS3 and JQuery

Are you a professional web designer, and you want to create a video player which look consistent across browsers. Each browser provide their own look and feel skin for the browser. And If you want to control to look the same on each browsers and integrate with your own design, you will have to create your own controls from scratch.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

The Google Font Directory

The Google Font Directory

The Google font directory help you browse all the fonts available via the Google Font API. You can use all the available fonts on your website under an open source license and served by Google servers. You can use it for your commercial or non-commercial project.

You don’t need any programming, just add a special stylesheet link to your HTML document, then refer to the font in a css style.The Google Font API is compatible with Google Chrome 4.249.4+, Firefox 3.5+, Safari 3.1+ andIE 6+. However, The Google Font API is not currently supported on iPhone, iPad, iPod, or Android.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]

Image-less CSS Tooltip Pointers with Polygonal CSS

Image-less CSS Tooltip Pointers with Polygonal CSS

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element.

The tool-tip widget design is common in websites uses a small triangular speech bubble pointer that typically created easily with a background image. Filamentgroup break the typical way and build it with pure polygonal CSS.

website url

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]