Пятница, 19 Октября 2012 15:12

Псевдокласс :target

Written by 
Оцени эту запись
(1 Голос)

В CSS3 появился псевдокласс :target, при помощи которого можна стилизировать элемент, у которого идентификатор равен целевому элементу, прописанному в адресной строке браузера. Например, для того, чтобы перейти на элемент с id="my_target" нужно прописать в строке браузера адрес sitename.com/page-adress#my_target. При этом можно задать нашему элементу стили при помощи 

:target {}

 

А для иллюстрации работы этого псевдокласса, рассмотрим пример создания стандартного аккордиона при помощи CSS (кликаем на заголовки):

 

 

Заголовок 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

Заголовок 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

Заголовок 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

Заголовок 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

Заголовок 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

Заголовок 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex

 

Здесь используется такая HTML разметка:

 

 

<div class="accordion">
<div id="h1">
  <h2><a href="#h1">Заголовок 1</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
<div id="h2">
  <h2><a href="#h2">Заголовок 2</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
<div id="h3">
  <h2><a href="#h3">Заголовок 3</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
<div id="h4">
  <h2><a href="#h4">Заголовок 4</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
<div id="h5">
  <h2><a href="#h5">Заголовок 5</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
<div id="h6">
  <h2><a href="#h6">Заголовок 6</a></h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tex</p>
</div>
</div>
 
Ключевые моменты разметки:
 
  • идентификатор блока h1
  • ссылка с адресом #h1
 
 
Теперь смотрим CSS:
 
 
<style>
.accordion {
width: 300px;
margin: 20px auto;
font-size: 12px;
}
.accordion h2 {
margin: 0;
padding: 0;
text-align: center;
background-image: linear-gradient(bottom, rgb(109,60,133) 0%, rgb(156,124,171) 100%);
background-image: -o-linear-gradient(bottom, rgb(109,60,133) 0%, rgb(156,124,171) 100%);
background-image: -moz-linear-gradient(bottom, rgb(109,60,133) 0%, rgb(156,124,171) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(109,60,133) 0%, rgb(156,124,171) 100%);
background-image: -ms-linear-gradient(bottom, rgb(109,60,133) 0%, rgb(156,124,171) 100%);
 
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(109,60,133)),
color-stop(1, rgb(156,124,171))
);
border: 1px solid #380e4d;
font-size: 14px;
}  
.accordion h2 a {
text-decoration: none;
text-shadow: 0px -1px 1px #9C7CAB;
color: #fff;
padding: 10px 0;
width: 100%;
display: block;
}
.accordion :target h2 + p {
height: 100px;
}
.accordion h2 + p {
height: 0px;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
border: 1px solid #380e4d;
border-top-color: transparent; 
padding: 0 20px;
font-family: Arial;
margin: 0;
line-height: 20px;
}
  </style>
 
 
Ключевые момент CSS:
 
 
.accordion h2 + p {                                   /* Стили для p в обычном состоянии*/
height: 0px;                                                /*Высота равна 0*/
overflow: hidden;                                      /* Скрываем контент, который выходит за размеры блока*/
-webkit-transition: height 0.3s ease-in;     /*Аннимированное изменения свойства height */
-moz-transition: height 0.3s ease-in;
}
 
 
 
.accordion :target h2 + p {                     /*Стили элемента при получении таргета*/
height: 100px;                                         /*Измененное значение высоты*/
}
 
 
 
 

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


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов