Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

r www.webscriptexpert.com

« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS 

Change Text Properties on Mouseover

This only works with the IE browsers. Add this code within your <head> tags. To keep the underline on your links, replace "none" with "underline" Change "YourColor" with the hexidecimal number of color required.
Find this and other snippets on my site, if you wish, by clicking here

   1  
   2  <style
   3  type="text/css"> <!-- A:link { text-decoration: none; color:#YourColor
   4  } A:visited { text-decoration: none; color:#YourColor } A:hover { text-decoration:
   5  none; color:#YourColor } --> </style>
to css text mouse properties Mouseover by webscriptexpert on Jan 17, 2007

CSS Menu with Highlights

// 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

<HTML CODE HERE>
   1  
   2  <table border="0" width=175>
   3  <tr>
   4  <td width="100%" bgcolor="#E6E6E6"><span class="style7"><b>CSS MENU<b></span></td>
   5  <tr>
   6  <td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Web Script Expert</a></span></td>
   7  </tr>
   8  <tr>
   9  <td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Actionscript</a></span></td>
  10  </tr>
  11  <tr>
  12  <td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">PHP CSS</a></span></td>
  13  </tr>
  14  <tr>
  15  <td width="100%"><span class="style5"><a href="http://www.webscriptexpert.com" class="selector">Javascript</a></span></td>
  16  </tr>
  17  </table>



<CSS CODE HERE>
   1  
   2  <style>
   3  A.selector {
   4  display: block;
   5  width: 198px;
   6  text-align: left;
   7  text-decoration: none;
   8  font-family:arial;
   9  font-size:12px;
  10  color: #000000;
  11  BORDER: none;
  12  border: solid 1px #FFFFFF;
  13  }
  14  
  15  A.selector:hover {
  16  border: solid 1px #6100C1;
  17  background-color:#F0E1FF;
  18  }
  19  .style5 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
  20  .style7 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
  21  </style>
to css menu highlight stylesheet cascading by webscriptexpert on Dec 12, 2006

CSS Drop Shadows

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

<HTML PAGE HERE>
   1  
   2  
   3  
   4  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   5  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   6  <head>
   7  <title>CSS Drop Shadow DEMO</title>
   8  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   9  <link media="screen" type="text/css" rel="stylesheet" href="dropshadow.css" />
  10  
  11  <style>
  12  body {
  13  margin: 0px;
  14  padding: 20px;
  15  font-family: verdana;
  16  font-size: 12px;
  17  min-width: 770px;
  18  }
  19  </style>
  20  
  21  </head>
  22  
  23  <body>
  24  
  25  <div id="shadow-container">
  26  <div class="shadow1">
  27  
  28  <div class="shadow2">
  29  <div class="shadow3">
  30  <div class="container">
  31  <p>This is a sample of how we implement the CSS style to create flexible CSS drop shadows that can be applied to block elements.</p>
  32  <p>The beauty of this script is that is doesnt use any images to create the final effect, just pure CSS!</p>
  33  </div>
  34  </div>
  35  </div>
  36  </div>
  37  </div>
  38  
  39  <br />
  40  <br />
  41  
  42  <table cellspacing=0 cellpadding=0 border=0 width="100%"><tr valign="top">
  43  <td width="22%" height="218">
  44  <div id="shadow-container">
  45  <div class="shadow1">
  46  <div class="shadow2">
  47  <div class="shadow3">
  48  <div class="container">
  49  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. </div>
  50  
  51  </div>
  52  </div>
  53  </div>
  54  </div>
  55  </td>
  56  <td width="21%"></td>
  57  <td width="57%">
  58  <div id="shadow-container">
  59  <div class="shadow1">
  60  <div class="shadow2">
  61  
  62  <div class="shadow3">
  63  <div class="container">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. </div>
  64  </div>
  65  </div>
  66  </div>
  67  </div>
  68  </td>
  69  </tr></table>
  70  
  71  </body>
  72  </html>
  73



<.CSS FILE HERE>
   1  
   2  
   3  /* CSS container shadow */
   4  #shadow-container {
   5  position: relative;
   6  left: 3px;
   7  top: 3px;
   8  margin-right: 3px;
   9  margin-bottom: 3px;
  10  }
  11  
  12  #shadow-container .shadow2,
  13  #shadow-container .shadow3,
  14  #shadow-container .container {
  15  position: relative;
  16  left: -1px;
  17  top: -1px;
  18  }
  19  
  20  #shadow-container .shadow1 {
  21  background: #F1F0F1;
  22  }
  23  
  24  #shadow-container .shadow2 {
  25  background: #DBDADB;
  26  }
  27  
  28  #shadow-container .shadow3 {
  29  background: #B8B6B8;
  30  }
  31  
  32  #shadow-container .container {
  33  background: #ffffff;
  34  border: 1px solid #848284;
  35  padding: 10px;
  36  }
  37  /* CSS container shadow */
  38
to css script stylesheet drop shadow by webscriptexpert on Dec 12, 2006
« Newer Snippets
Older Snippets »
Showing 1-3 of 3 total  RSS