wwwoldi.ru

About Me

Dashy

Hello word I am dashy Guy

Разное

Html css спойлер: красивые плавные спойлеры через тег details (без JS)

alexxlab
No Comments

Содержание

Cпойлер средствами css… / Хабр

В предпраздничные дни выдалась минутка, захотелось отвлечься — окунуться в мир занятных идей, отстранясь от забот праздника. В итоге, — идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML.

Ранее в инете делались попытки реализовать подобное через псевдоклассы, — в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.

Основа данной конструкции — псевдокласс :checked

Минималистически идея выглядит так:
     /* CSS */
.spoiler >  input + .box {
	display: none;
}
.spoiler >  input:checked + .box {
	display: block;
}

<!--// HTML //-->
<div>

     <input type="checkbox" >
     <div>

           Текст сообщения в спойлере.

     </div>

</div>

Как видим получился кроссбраузерный код, начиная с ИЕ9, где уже есть псевдокласс «:checked» и кончая актуальными версиями остальных браузеров. Cогласно замыслу, — это «чистая» html-css реализация.

При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» реализации теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->

Под катом итоговый код «танцев c кроссбраузерностью» *тестировалось в ХP, Win7-8*

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cпойлер средствами css</title>

<style>
.spoiler >  input + .box > blockquote{
	display: none;
}
.spoiler >  input:checked + .box > blockquote {
	display: block;
}
.spoiler >  input[type="checkbox"] {
	cursor: pointer;
	border-color:transparent!important;
	border-style:none!important;
	background:transparent none!important;
	position:relative;z-index:1;
	margin:-10px 0 -30px -230px;
 }
.spoiler >  input[type="checkbox"]:focus {
	outline:none;	/* Убираем обводку в ИЕ8 при "фокусе" */
}
.spoiler span.close,
.spoiler span.open{
	padding-left:22px;
	color: #00f!important;
	text-decoration: underline;
}
.spoiler >  input +  .box > span.close {
	display: none;
}
.spoiler >  input:checked +  .box > span.close {
	background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat;
	display: inline;
}
.spoiler >  input:checked  + .box > span.open {
	display: none;
}
.spoiler >  input +  .box >  span.open {
	background: url(http://st0.bbcorp.ru/img/plus.png) 4px  60% no-repeat;
	display: inline;
}
.spoiler blockquote,
.spoiler{
    padding:1em;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
}
.spoiler {
    overflow-x:hidden;
    box-shadow: 0px 3px 8px #808080;
    border:#E5E5E5 solid 2px;
    -webkit-box-shadow:0px 3px 8px #808080;
    -khtml-box-shadow:0px 3px 8px #808080;
    -moz-box-shadow:0px 3px 8px #808080;
    -ms-box-shadow:0px 3px 8px #808080;
}
.spoiler blockquote {
   margin-top:12px;
   min-height: 23px;
   border:#CDCDCD 2px dashed;
}
</style>

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
</head>

<body>
           <div>


<div>

<!--* Добавлен tabindex="-1" для снятия фокуса при переходе по "tab" -->
<input type="checkbox" tabindex="-1" >
     <div>
         <span class=close>Скрыть</span><span class=open>Показать</span>
         <blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </blockquote>
     </div>

 </div>

          </div>
</body>
</html>
Минусы:

В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;// fixed (подсказка от fcunited )
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не ставили себе задачу поддержку данных Ие в изначальных замыслах.

DEMO

PS: Код позволяет просматривать контент спойлера при отключённом java-script, — что востребовано при серфе со старых мобильников, анонимайзеров или с жестко-настроенных фаерволов.

Хочу выразить признательность Octane с javascript.ru форума и devote, без которых идея не могла быть реализованной.

Спойлер для сайта на CSS

104

291

Ранее мы уже рассмотрели два способа, позволяющих Вам создать на своем сайте спойлеры для показа и скрытия
объемных материалов: Создаем свой собственный спойлер для сайта
и Собственный спойлер с плавным открытием и скрытием содержимого.

Теперь мы хотим предложить Вам еще один вариант создания спойлера, основным отличием которого от рассмотренных
ранее является использование только CSS. Напомним, что в двух предыдущих способах необходимо было
подключать внешнюю библиотеку jQuery.

Для наглядного примера работы предлагаемого нами скрипта спойлера на CSS, обратите внимание на пару спойлеров, находящихся ниже:

Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было «Открыть-Закрыть».

Закрыть

Нужно знать, как и что делать, чтобы текст появился под спойлером, а в заголовке спойлера было «Открыть-Закрыть».

Закрыть

Для получения точно таких же спойлеров на CSS, как в примере, показанном выше, для начала необходимо добавить CSS код:

HTML код:

<style type="text/css">
 .spoiler_desc {
    background: #333333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
 }
 .spoiler_desc p {
    cursor: text;
    color: #FFFFFF;
 }
 .spoiler_close {
    display: none;
    width: 100%;
    height: 22px;
    background: #FFFF66;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000000;
    position: absolute;
    top: 0;
    left: 0;
 }
 .spoiler_close:hover { background: #F5FF27; }
 .spoiler_open:before {
    content: 'Открыть';
    border-bottom: 1px dotted #000000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FFFF66;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
 }
 .spoiler_open:hover:before { background: #F5FF27; }
 .spoiler_open {
    margin: 5px 0 0 15px;
    height: 23px;
    width: 240px;
    outline: none;
    float: left;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
 }
 .spoiler_open:focus { height: 122px; }
 .spoiler_open:focus .spoiler_close { display: block; }
 .spoiler_open:focus:before { display: none; }
</style>

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

HTML код:

<div class="spoiler_open" tabindex="1">
 <div class="spoiler_desc">
  <p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
  а в заголовке спойлера было "Открыть-Закрыть".</p>
 </div>
 <span tabindex="0" class="spoiler_close">Закрыть</span>
</div>

<

div class="spoiler_open" tabindex="2">
 <div class="spoiler_desc">
  <p>Нужно знать, как и что делать, чтобы текст появился под спойлером,
  а в заголовке спойлера было "Открыть-Закрыть".</p>
 </div>
 <span tabindex="0" class="spoiler_close">Закрыть</span>
</div>

Если Вам необходимо сделать спойлеры, высота которых будет подстраиваться по содержимому, то
стиль .spoiler_open:focus { height: 122px; } замените на .spoiler_open:focus { height: auto; }.
Но, в таком случае пропадет эффект плавного открытия.

Если Вы не хотите оставлять под спойлерами пустое пространство, и чтобы текст не обтекал спойлер справа, то
добавьте после спойлеров <div></div>.

Как видите, вполне неплохие спойлеры можно создавать и на CSS без использования JavaScript кода, что
позволяет значительно увеличить скорость загрузки сайта, т.к. не приходится подгружать библиотеку jQuery.

Дата создания: 20:43:58 27.03.2013 г.

Дата обновления: 20:15:33 25.10.2014 г.

Посещений: 27658 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Стильные спойлеры на CSS3 и jQuery — Уникальные скрипты и готовые решения для сайта

.wrapper {

width: 820px;

margin: 10px;

padding: 0;

}

 

.wrapper > li {

display: inline;

margin: 0;

}

 

.info-box-green, .info-box-red, .info-box-sky {

margin: 50px auto;

padding: 0;

width: 480px;

-webkit-box-shadow: 0 8px 6px -6px black;

-moz-box-shadow: 0 8px 6px -6px black;

box-shadow: 0 8px 6px -6px black;

}

 

.info-box-red h5 {

-webkit-border-radius: 10px;

border-radius: 10px;

margin-bottom: -10px;

}

 

.info-box-red > .info-content > .text {

-webkit-border-radius: 0 0 10px 10px;

border-radius: 0 0 10px 10px;

}

 

.info-box-green h5, .info-box-green > .info-content > .text {

background-color: #00AB83;

}

 

.info-box-red h5, .info-box-red > .info-content > .text {

background-color: #FF434C;

}

 

.info-box-sky h5, .info-box-sky > .info-content > .text {

background-color: #00A5C3;

}

 

.info-box-green h5, .info-box-red h5, .info-box-sky h5 {

padding: 25px;

font-size: 1.125em;

font-weight: 400;

color: #FFF;

}

 

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {

padding: 0px;

font-size: 1em;

line-height: 1.5em;

height: 0;

color: #FFF;

overflow: hidden;

-webkit-transition:  height 200ms ease;  

-moz-transition:  height 200ms ease;  

-o-transition:  height 200ms ease;  

transition:  height 200ms ease;

}

 

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {

padding: 20px 20px 60px;

}

 

.info-box-sky > .info-content > .text {

background-color: #FFF;

color: #444;

border-radius: 0;

}

 

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {

display: block;

height: auto;

}

 

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {

-webkit-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

-ms-transform:rotate(135deg);

}

 

.info-box-green span, .info-box-red span, .info-box-sky span {

display: inline-block;

float: right;

position: relative;

bottom: 60px;

right: 10px;

margin: 0;

padding: 10px;

color: #FFF;

font-size: 2em;

cursor: pointer;

/*  Rotate ‘+’ to ‘X’ */

-webkit-transition: all 600ms ease-in-out;

-moz-transition: all 600ms ease-in-out;

-o-transition: all 600ms ease-in-out;

-ms-transition: all 600ms ease-in-out;

transition: all 600ms ease-in-out;

}

 

.info-box-sky > .info-content > span.close-sky {

color: #444;

}

 

.info-box-red span {

position: relative;

bottom: 50px;

right: 10px;

}

Простой спойлер на HTML и CSS

Простой спойлер на чистом HTML и CSS. Логика работы неявна – но работает, хотя и есть нюансы.

Особенности:

  • Требует наличия подключенного файла css – причем сам файл при этом может быть пустым
  • Требует определения классов элементов (см. код) – при этом классы могут быть не определены
  • При нескольких спойлерах наименования классов элементов должны совпадать
  • Допускается вложенность, без ограничений – при этом должны соблюдаться моменты, описанные выше
  • Закрытие/открытие происходит по клику – при перезагрузке страницы, даже после очистки кэша, спойлер остается в последнем положении
  • Закрывающий/открывающий элемент может быть любой – картинка, кнопка (<button>Спойлер</button>), теги span, div. При этом button должно быть без class; при отсутствии class в div или span будет элемент в виде текста

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Простой спойлер на HTML и CSS</title>

Между <body></body>:

<h2>Простой спойлер на HTML и CSS</h2>

<div>
    <label>
        <input type="checkbox"/>
    <button>Первый спойлер - button</button>
        <div>
        Первый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <div>Второй спойлер - div</div>
        <div>
        Второй спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <span>Третий спойлер - span</span>
        <div>
        Третий спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <img src="spoiler.jpg" alt="Спойлер" title="Спойлер">
        <div>
        Четвертый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

Cпойлер средствами css…

В предпраздничные дни выдаётся минутка, когда отвлекаясь от забот, хочется окунуться в собственный мир идей, отстраняясь от предстоящего праздника…
В итоге, — идея: Cмастерить спойлер посредством css и HTML, не дожидаясь триумфального шествия HTML5. Выражаю благодарность Octane с javascript.ru форума и devote, без которых идея не осуществилась!

Ранее исследованные попытки в инете делались через псевдоклассы, в основном через :focus, что вело к самоскрытию контейнера, при потере фокуса.
Основа же данной идеи псевдокласс :checked

Мистический код идеи таков:
     /* CSS */
.spoiler >  input + .box {
	display: none;
}
.spoiler >  input:checked + .box {
	display: block;
}

<!--// HTML //-->
<div>

     <input type="checkbox" >
     <div>

           Текст сообщения в спойлере.

     </div>

</div>

Как видим получился кроссбраузерный код, (начиная с ИЕ9/где уже есть этот псевдокласс/ и кончая актуальными версиями остальных браузеров). Cогласно замыслу, — это был «чистый» код!

При попытках расширить действие на ИЕ6-8, (тут, как обычно для ие,- «чистота» эксперимента теряется), и мы подключаем гугловскую библиотеку псевдоклассов для ИЕ:

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->

Под катом итоговый код «танцев c кроссбраузерностью»

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Cпойлер средствами css</title>

<style>
.spoiler >  input + .box > blockquote{
	display: none;
}
.spoiler >  input:checked + .box > blockquote {
	display: block;
}
.spoiler >  input[type="checkbox"] {
	border-color:transparent!important;
	border-style:none!important;
	background:transparent none!important;
	position:relative;z-index:1;
	margin:-10px 0 -30px -230px;
 }
.spoiler span.close,
.spoiler span.open{
	padding-left:22px;
	color: #00f!important;
	text-decoration: underline;
}
.spoiler >  input +  .box > span.close {
	display: none;
}
.spoiler >  input:checked +  .box > span.close {
	background: url(https://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat;
	display: inline;
}
.spoiler >  input:checked  + .box > span.open {
	display: none;
}
.spoiler >  input +  .box >  span.open {
	background: url(https://st0.bbcorp.ru/img/plus.png) 4px  60% no-repeat;
	display: inline;
}
.spoiler blockquote,
.spoiler{
    padding:1em;
    border-radius:15px;
    -webkit-border-radius:15px;
    -khtml-border-radius:15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -ms-border-radius:15px;
}
.spoiler {
    overflow-x:hidden;
    box-shadow: 0px 3px 8px #808080;
    border:#E5E5E5 solid 2px;
    -webkit-box-shadow:0px 3px 8px #808080;
    -khtml-box-shadow:0px 3px 8px #808080;
    -moz-box-shadow:0px 3px 8px #808080;
    -ms-box-shadow:0px 3px 8px #808080;
}
.spoiler blockquote {
   margin-top:12px;
   min-height: 23px;
   border:#CDCDCD 2px dashed;
}
</style>

<!-- Compliance patch for Microsoft browsers -->
 <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
</head>

<body><div>


<div>

<input type="checkbox" >
     <div>
         <span class=close>Скрыть</span><span class=open>Показать</span>
         <blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </blockquote>
     </div>

 </div>


</body>
</html>
Минусы:

В ИЕ8 — наличествует пунктирная обводка чекит-бокса при фокусе;
в ИЕ6-7 — чекит панель «винтажно» выдвинута левее спойлера; (Но мы и не утомляли себя задачей поддержки этих ие в начальных замыслах.

DEMO

Автор: Defff

Источник

Создаем свой собственный спойлер для сайта

147

544

Предлагаем Вам совсем простой и небольшой по своему размеру JavaScript код, который позволит Вам
использовать на своем сайте спойлеры для показа/скрытия объемных материалов.

Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на спойлер, находящееся чуть ниже:

Спойлер (кликните для показа/скрытия)

Здесь содержится все то, что должен скрывать спойлер.
Под спойлером может содержаться не только текст, но и картинки,
таблицы и другие элементы.

Для получения точно такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код:

JavaScript код:

<script type="text/javascript">
function open_close(id_spol) {
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (

obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
</script>

Далее, в том месте Вашей странички, где Вы планируете использовать спойлер, необходимо добавить следующий код:

HTML код:

<div class="spoiler_style" onClick="open_close('spoiler1')">
 <b>Спойлер</b> (кликните для показа/скрытия)
</div>
<div id="spoiler1" class="spoiler_body" style="display: none;">
 Здесь содержится все то, что должен скрывать спойлер.<br>
 Под спойлером может содержаться не только текст, но и картинки,<br>
 таблицы и другие элементы.<br>
 <img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</div>

Вместо текстовой надписи «Спойлер (кликните для показа/скрытия)» можно использовать какую-нибудь картинку:

HTML код:

<div class="spoiler_style" onClick="open_close('spoiler1')">
 <img src="image/spoiler.png" alt="Изображение спойлера" width="200">
</div>
<div id="spoiler1" class="spoiler_body" style="display: none;">
 Здесь содержится все то, что должен скрывать спойлер.<br>
 Под спойлером может содержаться не только текст, но и картинки,<br>
 таблицы и другие элементы.<br>
 <img src="image/img_1.png" alt="Изображение под спойлером" width="250">
</div>

Так же не забываем добавить стили для наших спойлеров. Для этого добавьте следующий код в шапку
сайта между тегами <head> и </head>.

HTML код:

<style type="text/css">
 .spoiler_style {
     width: 300px;
     padding: 1px 7px;
    cursor: pointer;
    background: #e7e7e7;
    border: 1px solid #4874a3;
    border-radius: 3px;
 }
 .spoiler_body {
    width: 480px;
    padding: 1px 7px;
    display: none;
    background: #F7F7F7;
    border: 1px solid #669966;
 }
</style>

Вот и все. В результате использования данного скрипта у Вас должен получиться простой спойлер, который поможет Вам
сэкономить немало места на сайте и сконцентрировать внимание Ваших посетителей на самом главном.

Дата создания: 15:02:37 06.11.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 33731 раз(а).

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

CSS и HTML только выпадающий спойлер

Переполнение стека

  1. Около

  2. Продукты

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. Вакансии
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. Реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

.

Контент-спойлер с простой анимацией

Вот небольшой код спойлера, который можно использовать, чтобы скрыть часть содержимого вашего блога. Вы можете использовать его в сообщениях, на страницах, в виджетах или где угодно. Этот спойлер добавляет несколько улучшений к нашему предыдущему спойлеру, например:

  • Текст кнопки изменяется в зависимости от состояния спойлера — «Показать» в скрытом состоянии и «Скрыть» в состоянии отображения.
  • Анимированные действия разворачивания и сворачивания, достигаемые с помощью переходов CSS3. Однако анимация не будет работать в Internet Explorer.
  • Позволяет размещать несколько спойлеров на одной странице без присвоения им уникальных идентификаторов.

Посмотрите это в действии, протестируйте демо ниже:

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat.

Этот простой контентный спойлер a.ka. Показать / скрыть код, также известный как peek-a-boo, использует только небольшой CSS, HTML и встроенный Javascript.Анимации отображения и скрытия достигаются с помощью CSS3 Transition. Он скрывает текст, изображения и т. Д. И должен работать в большинстве браузеров, за исключением Internet Explorer.

Этот спойлер состоит из двух частей -CSS и HTML.

I) CSS

Если вы планируете регулярно использовать этот спойлер, я предлагаю вам поместить эти правила CSS в свой шаблон непосредственно перед тегом . Если это разовая вещь, просто поместите ее в свой пост вместе с HTML-частью спойлера.
II) HTML

Эта часть находится там, где вы хотите, чтобы спойлер появлялся — в виджете, если вы хотите, чтобы это было на боковой панели или в HTML вашего сообщения, если вы хотите скрыть часть сообщения:

 

 

РАЗМЕСТИТЕ СОДЕРЖАНИЕ, которое вы хотите скрыть здесь

Просто поместите контент, который вы хотите скрыть, в тег div, как указано выше.

III) Настройка

Спойлер выше в самой простой форме.

  • Вы можете заменить «Показать» и «Скрыть» текст своим собственным. Просто замените слово как в HTML (строка 1), так и в CSS (строка 6 и / или 7).
  • Для нескольких спойлеров все, что вам нужно сделать, это продублировать часть HTML. Добавляйте сколько угодно, они будут работать независимо друг от друга.
  • Вы можете изменить скорость анимации, изменив продолжительность (в секундах) в строке 5 CSS.

Наслаждайтесь!

.

30 HTML и CSS

Коллекция бесплатных HTML

&

с примерами кода CSS (с небольшим JS). Обновление июньской коллекции 2019 года. 5 новинок.

  1. Аккордеоны CSS
  2. jQuery Accordions
  3. React Аккордеоны
О коде

TreeView Подробности / сводка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: ionicons.css

Автор
  • Гарет МакКинли
О коде

Выпадающее меню на чистом CSS

Выпадающее меню

на чистом CSS с подробностями и сводкой .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Фредерик Аллен
О коде

Только HTML Аккордеон

Изучение стиля HTML подробно описывает теги и summary для создания функционального аккордеона без использования JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Детали Элемент

- это элемент HTML с настраиваемой стрелкой в ​​SVG, без JavaScript.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Mert Cukuren
О коде

Анимированные Детали Элемент

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор
  • Тони Бэник
Сделано с
  • HTML (Мопс) / CSS (SCSS) / JS
О коде

Панель результатов модульного тестирования

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор
  • Джеймс Штайнбах
О коде

Подробности Пример элементов

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

HTML5 Подробная информация и сводка

подробности работает как аккордеон, но без скриптов, поддерживаемых большинством основных браузеров (кроме IE и Edge).

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Детали / Резюме Анимированный аккордеон

Вы можете использовать это без JS, и он отлично работает, за исключением анимации закрытия.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: jquery.js, шрифт-awesome.js

Автор
  • Джессика Паоли
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

HTML <подробности> и <резюме>

HTML <подробности> и <резюме> : шутки плохих детей.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js, jquery.color.js

О коде

HTML5 Подробности и Сводка Дерево файлов

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: bootstrap.css

Автор
  • Халида Астатин
Сделано с
  • HTML / CSS (Меньше) / JavaScript
О коде

Подробная информация и сводка

Экспериментируйте с подробностями и сводкой HTML-тегов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

Автор
  • Лина Лаванья
О коде

<подробности> и <резюме>: Выбор номера в отеле

Щелкните один, и остальные закроются.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: jquery.js

О коде

Подробности + Резюме

и

с чистым CSS. Не поддерживаются браузеры IE и Edge.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Спойлер с <подробностями> и <резюме>

Использование

и

для скрытия / раскрытия спойлеров.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Рецепт с <подробностями> и <резюме>

Использование

и

для создания рецепта энчилад.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Питер Бисеманс
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Репозиторий фрагментов кода

Репозиторий фрагментов кода с HTML

&

.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: darcula.css, highlight.js, scss.js, list.js,

О коде

Подробная информация и сводка

Часто задаваемые вопросы с HTML подробности и сводные теги .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: tailwind.css

О коде

Подробная информация и сводка

Пример кода с подробностями HTML и сводными тегами .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Моника Уиллер
О коде

Подробности и сводка

HTML макет часто задаваемых вопросов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

О коде

Адаптивная веб-страница с разделенным экраном

Адаптивная веб-страница в стиле «Разделенный экран» с использованием только CSS. Сделано с использованием HTML

и

. Попробуйте на маленьком экране.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Аллистэр Ли
О коде

Подробная информация в формате HTML и сводка

Простой шаблон часто задаваемых вопросов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: bootstrap.css, font-awesome.css

Автор
  • Винсент Данна
О коде

<подробности> и <резюме>

Простой пример с деталями HTML и примерами .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Сделано с
  • HTML (Haml) / CSS (Sass) / JavaScript (Babel)
О коде

<подробности> и <резюме>

Быстрый и грязный набросок из деталей Гармошка.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Янелы Рамирес
О коде

Назначения списка ведра

Еще один пример с подробностями HTML и сводными тегами .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Свойства цифровой монополии

Идея для использования тегов details и summary .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Подробное описание жизни

Подробное описание жизни с <детали> и <резюме> .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: bootstrap.css, font-awesome.css

Автор
  • Кейт Пикеринг
Сделано с
  • HTML / CSS (SCSS) / JavaScript
О коде

Изящно унизительный <подробности> Аккордеон

Элемент details обеспечивает очень простую и доступную реализацию аккордеона, одного из наиболее распространенных компонентов пользовательского интерфейса.Проблема в том, что функциональность по умолчанию совсем не гладкая. Здесь я попытался решить эту проблему с помощью красивого класса ES6, который расширяет функциональность элемента без нарушения доступности.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Функция переключения и плавная прокрутка Чистый HTML и CSS

Макет сетки + детали и сводка + поведение прокрутки.Все на чистом CSS3.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Элиор Табека
О коде

Анимированный компонент свертывания / расходования

Свернуть / расходовать с HTML подробности и сводки .

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

.

No related posts.

Share :

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *