Adding display text to a text property with gradient background - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Text

Description

Adding display text to a text property with gradient background

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>CSS Content</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!--from  w  w w.j  a va 2s.  c  o  m-->
   width:100%;
   font-family:sans-serif;
}

#status {
   color:Chartreuse;
   text-align:left;
   font-size:18px;
   font-weight:701;
   letter-spacing:2px;
   padding:4px 11px;
}

#status.normal {
   background:yellow;
   background:-moz-linear-gradient(-46deg,  blue 0%, pink 100%);
   background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,WhiteSmoke), color-stop(100%,OrangeRed));
   background:-webkit-linear-gradient(-46deg,  grey 0%,BlueViolet 100%);
   background:-o-linear-gradient(-46deg,  Chartreuse 0%,yellow 100%);
   background:-ms-linear-gradient(-46deg,  blue 0%,pink 100%);
   background:linear-gradient(136deg,  WhiteSmoke 0%,OrangeRed 100%);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='grey', endColorstr='BlueViolet',GradientType=2 );
}

#status.enpanne, #status.down {
   background:Chartreuse;
   background:-moz-linear-gradient(-46deg,  yellow 0%, blue 100%);
   background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,pink), color-stop(100%,WhiteSmoke));
   background:-webkit-linear-gradient(-46deg,  OrangeRed 0%,grey 100%);
   background:-o-linear-gradient(-46deg,  BlueViolet 0%,Chartreuse 100%);
   background:-ms-linear-gradient(-46deg,  yellow 0%,blue 100%);
   background:linear-gradient(136deg,  pink 0%,WhiteSmoke 100%);
   filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='OrangeRed', endColorstr='grey',GradientType=2 );
}

#status.enpanne:before {
   content:"Le syst?me est en panne";
}

#status.normal:before {
   content:"Operations Normal";
}

#status.down:before {
   content:"The system is currently down";
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <td id="status" class="enpanne"> </td> 
    </tr> 
    <tr> 
     <td id="status" class="normal"> </td> 
    </tr> 
    <tr> 
     <td id="status" class="down"> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials