CSS3 target

: 12.01.2014
: 
: bulatlab.ru

! :)

 

, CSS3 .   target. , CSS3, target, . - nth-of-type, .

 

, html-:

 

<!DOCTYPE html>
<html>
<head> 
</head> 
<body>
 <div class="main">

  <figure>
    <figcaption> 1</figcaption>
    <div>
      <ul>
         <li><a href="")> 1</a></li>
         <li><a href="")> 2</a></li>
         <li><a href="")> 3</a></li>
         <li><a href="")> 4</a></li>
       </ul>
    </div>
  </figure>

  <figure>
    <figcaption> 2</figcaption>
      <ul>
         <li><a href="")> 1</a></li>
         <li><a href="")> 2</a></li>
         <li><a href="")> 3</a></li>
         <li><a href="")> 4</a></li>
      </ul>
  </figure>

  <figure>
    <figcaption> 3</figcaption>
      <ul>
         <li><a href="")> 1</a></li>
         <li><a href="")> 2</a></li>
         <li><a href="")> 3</a></li>
         <li><a href="")> 4</a></li>
      </ul>
  </figure>
 
   <figure>
    <figcaption> 4</figcaption>
      <ul>
         <li><a href="")> 1</a></li>
         <li><a href="")> 2</a></li>
         <li><a href="")> 3</a></li>
         <li><a href="")> 4</a></li>
      </ul>
  </figure>
</div>
</body>
</html>

 

gigure figcaption ( ). , ).

 

head , , , ..

 

<style>
   
   .main { 
      height: calc(120px + 35px*4 + 1px*3); 
      overflow: hidden; box-shadow: 0 0 0 1px #808080 inset; 
      width:200px;
    } 
   
   .main > figure { 
      overflow: hidden; 
      margin: 0; 
      transition: 1s; 
   } 
   
   .main > figure ul{ list-style-type:none;}
   
   .main > figure:nth-of-type(1), .main:hover > figure:hover { 
      height: calc(120px + 35px + 1px); 
   } 
   
   .main > figure:nth-of-type(n+2), .main:hover > figure:not(:hover) { 
      height: calc(35px + 1px); 
   } 
   
   .main > figure:nth-of-type(n+3), .main:hover > figure:not(:hover) { 
      height: calc(35px + 1px); 
   } 
   
   .main > figure a{
      text-decoration: none;
      padding: 5px 5px;
      color:#777;
    }
   
   .main > figure a:hover{
      color:#444;
      text-decoration: underline;
   }
   
   .main > figure > figcaption { 
      overflow: hidden; 
      height: 35px; line-height: 35px; 
      border-bottom: 1px solid #808080; 
      text-indent: .5em; 
      color: rgb(200,200,200); 
      white-space: nowrap; 
      word-wrap: normal; 
      text-overflow: ellipsis; 
      cursor: pointer; 
      font-weight:bold;
      background: -moz-linear-gradient(#999999, #cccccc);
      background: -ms-linear-gradient(#999999, #cccccc);
      background: -o-linear-gradient(#999999, #cccccc);
      background: -webkit-linear-gradient(#999999, #cccccc);
      color:#000;   
   } 
  
 </style>

 

 

  

 

 

CSS3 target, !

 

!

 

 
: 1089
: 0
: (0)