Personalizzare quote e spoiler


Astuzia Personalizzare quote e spoiler

Messaggio Da Diego il Sab 31 Lug 2010 - 19:52

Personalizzare quote e spoiler


Non avevo niente fa fare questa notte, quindi ho scritto un pò di css.. questo codice modifica i quote e gli spoiler arrotondando gli angoli, inserisce un'immagine di sfondo ai quote e un bottone per aprire gli spoiler..
Inoltre li mette "in rilievo" con un'effetto ombreggiatura..

Codice..
Codice:
blockquote {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-rightright-radius: 25px;
}
blockquote {
  border-top: 1px solid #ADC8E5;;
  border-right: 2px solid #ADC8E5;
  border-bottom: 3px solid #ADC8E5;
  border-left: 5px solid #ADC8E5;
  background-color: #dfe6ef;
-webkit-box-shadow: 4px 4px 10px #333;
-moz-box-shadow: 4px 4px 10px #333;
box-shadow:  4px 4px 10px #333;
  }
blockquote cite {
  display: block;
  margin: -8px -8px 8px -8px;
  padding: 3px;
  background-image: url('http://i60.servimg.com/u/f60/13/80/01/02/sfondo22.jpg');
  background-repeat: repeat-x;
  background-position: top right;
  font-style: normal;
  font-size: 13px;
  }
blockquote {
background: url(http://i38.servimg.com/u/f38/14/18/94/73/quote15.jpg) no-repeat top right;
 min-height:75px; }
.spoiler {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-rightright-radius: 25px;
}
.spoiler {
  border-top: 1px solid #ADC8E5;;
  border-right: 2px solid #ADC8E5;
  border-bottom: 3px solid #ADC8E5;
  border-left: 5px solid #ADC8E5;
  background-color: #dfe6ef;
-webkit-box-shadow: 4px 4px 10px #333;
-moz-box-shadow: 4px 4px 10px #333;
box-shadow:  4px 4px 10px #333;
  }
.spoiler dt {
  display: block;
  margin: -8px -8px 8px -8px;
  padding: 3px;
  background-image: url('http://i60.servimg.com/u/f60/13/80/01/02/sfondo22.jpg');
  background-repeat: repeat-x;
  background-position: top right;
  font-style: normal;
  font-size: 13px;
  }
.spoiler {
background: url(http://i38.servimg.com/u/f38/14/18/94/73/quote16.jpg) no-repeat top right;
 min-height:30px; }



#navstrip li {
    float: left;
    margin: 0 2px;
    padding-left: 15px;
    background: url('http://i30.servimg.com/u/f30/13/80/01/02/immagi14.gif') no-repeat left 50%;
    }

Questo codice crea veramente un bell'effetto.. :)
Screen.. http://i30.servimg.com/u/f30/13/80/01/02/screen10.jpg

Per domande o chiarimenti Gestire l'aspetto del forum

Tutoriale da :
Copyrigth © FORUMATTIVO.COM


avatar
Diego
Veterano dello staff

Sesso : Maschile
Età : 26
Messaggi : 2249
Località : arezzo


Vedi il profilo dell'utente http://www.folliacity.it/blog-1.html
Diego è stato ringraziato dall'autore di questo topic.

Astuzia Re: Personalizzare quote e spoiler

Messaggio Da the crow il Dom 1 Ago 2010 - 0:08

ti sei dimenticato di dire che l'ultimo pezzo di codice..ingrandisce le frecce Embarassed Embarassed

Codice:
#navstrip li {
    float: left;
    margin: 0 2px;
    padding-left: 15px;
    background: url('http://i30.servimg.com/u/f30/13/80/01/02/immagi14.gif') no-repeat left 50%;
    }

avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 26
Messaggi : 8797
Località : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum