AcasaAcasa  FAQFAQ  CautareCautare  MembriMembri  GrupuriGrupuri  InregistrareInregistrare  ConectareConectare  

Distribuiţi| .

Spoiler HTML cu fade effect

Vezi subiectul anterior Vezi subiectul urmator In jos
AutorMesaj
D1esel
avatar
Mesaje : 51
Multumiri : 0
Puncte : 65
Varsta : 20
Localitate : Braila

MesajSubiect: Spoiler HTML cu fade effect 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: http://blitztuts.forumgratuit.ro/h1-prew-spoiler

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

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
Graphic Space :: Suport ForumGratuit :: Sectorul codurilor :: Coduri & Scripturi :: HTML-