Css

Здесь очень интересные и полезные вещи. Возвращайся к этому пригодится 100%

by akogch

HTML

<!-- рамка вокруг текста  -->
<div class="block one">внешняя рамка</div>
<div class="block two">тень</div>
<div class="block three">двойная рамка</div>
<div class="block for">before after</div>
<div class=block5>gradient</div>
<div class=block6>
  <p class=text>padding</p>
</div>

<!-- Эскиз -->
<div class="abc">Рабочий эскиз</div>

<!-- социальные связи -->
<div class="abcd"> <img src=http://htmlbook.ru/files/person1.jpg width="100%" heght="100%" title=person1>
  <div class="first cde" title=facebook><a class="fsb social" href=""></a></div>
  <div class="second cde" title=twetter><a class="twt social" href=""></a></div>
  <div class="third cde" title=vkontakte><a class="vkn social" href=""></a></div>
  <div class="fourth cde" title=mail><a class="mail social" href=""></a></div>
</div>
<div class="abcd"><img src=http://htmlbook.ru/files/person2.jpg width="100%" heght="100%" title=person2>
  <div class="third cde" title=vkontakte><a class="vkn social" href=""></a></div>
  <div class="fourth cde" title=mail><a class="mail social" href=""></a></div>
</div>
<div class="abcd"><img src=h ttp://htmlbook.ru/files/person3.jpg width="100%" heght="100%" title=person3>
  <div class="first cde" title=facebook><a class="fsb social" href=""></a></div>
  <div class="third cde" title=vkontakte><a class="vkn social" href=""></a></div>
  <div class="fourth cde" title=mail><a class="mail social" href=""></a></div>
</div>

CSS

@import "https://fonts.googleapis.com/css?family=Lobster";
@import "https://fonts.googleapis.com/css?family=Ruslan+Display";
/* Рамка вокруг текста */

.block {
  height: 30px;
  width: 150px;
  background: #f05258;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  font:
    16px/30px "Lobster",
    cursive;
  text-align: center;
}

.one {
  outline: 4px double #f05258;
}

.two {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 2px #f05258;
}

.three {
  border: 3px double #fff;
  margin: 7px;
}

.for:before {
  content: "";
  height: 32px;
  width: 152px;
  background: #fff;
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: -1;
}

.for:after {
  content: "";
  height: 34px;
  width: 154px;
  background: #f05258;
  position: absolute;
  left: -2px;
  top: -2px;
  z-index: -2;
}

.block5 {
  display: inline-block;
  margin: 8px;
  width: 154px;
  height: 35px;
  background: #f05258;
  background-image:
    linear-gradient(
      to right,
      #f05258 1.5px,
      transparent 1.5px,
      transparent 152.5px,
      #f05258 152.5px
    ),
    linear-gradient(
      to bottom,
      #f05258 1.5px,
      transparent 1.5px,
      transparent 33.5px,
      #f05258 33.5px
    ),
    linear-gradient(
      to right,
      transparent 1.5px,
      #fff 1.5px,
      #fff 2.5px,
      transparent 2.5px,
      transparent 151.5px,
      #fff 152.5px,
      #fff 152.5px,
      transparent 152.5px
    ),
    linear-gradient(
      to bottom,
      transparent 1.5px,
      #fff 1.5px,
      #fff 2.5px,
      transparent 2.5px,
      transparent 32.5px,
      #fff 32.5px,
      #fff 33.5px,
      transparent 33.5px
    );
  text-align: center;
  font:
    16px/35px "Lobster",
    cursive;
}

.block6 {
  display: inline-flex;
  border: 2px solid #f05258;
  width: 150px;
  height: 32px;
  background: #fff;
  margin: 0...