text-shadow

  #ts
  {
   text-shadow:5px 5px 3px #000;

         color:orange;
     font-size:50pt;
  }
  <p id="ts">CSS3</p>
  

CSS3

text-shadow múltiples

   #tsm
   {
    text-shadow:  0     0   0.1em #f00,
                  0     0   0.1em #f00,
                -25px -25px   2px #00f,
                -10px  55px   1px #0f0;
   }
   <p id="tsm">CSS3</p>
  

CSS3

text-shadow múltiples con repetición

   #tsmcr
   {
    text-shadow:0 0 0.1em #f00,
                0 0 0.1em #f00,
                0 0 0.1em #f00,
                0 0 0.1em #f00;

      font-size:90pt;
   }
   <p id="tsmcr">CSS3</p>
  

CSS3

text-shadow alto relieve

   #tsar
   {
         text-shadow:-2.25px -2.25px #f00,
                      2.25px  2.25px #000;

    background-color:#dff;
               color:#f00;
           font-size:80pt;
   }
   <p id="tsar">CSS3</p>
  

CSS3

text-shadow bajo relieve

   #tsbr
   {
         text-shadow: 1px  1px #fff,
                     -1px -1px #eee;

    background-color:#ccc;
               color:#cdcdcd;
           font-size:80pt;
   }
   <p id="tsbr">CSS3</p>
  

CSS3

text-shadow outline

   #tso
   {
    text-shadow:-1px 0   #000,
                 0  -1px #000,
                 0   1px #000,
                 1px 0   #000;

          color:#fff;
      font-size:100pt;
   }
   <p id="tso">CSS3</p>
  

CSS3

box-shadow

   #bs
   {    
            box-shadow:-10px 5px 6px #000;
       -moz-box-shadow:-10px 5px 6px #000;
    -webkit-box-shadow:-10px 5px 6px #000;

      background-color:#ffc;
                border:1px groove #f00;
   } 
   <p id="bs">CSS3</p>
  

CSS3

border-radius

   #br
   {    
            border-radius:3em;
       -moz-border-radius:3em;
    -webkit-border-radius:3em;

         background-color:orange;
   }
   <p id="br">CSS3</p>
  

CSS3

border-radius circle

   #circulo
   {    
            border-radius:3.5em;
       -moz-border-radius:3.5em;
    -webkit-border-radius:3.5em;

         background-color:#8f8;
                   height:7em;
                    width:7em;
              line-height:7em;
                  padding:0;
  }
  <p id="circulo">CSS3</p>
  

CSS3

transform matrix

  #matrix
  {
      -moz-transform:matrix(3,-1.5,1,-6,0,0);
        -o-transform:matrix(3,-1.5,1,-6,0,0);
   -webkit-transform:matrix(3,-1.5,1,-6,0,0); 

    background-color:rgb(255,255,128);
           font-size:12pt;
               width:50px;
              height:13px;
         line-height:13px;
              margin:90px 150px 0 0;
  }

  <p id="matrix">CSS3</p>
  

CSS3

transform rotate

   #tr
   {
       -moz-transform:rotate(-35deg);
         -o-transform:rotate(-35deg);
    -webkit-transform:rotate(-35deg);

            font-size:50pt;
   }
  <p id="tr">CSS3</p>
  

CSS3

transform scale, scaleX, scaleY

   #scale
   {
       -moz-transform:scale(6,2);
         -o-transform:scale(6,2);
    -webkit-transform:scale(6,2); 
   }

   #scaleX
   {
       -moz-transform:scaleX(7);
         -o-transform:scaleX(7);
    -webkit-transform:scaleX(7); 
   }

   #scaleY
   {
       -moz-transform:scaleY(5.5);
         -o-transform:scaleY(5.5);
    -webkit-transform:scaleY(5.5); 
   }

   <p style="line-height:8em;
               font-size:12pt;">
   <span id="scale">scale</span>
   <br />
   <span id="scaleX">scaleX</span>
   <br />
   <span id="scaleY">scaleY</span>
  </p>
  

scale
scaleX
scaleY

transform skew, skewX, skewY

   #skew
   {
       -moz-transform:skew(-40deg,20deg);
         -o-transform:skew(-40deg,20deg);
    -webkit-transform:skew(-40deg,20deg); 

     background-color:wheat;
              padding:15px; 
   }

   #skewX
   {
       -moz-transform:skewX(-40deg);
         -o-transform:skewX(-40deg);
    -webkit-transform:skewX(-40deg); 

     background-color:#dfd;
              padding:20px; 
   }

   #skewY
   {
       -moz-transform:skewY(10deg);
         -o-transform:skewY(10deg);
    -webkit-transform:skewY(10deg); 
   }

   <p style="line-height:3em;
               font-size:40pt;">
   <span id="skew">skew</span>
   <br />
   <span id="skewX">skewX</span>
   <br />
   <span id="skewY">skewY</span>
  </p>
  

skew
skewX
skewY

transform translate, translateX, translateY

   #translate
   {
       -moz-transform:translate(-100px,-30px);
         -o-transform:translate(-100px,-30px);
    -webkit-transform:translate(-100px,-30px); 
   }

   #translateX
   {
       -moz-transform:translateX(30px);
         -o-transform:translateX(30px);
    -webkit-transform:translateX(30px); 
   }

   #translateY
   {
       -moz-transform:translateY(-70px);
         -o-transform:translateY(-70px);
    -webkit-transform:translateY(-70px); 
   }

   <p style="line-height:2.5em;
               font-size:40pt;">
   <span id="translate">translate</span>
   <br />
   <span id="translateX">translateX</span>
   <br />
   <span id="translateY">translateY</span>
  </p>
  

translate
translateX
translateY

transform mixtos

  #mixto
  {   
             -moz-transform:translate(-100px,100px)
                            rotate(40deg); 
      -moz-transform-origin:60% 50%;
  
               -o-transform:translate(-100px,100px)
                            rotate(40deg); 
        -o-transform-origin:60% 50%;

          -webkit-transform:translate(-100px,100px)
                            rotate(40deg); 
   -webkit-transform-origin:60% 50%;

           background-color:wheat;
                  font-size:40pt;
                      width:200px;                     
  }

  <p id="mixto">CSS3</p>
  

CSS3

-moz-linear-gradient

  
  #mlg
  {
    background:-moz-linear-gradient(-33deg,#0f0,#f00);
    background:-webkit-gradient(linear,left top,
                                right bottom,
                                from(#0f0),to(#f00));

        height:160px;
   line-height:160px;
     font-size:60pt;
         color:#fff;
   font-family:cursive, serif;
   font-weight:bold;
  }

  <p id="mlg">CSS3</p>
  

CSS3

-moz-linear-gradient ~ arco iris

  
  #mlgai
  {
    background-image:-moz-linear-gradient(blue,
                                          yellow,
                                          red,
                                          wheat,
                                          #00f,
                                          #f0f,
                                          green,
                                          #0ff,
                                          orange);

        height:250px;
   line-height:250px;
     font-size:90pt;
         color:#ff8;
   font-family:algerian, 'Comic Sans MS', serif;
   font-weight:bold;
  }


  <p id="mlgai">CSS3</p>
  

CSS3

-moz-repeating-linear-gradient

  #mrlg
  {
   background:
   -moz-repeating-linear-gradient(top left -63deg,
                                  #00f,
                                  #00f  5px,
                                  #ff0  5px,
                                  #ff0 10px);

   height:150px;
 }

  <p id="mrlg"></p>
  

-moz-radial-gradient

  
  #mrg
  {
   background:-moz-radial-gradient(50% 50%,
                                   farthest-side,
                                   #f00,#fff);

   background:-webkit-gradient(radial,50% 50%,0,
                               50% 50%,350,
                               from(#f00),to(#fff));

       height:200px;
  }

  <p id="mrg"></p>
  

-moz-repeating-radial-gradient

  #mrrg
  {
   background:
   -moz-repeating-radial-gradient(#0f0,
                                  #0f0  5px,
                                  #f0f  5px,
                                  #f0f 15px);
       height:150px;
  }

  <p id="mrrg"></p>
  

-o-transition

  #transition
  {
            -o-transition:background-color;
   -o-transition-duration:3s;
      -o-transition-delay:1s;

         background-color:#0ff;
                   border:5px dotted orange;
                   height:120px;
  }

  #transition:hover
  {
   background-color:#00f;
             border:3px groove #f00;
  }

  <p id="transition"></p>
  

-column- múltiples columnas

  #mc
  {
      -moz-column-count:3;
        -moz-column-gap:2em;
       -moz-column-rule:1px dotted #f00;
   -webkit-column-count:3;
     -webkit-column-gap:2em;
    -webkit-column-rule:1px dotted #f00;

              font-size:8pt;
            font-family:'Trebuchet MS', serif;
             text-align:justify;
  }


  <p id="mc">
   <span style="color:#00f;">
   This is a small set of <code>CSS3</code> examples
   which can be modified at will in order to get
   different effects. It is convenient to go to the
   listed <i>links</i> in each of the examples. Try the
   browser latest version.
   </span>

   <br />&nbsp;<br />

   Esta es una colección de ejemplos de
   <code>CSS3</code> los cuales pueden modificarse a
   voluntad para conseguir diversos efectos. Es
   recomendable ir a los <i>enlaces</i> que se
   indican en cada uno de los ejemplos. Trate de usar
   las versiones mas recientes de los navegadores. 
  </p>
  

This is a small set of CSS3 examples which can be modified at will in order to get different effects. It is convenient to go to the listed links in each of the examples. Try the browser latest version.
 
Esta es una colección de ejemplos de CSS3 los cuales pueden modificarse a voluntad para conseguir diversos efectos. Es recomendable ir a los enlaces que se indican en cada uno de los ejemplos. Trate de usar las versiones mas recientes de los navegadores.

A Nice Button

  fieldset p .niceButton
  {
                   background:orange;
   background:
   -moz-linear-gradient(top,#ff0,orange);
   background:
   -webkit-gradient(linear,
                    left top,
                    left bottom,from(#ff0),to(orange));
                   
              text-shadow:0 -1px 0 #000;
            border-radius:10px;
      -moz-border-radius:10px;
   -webkit-border-radius:10px;

                 
                   color:#f0f;
                  border:1px solid #00f;
                  height:50px;
                   width:200px;
         text-decoration:none;
             line-height:50px;
             font-family:'Comic Sans MS', serif;
               font-size:14pt;
  }

 fieldset p .niceButton:hover
 {
  background:orange;
  background:-moz-linear-gradient(top,orange,#ff0);
  background:
  -webkit-gradient(linear,left top,
                   left bottom, from(orange), to(#ff0));
 }

 <p>
  <a class="niceButton"
     href="http://fisica.ciens.ucv.ve/felix/css3/">
  Nice Button</a>
 </p>

Nice Button