hr tag part 2

css
  1. HTML----------------
  2. <hr class="hr-11">
  3. <hr class="hr-12">
  4. <hr class="hr-13">
  5. <hr class="hr-14">
  6. <hr class="hr-15">
  7. <hr class="hr-16">
  8. <hr class="hr-17">
  9. <hr class="hr-18">
  10. <hr class="hr-19">
  11. CSS------------------
  12. hr {
  13.   background-color: #fff;
  14.   padding: 0;
  15.   margin: 80px;
  16. }
  17. hr.hr-11 {
  18.   border: 0;
  19.   border-top: 1px dashed #8c8c8c;
  20.   border-bottom: 1px dashed #fff;
  21. }
  22.  
  23. hr.hr-12 {
  24.   border: 0;
  25.   border-top: 1px dotted #8c8c8c;
  26.   border-bottom: 1px dotted #fff;
  27. }
  28.  
  29. hr.hr-13 {
  30.   height: 10px;
  31.   border: 0;
  32.   box-shadow: 0 10px 10px -10px #8c8c8c inset;
  33. }
  34.  
  35. hr.hr-14 {
  36.   border: 0;
  37.   height: 1px;
  38.   background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  39.   background-image: -moz-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  40.   background-image: -ms-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  41.   background-image: -o-linear-gradient(left, #f0f0f0, #8c8c8c, #f0f0f0);
  42. }
  43.  
  44. hr.hr-15 {
  45.   border: 0;
  46.   border-top: 4px double #8c8c8c;
  47.   text-align: center;
  48. }
  49.  
  50. hr.hr-15:after {
  51.   content: '\2665';
  52.   display: inline-block;
  53.   position: relative;
  54.   top: -15px;
  55.   padding: 0 10px;
  56.   background: #fff;
  57.   color: #8c8c8c;
  58.   font-size: 18px;
  59. }
  60.  
  61. hr.hr-16 {
  62.   border: 0;
  63.   border-top: 1px dashed #8c8c8c;
  64.   text-align: center;
  65. }
  66.  
  67. hr.hr-16:after {
  68.   content: '\002702';
  69.   display: inline-block;
  70.   position: relative;
  71.   top: -13px;
  72.   padding: 0 3px;
  73.   background: #fff;
  74.   color: #8c8c8c;
  75.   font-size: 18px;
  76. }
  77.  
  78. hr.hr-17 {
  79.   border: 0;
  80.   height: 0;
  81.   box-shadow: 0 0 10px 1px black;
  82. }
  83.  
  84. hr.hr-17:after {
  85.   content: "\00a0";
  86. }
  87.  
  88. hr.hr-18 {
  89.   background-color: #fff;
  90.   height: 30px;
  91.   border: 1px solid #8c8c8c;
  92.   border-radius: 20px;
  93. }
  94.  
  95. hr.hr-18:before {
  96.   display: block;
  97.   content: "";
  98.   height: 30px;
  99.   margin-top: -31px;
  100.   border: 0 solid #8c8c8c;
  101.   border-bottom-width: 1px;
  102.   border-radius: 20px;
  103. }
  104.  
  105. .hr-19 {
  106.   border: none;
  107.   height: 10px;
  108.   background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;
  109.   background-color: #fff;
  110.   background-position: left bottom;
  111.   background-repeat: repeat-x;
  112.   background-size: 10px 10px;
  113. }
Пример: http://codepen.io/Revivva/pen/gPLjGy?editors=110
Назад

Реклама

Мы в соцсетях

tw tg yt gt