CSS Sprite

Sprite Creator. This program allows you to upload an image and select areas of the image to create the css for that sprite.

at:http://www.floweringmind.com/sprite-creator/   –  For the CSS positioning

CSS  sprite
http://csssprites.com/

 

 

sprite & accordion  merged demo:
http://css-tricks.com/examples/SpriteAccordion/#

 

Projekt Fondue CSS Sprite Generator
This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things. It also supports many languages. The source code is available for downloading and is covered by a BSD license. Want to run a local copy? Well, you can do that, too.

Screenshot

SmartSprites
A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

You can work with your CSS and original images as usual and have SmartSprites automatically transform them to the sprite-powered version when necessary. A PHP version is available as well. Open-source. Check also Chris Brainard’s Sprite Creator 1.0.

Bonus: How Does The background-position Property Work?

The background-position property, together with CSS specificity and CSS floats, is probably one of the most confusing and counter-intuitive of CSS properties.

According to CSS specifications, the background-position takes two (optional) arguments: horizontal position and vertical position. For example:

1 .introduction {
2     background-image: url(bg.gif);
3     background-position: [horizontal position] [vertical position];
4     }

Using this property, you can define the exact position of the background image for the block-level element (list item li). You can use either % or px units (or mix both) to define the starting position (i.e. the upper-left corner) of the displayed part of the master image. Alternatively, you could use the following keywords: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

Hence, in background-position: x% y%, the first value is the horizontal position, and the second value is the vertical position. The top-left corner is 0% 0%. The bottom-right corner is 100% 100%. If you specify only one value, the other value will be 50%.

For instance, if you use,

1 ul li {
2     background-image: url(bg.gif);
3     background-position: 19px 85px;
4     },

… then the background-image will be positioned 19 pixels from the left and 85 pixels from the top of the list item element.

As SitePoint’s reference article explains: “a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp — using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.”

You can find a detailed explanation of the property in the article “background-position (CSS property)” on SitePoint.

Other intersting css tricks : http://css-tricks.com/downloads/

Responsive Design Bookmarklet

Responsive Design Bookmarklet

Test your websites on various platforms with this easy as pie tool

a handy tool for responsive design testing

RWD Bookmarklet
Drag the link above into your bookmarks bar

How it works

 

There are some options when you run the bookmarklet. Here is some explanations.

  • Toggle a fake keyboard So, you can see how much space is visible when users are entering data in forms.
  • Toggle CSS Refresh As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. It only works in a server environment.
    Powered by CSS Refresh
  • Close the bookmarklet Close the bookmarklet and return to the current page

 

 

http://responsive.victorcoulon.fr/

Lightbox Clones

Lightbox Clones

This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes.

Comparison of various scripts that display images
and other objects in somehow cool CSS popups

59 found. Filter by:

Library: + ø
Features: + ø

via The Lightbox Clones Matrix « planetOzh.

CoLab Workspace Athens – Coworking

CoLab Workspace Athens – Coworking
Ermou 44, Athens – Greece | Tel: +30 211 800 8661
The idea is simple: that independent professionals and those with workplace flexibility work better together than they do alone. Coworking answers the question that so many face when working from home: “Why isn’t this as fun as I thought it would be?” Beyond just creating better places to work, coworking spaces are built around a community of like minded individuals who love sharing and collaborating. Not only is it a cheaper alternative to office space, it’s also a great way to build teams and innovate. Our first space is experimenting with all these ideas – come join us.

via CoLab Workspace Athens – Coworking.

CSS Backgrounds and Borders Module

CSS Backgrounds and Borders Module
Kosta’s contribution

Table of contents

* 1. Introduction
* 2. Values
* 3. Background properties
o 3.1. Layering multiple background images
o 3.2. The ‘background-color’ property
o 3.3. The ‘background-image’ property
o 3.4. The ‘background-repeat’ property
o 3.5. The ‘background-attachment’ property
o 3.6. The ‘background-position’ property
o 3.7. The ‘background-clip’ property
o 3.8. The ‘background-origin’ property
o 3.9. The ‘background-size’ property
o 3.10. The ‘background’ shorthand property
o 3.11. The backgrounds of special elements
* 4. Border properties
o 4.1. The ‘border-color’ properties
o 4.2. The ‘border-style’ properties
o 4.3. The ‘border-width’ properties
o 4.4. The ‘border-radius’ properties
+ 4.4.1. Corner Shaping
+ 4.4.2. Corner Clipping
+ 4.4.3. Color and Style Transitions
+ 4.4.4. Overlapping Curves
+ 4.4.5. Effect on Tables
o 4.5. The border shorthand properties
* 5. Border Images
o 5.1. The ‘border-image-source’ property
o 5.2. The ‘border-image-slice’ property
o 5.3. The ‘border-image-width’ property
o 5.4. The ‘border-image-outset’ property
o 5.5. The ‘border-image-repeat’ property
o 5.6. Border-image drawing process
o 5.7. The ‘border-image’ shorthand
* 6. Miscellaneous Effects
o 6.1. The ‘box-decoration-break’ property
o 6.2. The ‘box-shadow’ property
* 7. Definitions
o 7.1. Glossary
o 7.2. Conformance
o 7.3. Levels
+ 7.3.1. CSS Level 1
+ 7.3.2. CSS Level 2
+ 7.3.3. CSS Level 3
o 7.4. CR exit criteria
via CSS Backgrounds and Borders Module Level 3.

Internet & Web Icons

Home > Icons >

Internet & Web Icons

Home >  Icons >

Internet & Web Icons

div.bsap_1239499 { width: 100%; display: block; }div.bsap_1239499 a { width: 728px; }div.bsap_1239499 a img { padding: 0pt; }div.bsap_1239499 a em { font-style: normal; }div.bsap_1239499 a { display: block; font-size: 11px; color: rgb(136, 136, 136); font-family: verdana,sans-serif; margin: 0pt 4px 10px 0pt; text-align: center; text-decoration: none; overflow: hidden; }div.bsap_1239499 img { border: 0pt none; clear: right; }div.bsap_1239499 a.adhere { color: rgb(102, 102, 102); font-weight: bold; font-size: 12px; border: 1px solid rgb(204, 204, 204); background: none repeat scroll 0% 0% rgb(231, 231, 231); text-align: center; }div.bsap_1239499 a.adhere:hover { border: 1px solid rgb(153, 153, 153); background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(51, 51, 51); }div.bsap_1239499 a.adhere { width: 728px; height: 90px; line-height: 720%; }html > body div.bsap_1239499 a.adhere { width: 726px; height: 88px; }div.bsap_1239499 img.s { height: 0pt; width: 0pt; }div#bsap_1239499 { width: 100%; display: block; }div#bsap_1239499 a { width: 728px; }div#bsap_1239499 a img { padding: 0pt; }div#bsap_1239499 a em { font-style: normal; }div#bsap_1239499 a { display: block; font-size: 11px; color: rgb(136, 136, 136); font-family: verdana,sans-serif; margin: 0pt 4px 10px 0pt; text-align: center; text-decoration: none; overflow: hidden; }div#bsap_1239499 img { border: 0pt none; clear: right; }div#bsap_1239499 a.adhere { color: rgb(102, 102, 102); font-weight: bold; font-size: 12px; border: 1px solid rgb(204, 204, 204); background: none repeat scroll 0% 0% rgb(231, 231, 231); text-align: center; }div#bsap_1239499 a.adhere:hover { border: 1px solid rgb(153, 153, 153); background: none repeat scroll 0% 0% rgb(221, 221, 221); color: rgb(51, 51, 51); }div#bsap_1239499 a.adhere { width: 728px; height: 90px; line-height: 720%; }html > body div#bsap_1239499 a.adhere { width: 726px; height: 88px; }div#bsap_1239499 img.s { height: 0pt; width: 0pt; }

Reliable outsource partner for designers and developers

via Internet & Web Icons free download, Internet & Web Icon Packs download, VeryIcon.com.

Text-shadow effects using CSS

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.

For anyone not using those browsers, here is a reference image (from Opera 9.5):

text-shadow example

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

via Text-shadow, Photoshop like effects using CSS – CSS3 . Info.