Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Let's use Font Stacks in CSS
/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
Text shadow effect In CSS3
CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.
Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.
The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9.
Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.
The text-shadow property is super easy to work with and works well across all modern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9.
The Basic Info
text-shadow: horizontal-offset vertical-offset blur color;
Example 1
.test{
-moz-text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
-webkit-text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}
Example 2
body { background: #222;}#text h1 { color: rgba(0,0,0,0.6); -moz-text-shadow: 2px 2px 3px rgba(255,255,255,0.1); -webkit-text-shadow: 2px 2px 3px rgba(255,255,255,0.1); text-shadow: 2px 2px 3px rgba(255,255,255,0.1);}Example 3
.test{
-moz-text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
-webkit-text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
Subscribe to:
Posts
(
Atom
)
