Code Snippets & Script Examples

Welcome to our list of examples and code snippets. Here you will find links to pages containing all of the work we have done for you in for the form of CSS/JavaScript/PHP pages that contain examples of our code, many with reference to specific blog tutorials.

• Beautiful Css3 Form

  Whilst looking at some nice new stuff on Dribbble I came across this beautiful design for a form and thought "I reckon I could do that with some CSS3". So I did! And here's how it turned out. Feel free to look at the source code for markup or the bottom of the page for the CSS and use/change/snub the styles!

  

• Border Radius

  The border-radius property in CSS3 is used to add rounded corners to most HTML elements with a couple of lines (eventually one line!) of CSS. This page has some examples of border-radius for you to see how to use it and what effects you can achieve from adding it. Just remember that it is not supported in any version of IE yet (IE9, possibly) and requires vendor specific prefixes for Mozilla and Webkit.

  

• Captions

  This is a test to show you what this script will do. Hopefully a very nice little caption will appear when you rollover the image, which is pink!

• Chris Coyier Example

• Content Assist

  The content assist script is a great little feature and so easy to add to a page that lets you popup a small window whilst typing into a textarea or input box with a list of words that match the currently typing word. An example of usage for this could be on a site search, this could show the latest, or most popular searches that match the currently input string so far. Think of it as a "type-ahead" feature.

  

• Css Only Bar Chart

  This is my take on a Codesnipp.it I saw. I simply removed overlapping and changed some margins and widths. I like the effect and you could probably do a lot more with it!

• Css Only Twitter Login Form

  I've seen quite a few examples of people who have recreated the Twitter login form with CSS and JavaScript, but never seen one that uses only CSS. There probably are a fair few examples out there but I thought I'd create my own and see if I could do anything to improve the form in anyway. There is no JavaScript on this page!

• Css3 3d Transformations

  Use the links below to take at a look at some of the 3D transformations that can be applied to any element. These examples currently only work in Safari 5 (Windows) and some of the Webkit nightly builds. I'm hoping to extend them to Firefox when 4 it is released. And keep an eye out because I'll be adding more examples as and when I think or them, and create them! For now, enjoy the standard Safari example (extended a little by me) of a cube, and my own take on this example which is going to represent a clock (eventually) using only CSS3. I've also started work on a pyramid shape, but this is going to be a little more complicated.

• Css3 Slick Accordian Menu

  Best viewed in a webkit-based browser due to some transitions for the hover effect. See more examples.

• Css3 Slick Dark Menu

  Here's my quick go at making the nice menu at Line25 out of purely CSS(3) using no images for the backgrounds. Because of browser support this will probably only look okay in Firefox 4, Safari, Chrome and Opera and I've not tested anything. Just trying to see what could be possible :-)

• Css3 Target Psuedo Class

• Facebook Style Overlay Css

  The really great thing about RGBA colour is that it gives us the ability to create far more graphically rich designs without the need to use images. Not only does that make for faster and lighter pages, but sites which are easier and quicker to build and maintain.

• Flickr

  This example shows how you can create a simple Flickr image search with YUI3, but I have extended it to include the ability to save the files to folders when you drag and drop them on the folder of your choice. I will look at adding the ability to add and modify folder names at some point in the future.

  

• Funky Forms

  For this example, I wanted to extend a script I wrote for a nice way to display forms that merged with another jQuery example I found. The method I use is to display the label for an input over the top of the input so it looks like the input has a default value, but because it doesn't you don't have to worry about validating against the default value, which will always be nothing. Then when you focus on the input the label fades out slightly so that you still know what is required, but here is an obvious selection state. At this point, when the user started typing the text would disappear, which is fine, they should be starting to type into the box.

  

• Google Maps

  As part of my work project I have been asked to port our existing Google Map pages to the new version (3) of the API, which has some speed improvements, more options and doesn't require an API key! I believe it also has some support for the new Geographic properties in HTML5 (though I've yet to test this theory!).

  

• Google Maps V3

  

• Jquery Page Scrolling

  Nam eget dolor velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse quis erat nisl. Pellentesque volutpat sapien quis odio interdum viverra. Nulla lobortis elementum arcu, vel ultricies arcu tristique nec. Quisque sit amet pellentesque odio. Morbi a lectus est, eget tincidunt tortor. Mauris est sapien, mattis vitae cursus et, viverra nec neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vel dolor quam. In suscipit lacus sed ante lacinia pulvinar. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat congue elit eget semper. Nunc ultrices libero lorem, vel lobortis velit. Quisque non dolor dui, id porttitor felis. Maecenas ipsum dui, gravida nec egestas vitae, commodo sit amet diam. Mauris egestas, odio id laoreet imperdiet, lacus tortor elementum magna, in fermentum metus turpis id dui. Donec fermentum euismod lacus at egestas.

• Jquery Slider Example

  This is my slightly re-worked example of a simple jQuery image rotator script first found on TutorialZine. I've made a few changes to optimise the code a little, and change the functionality to allow for a couple of extra bits and pieces that a project I was working on required.

• Pure Css Tooltips

  This is my take on the script found at Six Revisions. I have revised the code to allow for some transitions in the CSS-only tooltips that will work for webkit browsers only, but allow for a nicer transition for the tooltips rather than just appearing and disappearing instantly. The reason why they don't fade out as well as they fade in is because when you mouseout the margin value is switched instantly, so you never see the fade out. I have created two alternatives that transitions from the left and top too.

  

• Rating Example

  I found a star rating script that was built with the YUI library but it didn't quite suite the needs of the page I was incorporating it into. So I decided to remove the requirement of a single element on the page allowing the ratings to be used as many times on a single page as is required. I have also added some extra functionality and options. All of the script and CSS is in the source of this page. View the blog

  

• Simple Pagination

  For another work project I decided to add some nice client-side JavaScript pagination using the YUI library. It requires a fairly specific mark-up but allows some options. You can also have as many pagination examples on a single page as you wish. You can then customise various aspects of the script to your liking.

  

• Simple Xml

• Texttocode

  {"status":"failed","code":"domain empty","message":"No domain specified"}

• Tweetie For The Web

  http://su.pr/23quwg - 100 useful social media learnings from 2010...so far... (Part 1 of 5)

• Tweetywall

  Tweetywall allows you to have a Twitter app showing you live feeds that you can simply place anywhere on your website! All you need is some CSS and a little JavaScript and an element in your page (preferably a <div> tag) with a specific id of "twitterFeeds". The script will poll Twitter search for the terms you provide (as many as you want) and animate through them (if this option is turned on). More information

  

• Twitter Oauth

  Not so much an example as me trying to get Twitter oAuth working, but feel free to give it a go. No data is stored anywhere, it is simply a test for my Tweetywall project.

• Yui Charts Example

  Here is the example page for the YUI Chart Component blog that I have written as a tutorial for you to implement a chart from data on your website with ease. In this example you can see the code used to create the charts and how you can either use remote, static or in-page data to actually build the chart. I'm also working on a generic JavaScript chart class that will allow you to build any chart with only a few parameters. Watch this space!

  

• Yuilight

  This example is my take on a jQuery plugin I saw. It basically allows you to 'highlight' elements on your page by simply giving them a class. There are a couple of options, including having the effect on click, or just mouseover. The CSS file is also provided which will allow you to customise the overlay colours too. Other options include changing the speed and opacity of the overlay. As always, view the source for the whole story!

  

• Yuislide

  YUISlide is my take on a jQuery plugin called "popeye". As with most of my scripts I have ported it to use the YUI library, but fundamentally the functionality of the script is the same. All of the JavaScript and CSS can be found in the source file links. Feel free to use on your own site.

  

• Yuitip

  YUITip is a simple YUI-based JavaScript that allows for a nice tooltip on any element that has a class of "tip" (the tip will pop up with the title of the element, so the element should also have a title attribute). You can optionally apply the script to work for all links by changing one flag at the top of the JavaScript file. If you like this you might also like my Pure CSS Tooltips (with optional CSS3 properties too!).

  

Add Us To Twitter

This Months Most Viewed Articles