Imagine Dragons Enemy

ну а че

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ну а че » Новый форум » rjls


rjls

Сообщений 1 страница 2 из 2

1

[html]<style>
#ebsukofor {
width: 600px;
height: 587px;
margin: 0px auto;
overflow: hidden;
position: relative;
background: #000;
padding: 10px;
}

.ebsukotabs {
width: 100px;
height: 400px;
position: relative;
top:0px;
display:flex;
flex-direction: column;
align-items: center;
   background-color: rgba(255,255,255,0.5);
}

.ebsukotab label {
width: 88px;
height: auto;
display: block;
position: relative;
left: 0;
font-family: Arial Narrow;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
color: #000;
transition-duration: 0.8s;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px 0 0 20px;
}

.ebsukotab input[type="radio"]:checked ~ label {
background: rgba(0,0,0,0.2);
color: #fff;
z-index: 2;
transition-duration: 0.5s;
}

.ebsukotab input[type="radio"] {
display: none;
}

.ebsukocont {
width: 470px;
height: 370px;
position: absolute;
bottom: 0;
left: 100px;
right: 0;
top: 0;
opacity: 0;
}

.ebsukocontent {
width: 470px;
height: 370px;
position: relative;
bottom: 0;
right: 0;
top: 0px;
background: rgba(255,255,255,0.5);
box-shadow:inset 0px 0px 14px 1px rgba(0, 0, 0, 0.2);
padding: 15px;   
}

.ebsukotab input[type="radio"]:checked ~ label ~ .ebsukocont {
opacity: 1;
z-index: 1;
}

</style>
<div id="ebsukofor">
<img src="https://forumupload.ru/uploads/001c/54/e5/3/743346.png">
<div class="ebsukotabs">

  <div class="ebsukotab">
  <input id="chronologia" name="ebsukotab-group-1" type="radio"  checked="">
  <label for="chronologia">Коллекции</label>
   <div class="ebsukocont">
    <div class="ebsukocontent">

    </div>
   </div>
  </div>

  <div class="ebsukotab">
  <input id="relations" name="ebsukotab-group-1" type="radio">
  <label for="relations">Награды</label>
   <div class="ebsukocont">
    <div class="ebsukocontent">
<img src="https://place-hold.it/60x60.png"> <img src="https://place-hold.it/60x60.png"> <img src="https://place-hold.it/60x60.png">
    </div>
   </div>
  </div>

  <div class="ebsukotab">
  <input id="inventory" name="ebsukotab-group-1" type="radio">
  <label for="inventory">Достижения</label>
   <div class="ebsukocont">
    <div class="ebsukocontent">
    </div>
   </div>
  </div>

  <div class="ebsukotab">
  <input id="inventory2" name="ebsukotab-group-1" type="radio">
  <label for="inventory2">Подарки</label>
   <div class="ebsukocont">
    <div class="ebsukocontent">
    </div>
   </div>
  </div>

  <div class="ebsukotab">
  <input id="inventory1" name="ebsukotab-group-1" type="radio">
  <label for="inventory1">Оформления профиля</label>
   <div class="ebsukocont">
    <div class="ebsukocontent">
    </div>
   </div>
  </div>

<a href=""> anketa</a>
<a href="">dnevnik</a>
</div>
</div>[/html]

0

2

Код:
.ls-pod h1 {
 font-size: 10px;
 color: #f15b5b;
 position: relative;
 text-transform: uppercase;
 text-align: center;
 top: 50px;
 width: 70px;
 transition: 1.0s;
 margin: auto;
 z-index: 10;
   mix-blend-mode: screen;
}

.ls-pod:hover h1 {
 top: -25px;
}


.ls-box-t {
 background: rgba(0, 0, 0, 0.5);
 height: 70px;
 width: 70px;
 position: absolute;
 top: 70px;
 transition: 1.0s;
}
 
.ls-pod:hover .ls-box-t {
 top:0px;
}
.ls-box-t:before {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 37px solid transparent;
border-bottom: 20px solid rgba(0, 0, 0, 0.5);
position: absolute;
content: "";
display: block;
top: -20px;
}


 <div class="ls-pod" style="background-image: url(https://forumupload.ru/uploads/001b/d4/28/3/288486.png); background-size: cover;">
  <div style="position:relative">
   <div class="ls-box-t">
лалал
   </div>
  </div>
 </div>


</div>

0


Вы здесь » ну а че » Новый форум » rjls


Рейтинг форумов | Создать форум бесплатно