Lecaw

Учимся создавать Web-сайты

CSS target для Off-Screen дизайна / CSS checkbox

September 5, 2012
CSS
389hits
 
 

Я недавно видел презентацию Ryan Seddon об элементах дизайна, которые Вы можете создать с помощью css checkboxes. Это заставило меня задуматься о данном псевдо-селекторе, основанном на css target, а именно - как это можно применить для скрытия или раскрытия элементов, чтобы можно было использовать дополнительное пространство (на маленьких экранах). Я поставил себе задачу - воссоздать приложение iOS Message без применения JavaScript, но используя в полной мере селекторы и переходы CSS3.

ДЕМО

 

Простой пример

В следующем примере показано, как мы могли бы скрыть окно входа и навигации, вызывая их при необходимости.

HTML

<header id="hd">
<a href="#" class="logo">Company logo</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<a href="#">Log in</a>
<div id="login">
<fieldset>
<label for="username">Username:</label>
<input type="textbox" id="username">
<label for="password">Password:</label>
<input type="password" id="password">
<input type="submit" value="login"/>
<a href="#">Sign up</a>
</fieldset>
</div>
</header>
<div id="bd">
<section>
<p>
... lorem ipsum content ...
</p>
</section>
<a href="#">Internal navigation</a>
<nav id="auxNav">
<ul>
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Another link</a></li>
</ul>
</nav>
</div>

CSS

body { 
  position: relative; 
  max-width: 960px; 
  margin: 0 auto; 
}
#login { 
  position: absolute;
  top: -200px;
  right: 0;
  -webkit-transition: top 0.3s ease-in-out;
  -moz-transition:    top 0.3s ease-in-out;
  -ms-transition:     top 0.3s ease-in-out;
  -o-transition:      top 0.3s ease-in-out;
  transition:         top 0.3s ease-in-out;
}
#bd { 
  position: relative;
  overflow: hidden;
}
#auxNav {
  position: relative;
  overflow: hidden;
  height: 60px; 
}
#auxNav ul {
  position: absolute;
  left: -100%;
  -webkit-transition: left 0.3s ease-in-out;
  -moz-transition:    left 0.3s ease-in-out;
  -ms-transition:     left 0.3s ease-in-out;
  -o-transition:      left 0.3s ease-in-out;
  transition:         left 0.3s ease-in-out;
}
/* Ключевая часть */
#login:target { 
  top: 0;
}
#auxNav:target ul {
  left: 0;
}

После запуска навигации и входа, мы можем навести на них css target. Обратите внимание, как атрибут href "# auxNav" соответствует идентификатору nav, "auxNav".

AuxNav показывает, что нам не нужно скрывать ID элемента, чтобы скрыть любые его производные.

Приложение

Каждое сообщение ("screen") имеет свой ID и позицию на экране. Когда мы нажимаем на якорь ссылки, то изменяется URL css target. Селектор выбирает и показывает соответствующее место экрана.

Я использовал :checked - селектор переключения редактирования сообщения. Каждое сообщение в списке якоря разворачивалось в полную версию. Небольшая часть кода css target { left: 0; } необходима для того, чтобы вывести их в поле зрения.

Кнопка "delete" скроется, как только будет выбрана кнопка редактирования. Текст кнопки изменяется через содержание псевдо-элемента :before. Это сделать легче, чем создавать еще один элемент для изменения политики. Сообщение кнопки "delete" скрывает следующее сообщение в списке, когда проверится предыдущее.

Каждое сообщение было показано через селектор css target с левой стороны ( так как с правой стороной возникают проблемы). Использовались более сложные формирования цепочки checkboxes, чтобы двигаться в checkboxes по каждому выпадающему сообщению (немного изменяя его стили) и выставляя другой checkbox в основании, чтобы подтвердить удаление. Используя тот же самый метод как и прежде, сообщение было скрыто через:

:checked + div { display: none; }

(ДЕМО пример также работает на экране мобильного)

 

ДЕМО

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий