» »

Темный Вид спойлера на всю ширину


Темный Вид спойлера на всю ширину

Это стили спойлера, которые вы можете поставить на сайт и тем поменять стандартные. Так как этот скрипт, будет во всю длину и смотреться оригинально. Так по дизайну очень простой и вы его еще сами можете выставить под свой дизайн. А это как надпись, и фон который будет открываться и в нем как понимаете будет основная информация. На светлый его не нужно ставить, если решили установить, то вам придется воспользоваться фотошоп и сделать несколько изображений, а точнее перекрасить.

Установка:

Все очень просто, с начало находим от стандартного спойлера стили и убираем их. И потом ставим в самый низ эти.

Код
/* spoiler style */  
  .uSpoilerButton {width: 100%; color: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); padding: 3px; text-align: left; border: 1px solid url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png');}  
  .uSpoilerText {color: url('http://stalker.ucoz.ae/1/scr/ggg.png'); background: url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); padding: 3px; text-align: left; border: 1px solid url('http://zornet.ru/Ajaxoskrip/Frank/zornet/Slen/ggg.png'); border-top: 0px;}  
  /* ----------------------- */  
  /* Кнопки */  

  input[type=submit], input[type=reset], input[type=button] {  
  color: #505050;  
  font: 9px 'Verdana';  
  border: 1px solid #333;  
  border-radius:2px;  
  -webkit-border-radius:2px;  
  -moz-border-radius:2px;  
  -khtml-border-radius:2px;  
  background: #1c1c1c;  
  margin: 1px;  
  }  

  input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {  
  color: #598189;  
  font: 9px 'Verdana';  
  border: 1px solid #555;  
  border-radius:2px;  
  -webkit-border-radius:2px;  
  -moz-border-radius:2px;  
  -khtml-border-radius:2px  
  background: #101010;  
  cursor: pointer;  
  margin: 1px;  
  }  

  input[type=submit]:active, input[type=reset]:active, input[type=button]:active {  
  color: #4c6e75;  
  font: 9px 'Verdana';  
  border: 1px solid #444444;  
  border-radius:2px;  
  -webkit-border-radius:2px;  
  -moz-border-radius:2px;  
  -khtml-border-radius:2px  
  background: #101010;  
  cursor: pointer;  
  margin: 1px;  
  }  

  /* Поля ввода */  
  input, textarea, select, input.securityCode {  
  background:#1c1c1c;  
  border:1px solid #333;  
  border-radius:3px;  
  -webkit-border-radius:3px;  
  -moz-border-radius:3px;  
  color:#767676;  
  font-family:Verdana,Arial,sans-serif,Helvetica;  
  font-size:10px;  
  padding:2px;  
  outline: none;  
  }  

  input:hover, textarea:hover, select:hover, input.securityCode:hover {  
  border:1px dashed #555;  
  color:#767676;  
  font-family:Verdana,Arial,sans-serif,Helvetica;  
  font-size:10px;  
  padding:2px;  
  outline: none;  
  }
17.12.2015 Просмотров: 424 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
FeStemBer
FeStemBer 17.12.2015 22:571
0
С начало подумал, что сто то подобное уже видел, но там стили другие были и гораздо меньше, про этот спойлер говорю.
Kosten
Kosten 17.12.2015 23:163
0
Tventum, с начало также подумал, что тот же скрипт, но дизайн не помнил такой. И вот тот скрипт нашел и стили сравнил, и они реально другие, здесь главное убрать код стандартный.
ZruBkul
ZruBkul 17.12.2015 23:022
0
Здесь по сути всего обвод, а так много стилей, даже и не знаю. А так на темном сайте должно очень красиво смотреться.
FeStemBer
FeStemBer 18.12.2015 17:134
0
Установил так попробовать, так не чего смориться под описание и работает нормально и все показывает, что закрыто или открыто.
Kosten
Kosten 18.12.2015 17:155
0
На светлый видел какой то светло желтый, но его заливал не помню, даже проверять не стал, что то не понравился, просто его в работе видел и как он смотрится.
Maryges
Maryges 21.01.2016 00:006
0
Отличный вид, стоит такой, но явно лучше смотрится, чем стандартный.
avatar