Перейти до змісту
Домент ipb-board.ru продається.

Красивый "Hover"эффект

Рекомендовані відповіді

Опубліковано
  • Адміністратор

Screenshot_1.png

Админ Панель-Внешний вид-Ваш стиль-css-ipb_style.css найти:

<!-- ::: MAIN CONTENT AREA ::: -->
			<div id='content' class='clearfix'>

Ниже вставить:

<div class="ipb-board.com">
  <span class="letter" data-letter="I">I</span>
  <span class="letter" data-letter="P">P</span>
  <span class="letter" data-letter="B">B</span>
  <span class="letter" data-letter="M">-</span>
  <span class="letter" data-letter="A">B</span>
  <span class="letter" data-letter="S">o</span>
  <span class="letter" data-letter="T">a</span>
  <span class="letter" data-letter="E">r</span>
  <span class="letter" data-letter=".">d</span>
  <span class="letter" data-letter="R">.</span>
  <span class="letter" data-letter="U">r</span>
  <span class="letter" data-letter="U">u</span>
  
</div>

Админ Панель-Внешний вид-Ваш стиль-css-ipb_styles.css добавить в самый низ:

@import url(http://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
  box-sizing:border-box;
}

div.silence{
  width: 100%;
  margin: 0 auto;
  text-align: center;
font-family: 'Lato', sans-serif;
}
.letter{
  display: inline-block;
  font-weight: 300;
  font-size: 5em;
  margin: 2px;
  position: relative;
  color: #34495E;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
}
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow: 
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}

Для публікації повідомлень створіть обліковий запис або авторизуйтесь