kingbach

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

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

Вы здесь » kingbach » Тестовый форум » bbbbbbb

bbbbbbb

Страница: 1

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

1

  • Автор: kingbach
  • Администратор
  • Зарегистрирован: 2016-04-09
  • Приглашений: 0
  • Сообщений: 16
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2017-03-25 14:10:41
Код:
<!--HTML-->
<style>
.hide,
.hide + label ~ div{
    display: none;
}
/* вид текста label */
.hide + label {
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-top: 10px;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "+";
    display: block;
    float: left;
    font-size: 12px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 0px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}
/* demo box position */
.demo {
    margin: 5% 10%;
}
</style>

<div class="demo">
    <input class="hide" id="hd-1" type="checkbox">
    <label for="hd-1">Нажмите здесь, чтобы прочитать больше о HTML!</label>
    <div>
        HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
    </div>
        <br/>
        <br/>
    <input class="hide" id="hd-2" type="checkbox">
    <label for="hd-2">Нажмите здесь, чтобы прочитать больше о CSS!</label>
    <div>
        CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
    </div>
</div>

0

2

  • Автор: kingbach
  • Администратор
  • Зарегистрирован: 2016-04-09
  • Приглашений: 0
  • Сообщений: 16
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 часов 17 минут
  • Последний визит:
    2017-03-25 14:10:41
Код:
<!--HTML-->
<style>
#image-expand div {
    float: left;
    position: relative;
}

#image-expand div .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 200px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 500;
} 

#image-expand div label {
    width: 100px;
    height: 200px;
    display: block;
    background: #f6f6f6;
    box-shadow: inset -25px 0px 30px -10px rgba(0,0,0,0.05);
    cursor: pointer;
    border-right: 1px solid #ddd;
    color: #222;
    overflow: hidden;
    position: relative;
    z-index: 1000; /* So its above everything */
}

#image-expand div label span {
    width: 140px;
    display: block;
    position: relative;
    top: 70px;
    font-family: 'Myriad Pro', Arial, sans-serif;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);

}
#image-expand input[type=radio] {
    opacity: 0; /* Make the radio button invisible. */
}

.content .read-more {
    position: absolute;
    bottom: 30px;
    right: 40px;
    text-decoration: none;
    padding: 10px 20px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    box-shadow:  0px 4px 6px #132732, 0px 4px 0px #1d3846, inset 0px 15px 30px -10px rgba(255,255,255,0.2);
    background: #4e96ba;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
}

.content .read-more:active {
    box-shadow: 0px 2px 0px #1d3846, inset 0px 15px 30px -10px rgba(255,255,255,0.2);
    bottom: 28px;
}
#image-expand .content, #image-expand label, #image-expand input { /* Transitions for fluidity */
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    -ms-transition: all 0.1s ease-in;
} 

#image-expand label:hover ~ input:checked + .content {
    width: 500px; /* When the user hovers on a checked item, override any CSS */
}

#image-expand label:hover ~ .content {
    width: 111px; /* The width of the content is increased when the user hovers */
}

#image-expand label:hover {
    margin-right: 10px; /* On hover expand a little bit, just to hint that the user can interact */
}
#image-expand input:checked {
    margin-right: 580px; /* When something is checked, ensure it's the full width by expanding the input */
}
</style>

<div id="image-expand">
    <div>
        <label for="button-1"><span>Some Title</span></label>
        <input id="button-1" name="button-set" type="radio" />
        <div class="content">
            <img src="1.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-2"><span>Another!</span></label>
        <input id="button-2" name="button-set" type="radio" checked />
        <div class="content">
            <img src="2.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-3"><span>News</span></label>
        <input id="button-3" name="button-set" type="radio" />
        <div class="content">
            <img src="3.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
    <div>
        <label for="button-4"><span>Tutorials</span></label>
        <input id="button-4" name="button-set" type="radio" />
        <div class="content">
            <img src="4.jpeg" alt="" />
            <a class="read-more" href="/">Read More</a>
        </div>
    </div>
</div>

0

Страница: 1

Вы здесь » kingbach » Тестовый форум » bbbbbbb

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