ZorNet.Ru — сайт для вебмастера » HTML и CSS » Раскрывающиеся блок с скрытым текстом CSS

Раскрывающиеся блок с скрытым текстом CSS

Создавая тему, где иногда нужно скрыть информацию, чтоб по клику она показалась, что здесь отличный метод создан, который работает на CSS. Веб мастер при разработке сайта, и наполнение его контентом для пользователя, старается сделать все аккуратно и понятно. Но иногда, так бывает, что просто информации много, и здесь нужно ее скрыть, где при открытии страницы ее не было видно по умолчанию. Но чтоб была яркая запись или кнопка, которая извещала, что здесь скрыта какая-то информация по теме.

Но, во-первых, изначально место мало занимает, во вторых, как по мне, все это смотрится современно. Но главным плюсом идет, что вы скрыли, также видят поисковые роботы, что попадет или будет учитываться при ранжировании. Ранее такой вид можно было видеть, но он только работал на javascript, но теперь все намного легче.

Так как все можно производить на чистых стилях, где совершенно нет нагрузка на заданный материал. Сами записи можно заменить на кнопки, но и сменить тему, и что по тематике выставить, но главное подать подачу, что здесь есть по принадлежащему материалу. Форма сделана красиво и современно, которая может подойти на темный стиль интернет ресурса, также на светлый, что здесь уже настроен.

1. Здесь видим, что все скрыто, но главная, это надпись оповещение в зеленом оттенке.

Раскрывающийся блок с скрытым содержанием - HTML, CSS

Раскрывающийся блок с скрытым содержанием - HTML, CSS

2. Вот вся стилистика развернуто, где по всем сторонам красиво смотрится, также добавил обвод на 2 пикселя, и как можно заметить, что уже текст в алой палитре.

Приступаем к установке:

HTML

Код

<div class="komentas">

<input type="checkbox" id="bethosekom" class="gamutom-esoutasto"/>
<label for="bethosekom" >Раскрывающийся блок для HTML</label>
<div>Здесь ваше описание, что будет скрыто.</div>
<br/>
<br/>
<input type="checkbox" id="bethosekom-2" class="gamutom-esoutasto"/>
<label for="bethosekom-2">Раскрывающийся блок для CSS</label>
<div>Здесь ваше описание №2</div>

  </div>

CSS

Код

.gamutom-esoutasto, .gamutom-esoutasto + label ~ div {
  display: none;
}

.gamutom-esoutasto + label, .gamutom-esoutasto:checked + label {
  border-bottom: 1px dotted #04b904;
  padding: 0;
  color: #0d920d;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
}

.gamutom-esoutasto:checked + label {
  color: #f11a0e;
  border-bottom: 0;
}

.gamutom-esoutasto:checked + label + div {
  display: block;
  background: #e8e5e5;
  -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
  -webkit-box-shadow: inset 5px 5px 12px #929898;
  box-shadow: inset 4px 4px 9px #818688;
  padding: 8px;
  -webkit-animation: fadeIn ease-in 0.7s;
  -moz-animation: fadeIn ease-in 0.5s;
  animation: fadeIn ease-in 0.7s;
  border: 2px solid #cecbcb;
  border-radius: 3px;
}

@-moz-keyframes fadeIn {
  from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
  from { opacity: 0; }
to { opacity: 1 }
}

.komentas {
  width: 41%;
}

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

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

Демонстрация

15 Августа 2018 Просмотров: 6341 Комментариев: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: Kosten 15 Августа 2018 16:56¹ 0 Создавая тему, где начал подбирать изображение, то увидел похожею тему, только блок немного изменен по дизайн. Если здесь смена цвета, то там будет на кнопках показано. -SAM- 16 Августа 2018 08:23² +1 По факту уже выкладывалось (что в каталоге файлов, а что вот на форуме), но здесь идёт анимация на появление - в чём и отличие.