D1esel OnlineOffline
Spoiler HTML cu fade effect
la data de Vin Sept 04, 2015 8:54 am
Am să vă arăt mai jos o metodă de a face spoilere în HTML. Spoilerul va avea și un efect fade.

Previzualizare: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Cod:


<style type="text/css">
.spoilerbutton {display:block;margin:5px 0;-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
          -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
          box-shadow:inset 0px 1px 0px 0px #ffffff;
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
          background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
          background-color:#ededed;
          -moz-border-radius:6px;
          -webkit-border-radius:6px;
          border-radius:6px;
          border:1px solid #dcdcdc;
          color:#777777;
          font-family:arial;
          font-size:15px;
          font-weight:bold;
          padding:3px 24px;
          text-decoration:none;
          text-shadow:1px 1px 0px #ffffff;}
.spoilerbutton:hover{
          background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
          background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
          background-color:#dfdfdf;
        }.classname:active {
          position:relative;
          top:1px;
        }
.spoiler {overflow:auto;background: #E5F1F9;text-align:center;border: 1px solid #FFFFFF;border-radius: 15px;}
.spoiler > div {-webkit-transition: all 0.3s ease;-moz-transition: margin 0.3s ease;-o-transition: all 0.3s ease;transition: margin 0.3s ease;}
.spoilerbutton[value="Arată conținut"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Ascunde conținut"] + .spoiler {padding:5px;}
</style>

<style type="text/css">
table#subint
{
    border-collapse:separate;
    border-spacing:0 10px;
}
</style>

<center><input class="spoilerbutton" type="button" value="Arată conținut" onclick="this.value=this.value=='Arată conținut'?'Ascunde conținut':'Arată conținut';"><div class="spoiler"><div>

CONȚINUTUL SPOILER-ULUI


</div></div></center>
Sus In jos
 
Spoiler HTML cu fade effect
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1