• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как скрывать div вверх и вниз с помощью CSS (Это простое скрытие страницы созданный с помощью CSS3)
Как скрывать div вверх и вниз с помощью CSS
Kosten
Дата: Вторник, 2019-03-05, 14:57 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


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

Также считается эффективным действием, ведь не требуют JavaScript инфраструктуры для управления. Есть один эффект, где выстроен на чистом CSS, где как раз содержится функция, которая отвечает за поднятие страницы вверх и вниз, где изначально содержимое скрыто.

По умолчанию закрытый элемент:



После клика открытый элемент с информацией:



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

HTML

Код
<input type="checkbox" name="ganumeduko-pasxogted" id="ganumeduko-pasxogted" />
<label for="ganumeduko-pasxogted"></label>
<div class="gaxaserunikmed">
<h1>ZorNet - портал для вебмастера</h1>
  <h2> Интересные решения для вебмастера в создание и продвижение сайтов</h2>
</div>

<div class="message"><h1>Как проверить мобильность вашего сайта</h1>
<h2>описание</h2>
</div>


CSS

Код
h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#888;
  padding:5px 0;
}

.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

.message h1 {
  color:#FFF;
}

#ganumeduko-pasxogted {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;
}

#ganumeduko-pasxogted + label {
    position: absolute;
    cursor: pointer;
    padding: 10px;
    background: #155d4d;
    width: 100px;
    border-radius: 85px;
    padding: 8px 10px;
    color: #e0d4d4;
    line-height: 20px;
    font-size: 12px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    margin: 20px 50px;
    transition: all 500ms ease;
}
#ganumeduko-pasxogted + label:after {
  content:"Открыть"
}

.gaxaserunikmed {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
}

#ganumeduko-pasxogted:checked ~ .message {
  top: 0;
}

#ganumeduko-pasxogted:checked ~ .gaxaserunikmed {
  margin-top: 250px;
}

#ganumeduko-pasxogted:checked + label {
  background:#dd6149;
}

#ganumeduko-pasxogted:checked + label:after {
  content:"Открыть"
}

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

Демонстрация
Прикрепления: 5961093.png(16.2 Kb) · 1636394.png(29.7 Kb) · toggle.zip(3.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как скрывать div вверх и вниз с помощью CSS (Это простое скрытие страницы созданный с помощью CSS3)
  • Страница 1 из 1
  • 1
Поиск: