DZone Snippets: stylesheet code

Adding style to SVG

jrobertson (James Robertson) — Fri, 18 Apr 2008 21:37:11 GMT

To reference a CSS file within an SVG file refer to the following example code.

Here's what an SVG CSS file looks like.



.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}

.str2 {stroke:#0093DD;stroke-width:12}

.str3 {stroke:#0093DD;stroke-width:10}

.str4 {stroke:#0093DD;stroke-width:6}



.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}

.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}

.str5 {stroke:#0093DD;stroke-width:4}

.str7 {stroke:#1F1A17;stroke-width:13}



.fil0 {fill:none}

.fil2 {fill:#1F1A17}

.fil1 {fill:#C4E5FA}

.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

CSS Menu with Highlights

webscriptexpert (r) — Wed, 13 Dec 2006 00:55:36 GMT

// Simple CSS that will let you do away with clunky images forever! This script will create a perfect menu that highlights links when the mouse rolls over! The beauty of CSS is that this script is compact, lightweight and customizeable! This is a perfect example of the power of CSS.
DEMO
webscriptexpert.com




















CSS MENU

Web Script Expert


Actionscript


PHP CSS


Javascript

CSS Drop Shadows

webscriptexpert (r) — Wed, 13 Dec 2006 00:53:02 GMT

This handy technique allows us to build flexible CSS drop shadows that we can apply to any arbitraryblock elements. The beauty of this method is that most exisitng techniques use images to create the shadow effect. This script is lightweight and uses pure CSS! ENJOY!
www.webscriptexpert.com













CSS Drop Shadow DEMO































This is a sample of how we implement the CSS style to create flexible CSS drop shadows that can be applied to block elements.

The beauty of this script is that is doesnt use any images to create the final effect, just pure CSS!






































The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. 

























The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

<.CSS FILE HERE>





/* CSS container shadow */

#shadow-container {

position: relative;

left: 3px;

top: 3px;

margin-right: 3px;

margin-bottom: 3px;

}



#shadow-container .shadow2,

#shadow-container .shadow3,

#shadow-container .container {

position: relative;

left: -1px;

top: -1px;

}



#shadow-container .shadow1 {

background: #F1F0F1;

}



#shadow-container .shadow2 {

background: #DBDADB;

}



#shadow-container .shadow3 {

background: #B8B6B8;

}



#shadow-container .container {

background: #ffffff;

border: 1px solid #848284;

padding: 10px;

}

/* CSS container shadow */