Sponsorised links
December 2009
Creating a Rotating Billboard System with jQuery and CSS | Codrops
by srcmax
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.
November 2009
A jQuery Plugin for Zoomable, Interactive Maps - New Media Campaigns
by vrossign
asic css file is included with the demo zip. Here is some rough minimal css:
view sourceprint?
1.#map { position: relative; width: 700px; height: 470px; overflow: hidden; }
2.#returnlink { display: block; position: absolute; bottom: 0; right: 0; }
3.#map a.bullet { display: block; position: absolute; width: 10px; height: 10px; background: yellow; }
4.#map img.zoomable { }
5.#map div.popup{ display: none; position: absolute; width: 200px; height: 300px; }
6.#map div.popup a.close{ display: block; position: absolute; bottom: 0; right: 0; }
The code above will work just fine as a starting point. Obviously a lot of embellishment can be added to make the map look as g
Sponsorised links
October 2009
PixelWindow
by Xavier Lacot
PixelWindow is a simple, light-weight, cross-platform application for measuring things on your screen. It creates a transparent window that acts like a pixel ruler with its width and height reported in the center. Usefull when fixing a page layout.
Resolutions - the top three most used monitor resolutions - pixel width and height
by decembre
Resolutions I was looking for the top three most used monitor resolutions - pixel width and height - for making desktop wallpapers in my flickr stream. It dawned on me that knowing the three most used pixel counts weren't as important as moderately high resolution images in the correct format ratios. Here are the top three as of June 2009. 1. 1024x768 ( 1:1.33) 2. 1280x1024 ( 1:1.25 ) 3. 1280x800 ( 1:1.6 ) For example, the MacBook Pro supports 1440x900, which is the same dimensions as the 1280x800. Although there will be some scaling, the 26% difference of area between the two shouldn't cause enough stretching to make the image unpleasant as a desktop background.
September 2009
jQuery maxImage plugin: Demo
by Spone
& 2 others
This plugin will resize and scale targeted images to their max width according to the image ratio, the browser size and some simple options. Change the size of your browser to see it's effect.
July 2009
960 Grid System
by karlcow
& 20 others
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem
June 2009
Prevent your images from being too large
by mozkart
.post img {
max-width: 500px; /* Adjust this value according to your content area size*/
height: auto;
}
May 2009
Qt Labs Blogs » Qt Declarative UI
by oseres
Declarative UI is a way of making fluid user interfaces by describing them in terms of simple elements (Text, Image, Rect,and other QObjects) that are built up into components. The reason it is “declarative” is that rather than the changes in the UI being expressed as imperative code (”set this, set that, do this, do that, …”), they are instead expressed as sets of QObject property expressions (”this width is always half that width”), grouped into states (”when enabled, the properties are …, when disabled, they are …”). The language that enables this is named QML. QML is simple yet powerful. Most of a user interface is described by a simple tree structure of property bindings:
April 2009
PopTip - Greasemonkey Customisable - Add pop-up preview to any site - Flickr
by decembre
Script Summary: Add pop-up preview to any site.(Script homepage).....Rules for popup action must be written in "SITEINFO" in proper format. Properties of SITEINFO url (required)(RegExp) : URL to which the rule is applied. targetElement (required)(XPath) : XPath which select "A" elements. When "mouseover" action occurs on them, linked pages (values of "href" attributes) will be fetched. popupElement (required) (XPath) : XPath which select elements in fetched pages. These elements will be appear in tooltips. disabled (optional) : If you want to disable a rule temporally, set "false". style (optional) : CSS attributes of tooltips. Please be careful to write in CamelCase! (border-width -> borderWidth) stripe (optional) : If you set "true", small icons will be appended to elements on which the action will occur.
960 Grid System
by gregg
& 20 others
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem
March 2009
JS Coverflow
by Spone
& 3 others
Coverflow in Javascript
!!Strictly proof of concept!!
* Tested in Firefox 3, Opera 9.5 and Safari 3
* Only works for images of equal width and height (250px x 250px in this example)
* Utilizes scroll wheel and left/right keys
* You can have custom labels and onclick events for center image
* I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype
A Huge Compilation of 60 Free Illustrator Brushes - Vectortuts+
by decembre
Adobe Illustrator has many powerful tools and unique features. And one among them is Illustrator's Paintbrush Tool (B). The brushes can be applied to paths and strokes, they are great for creating stunning stroked designs in seconds. And, the best part about Illustrator's brushes is that they are vectors and can be completely modified to suit your needs by changing their colors, stroke width, weight, and more. Let's take a look at a large selection of Illustrator brushes available on the web!
JS Coverflow
by sbrothier
& 3 others
Coverflow in Javascript
!!Strictly proof of concept!!
* Tested in Firefox 3, Opera 9.5 and Safari 3
* Only works for images of equal width and height (250px x 250px in this example)
* Utilizes scroll wheel and left/right keys
* You can have custom labels and onclick events for center image
* I have tested it with other javascript libraries like jQuery, MooTools, Dojo and Prototype
February 2009
December 2008
960 Grid System
by melanie
& 20 others
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
A growing collection of Basic WordPress Templates, for web designers | SAOB: Senseless Acts of Beauty
by camel
(via)
After beginning development of several WordPress websites I found that I was doing the same beginning edits to the wordpress theme structure. So, in order to make my life easy, I proceeded to make some basic editable templates that would suit my needs for multiple websites. Also its very close to Christmas, and this is a time of giving and sharing so I am going to make these theme templates available to anyone.
NOTE: These theme templates are only meant to be expanded by a web designer, by no means are these templates a finished design.
Now then, there are many basic features of any website that I wanted to make available in each of these theme templates, and over time I will try and make a theme template for each combination.
Features to be considered:
* Single column layout
* Two column layout
* Three column layout
* Fixed width
* Fluid width
* Top navigation addition
* Search bar in header
* Multiple side bars
November 2008
jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so
by conseilnet
& 3 others
The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.
The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).
jQuery.popeye - an inline lightbox alternative | Christoph Schüßler » Informationsarchitektur und so
by camel
& 3 others
(via)
The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state.
The compact box has fixed, automatically calculated dimensions. The widht and height are calculated so that all thumbnail images are cropped to the smallest width and height in the set and centered resulting image area (stage).
Flexigrid for jQuery : Web 2.0 Javascript Data Grid
by camel
& 6 others
(via)
Lightweight but rich javascript data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.
Features
* Resizable columns
* Resizable height and width
* Sortable column headers
* Cool theme
* Can convert an ordinary table
* Ability to connect to an ajax data source (XML and JSON[new])
* Paging
* Show/hide columns
* Toolbar (new)
* Search (new)
* Accessible API
* Many more
October 2008
On having layout
by ms_michel
& 10 others
A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.”. John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height.
