Archive for category CSS
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
sprite & accordion merged demo:
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.
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?
According to CSS specifications, the
background-position takes two (optional) arguments:
horizontal position and
vertical position. For example:
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
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.
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,
… 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-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/
CSS Cheat Sheets
CSS Backgrounds and Borders Module
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.
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):
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!):
CSS3 Button Pack
A CSS3 button pack created by us at script deck for its readers to use & customize. Read more
A simple jQuery tooltip plugin created by tutorialzine. Read more
Colourful rating system with CSS3 & jQuery
Create a Colourful rating system with CSS3 & jQuery, using the jQuery Color plugin, we can animate… Read more
CSS3 3d bar chart
Create a beautiful 3d bar chart now with animation. Read more
16 amazing jquery navigation menu tutorials
50 New Useful CSS Techniques, Tutorials and Tools
DIV Popup for the OnmouseOver Event
Mega Drop Down Menu w/ CSS & jQuery | Dropdown Menu | drop down menus | CSS Menu Tutorial | Drop Down Menu Tutorial | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Mega Drop Down Menus w/ CSS & jQuery
CSS typography experiment and browser inconsistencies