The two Clocks are pure HTML using JavaScript and CSS rotation. There are no Adobe Flash files or <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform property.
However, this isn’t going to work in any currently available version of Internet Explorer or many older browsers. It only works in Google Chrome, Safari and Firefox 3.5+ browsers support the CSS transform property.
Requirements: Browsers support CSS transform property
Demo: http://joncom.be/code/css-clocks/
License: License Free
This is Chat2, which is an update to original Chat Room published on CSS-Tricks. In some ways, the technology is the same. We employ PHP to talk to the server, jQuery to keep the chat rolling, and the chats themselves will be stored in .txt files just like the first version.
There are some new features in Chat2. Usernames are now unique to users currently chatting. You can see a “currently chatting” user list. And there are multiple rooms for chatting available now.
Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/Chat2/
License: License Free
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, SohTanaka believes it is wise to build simple widgets like the image slider using HTML / CSS / Javascript, and leave more interactive applications for flash if needed.
Therefore, SohTanaka has built an Automatic Image Slider with CSS and jQuery. This html based image slider will have its benefits with SEO and will also degrade gracefully for those without Javascript enabled.
Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/image-slider/
License: License Free
jQuery Magic Line Navigation allows us to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities.
As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.
Requirements: jQuery Framework
Demo: http://css-tricks.com/examples/MagicLine/
License: License Free
A few days ago, Ben Nadel programmed a little proof-of-concept for Flickr-style photo tagging using jQuery. He did it as an exploration in mouse-based event binding. He took a step further and packaged the jQuery code up into a jQuery plugin (phototagger.jquery.js), build a light-weight ColdFusion persistence layer (drop-and-run, no database required), and turned it into an official project: jQuery Photo Tagger.
jQuery Photo Tagger comes in at about 1,000 lines of code. As such, you can either check out the project page or try the online demo for yourself. Please note that you have to hold CTRL key when clicking mouse to create hotspot.
Requirements: jQuery Framework
Demo: http://www.bennadel.com/resources/projects/jquery_photo_tagger…
License: License Free
Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. That’s why Geoff Teehan created iPad GUI PSD for us.
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
Source: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
PHP hide_email() is a PHP function to protect the E-mail address you publish on your website against bots or spiders that index or harvest E-mail addresses for sending you spam. It uses a substitution cipher with a different key for every page load.
PHP hide_email() encrypts your E-mail address and generates the javascript that decrypts it. Most bots and spiders can’t execute javascript and that is what makes this work. A visitor of your web page will not notice that you used this script as long as he/she has javascript enabled. The visitor will see “[javascript protected email address]” in stead of the E-mail address if he/she has javascript disabled.
You can also use the generator if you have no PHP support on your web server. Change the E-mail address into your own E-mail address and press “Generate”. Cut and paste the generated XHTML into your own web page.
Requirements: –
Demo: http://www.maurits.vdschee.nl/php_hide_email/
License: License Free
Sublime Video is a HTML5 Video Player, users can play videos without the need of browser plugins or Flash dependencies. It supports Full-window mode with sleek zoom-in/out transitions. There are more advanced controls on a draggable pane. Sublime Video will be soon released for free (at least for non-commercial use).
Requirements: Safari 4.0.4+, Google Chrome 4.0+, IE with Chrome Frame
Demo: http://jilion.com/sublime/video
License: License Free
We have got Circular Social Media Icons and The Social Network Icon Pack already, however they are all in PNG format only. How about a free set of Social Media Icons in Vector? IconDock released a set of 50 Vector Social Media Icons of the most popular social media networks on the internet.
The icons are designed in 32px and 16px vector format. With the vector format, you can scale the icon to any size to fit with your design or use it in high quality print materials. What you will get from the zip package: 32px and 16px in three different file formats: vector EPS, PNG, and GIF. What more can you ask for?
Requirements: –
Demo: http://icondock.com/free/vector-social-media-icons
License: License Free
When we talk about tabs on web we usually think about tabs used for navigation. However, in this case we want to use them for showing different entities on the same page. We will try to simulate tabs as seen in browsers. Take Google docs for example, instead of opening each document in a new window (or browser tab), you could open them in page tabs.
Janko has written a throughout tutorial that shows you How to Use jQuery to Create Dynamic Tabs that can be added and removed dynamically. He has also mentioned how to use tabs and in which context should they be used in order to make them meaningful and usable.
Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/dynamic_tabs/
License: License Free
