hr tag part 1

css
  1. HTML
  2. <hr class="hr-1">
  3. <hr class="hr-2">
  4. <hr class="hr-3">
  5. <hr class="hr-4">
  6. <hr class="hr-5">
  7. <hr class="hr-6">
  8. <hr class="hr-7">
  9. <hr class="hr-8">
  10. <hr class="hr-9">
  11. <hr class="hr-10">
  12.  
  13. CSS
  14. hr {
  15.   background-color: #fff;
  16.   padding: 0;
  17.   margin: 80px;
  18. }
  19.  
  20. hr.hr-1 {
  21.   border: 0;
  22.   height: 1px;
  23.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  24. }
  25.  
  26. hr.hr-2 {
  27.   border: 0;
  28.   border-bottom: 2px dashed #eee;
  29.   background: #999;
  30. }
  31.  
  32. hr.hr-3 {
  33.   border: 0;
  34.   height: 0;
  35.   border-top: 1px solid #8c8c8c;
  36. }
  37.  
  38. hr.hr-4 {
  39.   padding: 0;
  40.   border: none;
  41.   border-top: medium double #8c8c8c;
  42.   color: #8c8c8c;
  43.   text-align: center;
  44. }
  45.  
  46. hr.hr-4:after {
  47.   content: "§";
  48.   display: inline-block;
  49.   position: relative;
  50.   top: -0.7em;
  51.   font-size: 1.5em;
  52.   padding: 0 0.25em;
  53.   background: #fff;
  54. }
  55.  
  56. hr.hr-5 {
  57.   border: 0;
  58.   border-top: 3px double #8c8c8c;
  59. }
  60.  
  61. hr.hr-6 {
  62.   border: 0;
  63.   border-top: 2px dotted #8c8c8c;
  64. }
  65.  
  66. hr.line-7 {
  67.   border: 0;
  68.   background-color: #fff;
  69.   border-top: 1px dashed #8c8c8c;
  70. }
  71.  
  72. hr.hr-8 {
  73.   border: 0;
  74.   background-color: #fff;
  75.   border-top: 2px dotted #8c8c8c;
  76. }
  77.  
  78. hr.hr-9 {
  79.   border: 0;
  80.   border-top: 1px solid #8c8c8c;
  81.   border-bottom: 1px solid #fff;
  82. }
  83.  
  84. hr.hr-10 {
  85.   border: 0;
  86.   border-top: 1px solid #8c8c8c;
  87.   border-bottom: 1px solid #fff;
  88. }
  89.  
  90. hr.hr-10:after {
  91.   content: '';
  92.   display: block;
  93.   margin-top: 2px;
  94.   border-top: 1px solid #8c8c8c;
  95.   border-bottom: 1px solid #fff;
  96. }
Пример: http://codepen.io/Revivva/pen/gPLjGy?editors=110
Назад

Реклама

Мы в соцсетях

tw tg yt gt