код

Код:

<!--HTML-->
<!--HTML*-->
<!--- ХТМЛ: кнопки вкладок, не забываем убирать звездочку --->
   <script type="text/javascript">
                                    $(document).ready(function(){

    $("#banner_1").click(function(){
    $("#vkladka1").slideToggle();
    $("#vkladka2").hide();
    $("#vkladka3").hide();
});

    $("#banner_2").click(function(){
    $("#vkladka1").hide();
    $("#vkladka2").slideToggle();
    $("#vkladka3").hide();
});
    
     $("#banner_3").click(function(){
     $("#vkladka1").hide();
     $("#vkladka2").hide();
     $("#vkladka3").slideToggle();
});

                                    });
        </script>


<div class="oformlenie_knopki" id="banner_1">НАЗВАНИЕ ВКЛАДКИ 1</div>
<div class="oformlenie_knopki" id="banner_2">НАЗВАНИЕ ВКЛАДКИ 2</div>
<div class="oformlenie_knopki" id="banner_3">НАЗВАНИЕ ВКЛАДКИ 3</div>



<div id="vkladka1" style="display:none"><br>1текст текст текст текст</div>
<div id="vkladka2" style="display:none"><br>2текст текст текст текст</div>
<div id="vkladka3" style="display:none"><br>3текст текст текст текст</div>

        
        
      
<style type="text/css">
.oformlenie_knopki {
        display:inline-block;
        cursor: pointer;
        width: 180px; 
        padding: 6px; /* отступ текста от края */
        background-color: #4f4e4e; /* цвет фона */
        text-align: center; /* центровка текста */
        font-family: Georgia;  /* шрифт */
        font-size: 12px; /* размер текста*/
        color: #d5d5d5; /* цвет текста */
    }
  
    </style>

~~Да, я видел темку с хтмл кодами для постов, но она пугающе пустая, поэтому пусть будет здесь.~~

Простенькая наводилка, наковырял бог знает когда и непонятно зачем. Мне девать некуда, а тут вдруг полезна будет и люди найдут, куда прилобанить. Настроить могу помочь, если надо, а вот переписывать чтоб там еще слева/справа прыгало и сверкало, сверху вниз шарик беспорядочно летал и еще одно окошко добавить, чтоб туда всунуть еще окошко с окошком и картинкой - не буду. Сами разберетесь тогда хд

Код:

<!--HTML-->
<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
  <div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
  <div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div></div>
 </div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 130px;}

.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}

.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
  margin: 7px 7px;
  height: 74px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#333;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>

Код, вместе со шрифтами

Код:

<div class="spiritbox">
  <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div>
  <div class="spirit_title">вещий дух
<div class="spirit_subtitle">собирает дизайны из говна и палок</div></div>
  <div class="spirit_txt"><div>
Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada.
</div>
</div>
 </div>

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic');

.spiritbox {width: 245px;
height: 130px;
overflow: hidden;
position: relative;
display: block;
margin: auto}

.spirit_pic {width: 245px;
height: 130px;
transition: all 0.7s ease-in-out 0s}

.spirit_pic img {
max-height: 130px;}

.spirit_title {width: 200px;
position: absolute;
text-align: center;
margin-top:-90px;
font-family: oswald;
font-size: 16px;
font-weight: 700;
margin-left: 23px;
color: #999;
text-shadow: 1px 1px 1px #000;
text-transform: lowercase;
transition: all 0.7s ease-in-out 0s;
background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%);
height: 55px}

.spirit_subtitle {box-shadow: 0 -2px 0 0 #999;
text-align: center;
font-family: play;
font-size: 8px;
font-weight: 200;
color: #dfdfdf;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
transition: all 0.3s ease-in-out 0s;
padding-top: 2px;
margin-top: 5px}

.spirit_txt {width: 210px;
height: 90px;
text-align: justify;
font-family: tahoma;
font-size: 10px;
margin-top: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8);
line-height: 11px;
margin-left: 18px;
opacity: 0;
transition: all 0.7s ease-in-out 0s;}

.spirit_txt div {
overflow-y: auto;
padding-right: 3px;
  margin: 7px 7px;
  height: 74px
}

.spirit_txt div::-webkit-scrollbar {
width: 6px;
height:6px;
background-color: transparent;}

.spirit_txt div::-webkit-scrollbar-thumb {
  background-color:#333;
  width:6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
}

.spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px);
transform: scale(1.2)}

.spiritbox:hover .spirit_title {margin-top: -170px}
.spiritbox:hover .spirit_txt {margin-top: -110px;
opacity: 1}</style>

wayward son

Меню навигации

Пользовательские ссылки

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

код

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

Поделиться12018-06-11 12:34:23

Поделиться22018-07-04 15:35:47