Bookmark CSS




Explanation

In this article, I'll show an example of creating tabs in CSS. They behave like bookmarks Bootstrap. Link http://getbootstrap.com/javascript/#tabs

 

Feature

The principle of showing and hiding content bookmarks as in other examples, the site uses elements of input type="radio" and label, "tied" to these elements of the input. However, to comply with the HTML stream had to use a float.

Next, the sample code one bookmark and content to it.

  1. <input id="tab-1" type="radio" name="tabs" checked>
  2. <label for="tab-1" class="not-selectable">tab-1</label>
  3. <div class="tab-1">
  4. <div class="tab-content">
  5. <p>Lorem ipsum ...</p>
  6. </div>
  7. </div>

 

Bookmark

These are the elements label stylized buttons, with the change of style when changing state.

  1. #tabs > label {
  2. position: relative;
  3. display: inline-block;
  4. padding: 5px 10px 4px;
  5. border: 1px solid lightgray;
  6. border-bottom-color: transparent;
  7. border-radius: 5px 5px 0 0;
  8. margin-bottom: -1px;
  9. color: gray;
  10. background-color: pink;
  11. cursor: pointer;
  12. }
  13. #tabs > input:checked + label {
  14. padding-bottom: 5px;
  15. border-color: gray gray transparent gray;
  16. background-color: coral;
  17. color: black;
  18. cursor: default;
  19. z-index: 1;
  20. transition: background-color 1s,
  21. color 1s,
  22. border-color 1s;
  23. }

 

Content bookmarks

For them I made a gradient border. As for content added offset when displayed.

  1. #tabs > div {
  2. position: relative;
  3. height: 0;
  4. width: 100%;
  5. float: left;
  6. background: -moz-linear-gradient(top, rgba(132,132,132,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  7. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(132,132,132,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  8. background: -webkit-linear-gradient(top, rgba(132,132,132,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  9. background: -o-linear-gradient(top, rgba(132,132,132,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  10. background: -ms-linear-gradient(top, rgba(132,132,132,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
  11. background: linear-gradient(to bottom, rgba(132,132,132,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
  12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#848484', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
  13. opacity: 0;
  14. }
  15. #tabs > div:before {
  16. content: "";
  17. position: absolute;
  18. display: block;
  19. top: 1px;
  20. left: 1px;
  21. right: 1px;
  22. bottom: 1px;
  23. }
  24. #tabs > div > .tab-content {
  25. position: relative;
  26. padding: 10px;
  27. left: -10%;
  28. }
  29. #tabs > div:nth-of-type(2n) > .tab-content {
  30. left: 10%;
  31. }
  32. #tabs > input:checked + label + div {
  33. height: auto;
  34. opacity: 1;
  35. transition: opacity .5s;
  36. }
  37. #tabs > input:checked + label + div > .tab-content {
  38. opacity: 1;
  39. left: 0;
  40. transition: left .5s;
  41. }

 

Other CSS properties, see the DEMO.

Live demo
Download ZIP







Found comments - 0






Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result