ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые стили контура на CSS + HTML

Красивые стили контура на CSS + HTML

Давайте рассмотрим, как создать различные типы стилей для контура, используя CSS3 и HTML в создание девяти совершенно разных видов для блоков. Многие знают в общих чертах, что контур является типом границы, но разница между ними заключается в том, что граница является частью элемента, а вот контур нет. И здесь задействуем специальную схему, чтобы придать стилю элемента оригинальное строение.

В этой статье научимся создавать 9 различных типов стиля контура, где будет полезно для дизайнера или новичок в области веб-сайтов. Так как существует 9 типов стилей, таких как авто, двойная линия, канавка, гребень и многие другие. Здесь попробуем собрать все стили контура в окне на основе HTML, что аналогично можно выстроить, так где вам угодно.

Есть много удивительных очертаний, где при видя которых вы будете шокированы, если увидите их впервые. Вы можете использовать эти эффекты на элементах веб-страницы, таких, как карточки, коробки, и другие компоненты. Так как существует много стилей структуры, которые мы можем создать, используя HTML и CSS.

Как пример, что в статье предоставлен:

Приступаем к установке:

HTML

Код

<div class="logesaceg">
  <div class="nasuved">
  <div class="boxes auto-stili-kontura"></div>
  <code>auto : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes double-stili-kontura"></div>
  <code>double : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes groove-stili-kontura"></div>
  <code>groove : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes ridge-stili-kontura"></div>
  <code>ridge : outline</code>
  </div>
  <div class="box">
  <div class="boxes dashed-stili-kontura"></div>
  <code>dashed : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes dotted-1-stili-kontura"></div>
  <code>dotted : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes dotted-2-stili-kontura"></div>
  <code>dotted 2 : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes outset-stili-kontura"></div>
  <code>outset : outline</code>
  </div>
  <div class="nasuved">
  <div class="boxes inset-stili-kontura"></div>
  <code>inset : outline</code>
  </div>
</div>

CSS

Код

.logesaceg {
  display: grid;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  text-align: center;
}
.nasuved {
  margin-bottom: 50px;
}
.boxes {
  margin: 40px auto;
  width: 180px;
  height: 180px;
}
code {
  background-color: #dedede;
  padding: 4px 6px;
  border-radius: 3px;
}
.auto-stili-kontura {
  background-color: #1888a0;
  outline: 50px auto #91dcec;
}
.double-stili-kontura {
  background-color: #e81132;
  outline: 14px double white;
  outline-offset: -20px;
}
.groove-stili-kontura {
  background-color: #e2423f;
  outline: 14px groove #1a985c;
  outline-offset: -15px;
}
.ridge-stili-kontura {
  background-color: #e83f52;
  outline: 14px ridge #ce0f2c;
  outline-offset: -14px;
}
.dotted-1-stili-kontura {
  background-color: #4cbb4c;
  outline: 24px dotted white;
  outline-offset: -12px;
}
.dotted-2-stili-kontura {
  background-color: #e84845;
  outline: 40px dotted white;
  outline-offset: -18px;
}
.dashed-stili-kontura {
  background-color: #3058ab;
  outline: 22px dashed white;
  outline-offset: -12px;
}
.outset-stili-kontura {
  background-color: smokewhite;
  outline: 24px outset#136ac7;
  outline-offset: -24px;
}
.inset-stili-kontura {
  background-color: smokewhite;
  outline: 24px inset #da7910;
  outline-offset: -24px;
}

Давайте с начало создадим 9 коробок, где ширина идет 180px по ширине и высотой, где также задействуем маржу на 40 пикселей сверху. Все идет для адаптивного дизайна используются display: grid; - где некоторые другие свойства, связанные с сеткой.

Демонстрация

Есть несколько команд в свойстве структуры для создания различных типов контуров:

- auto
- double
- groove
- ridge
- dotted
- dashed
- outset
- inset

Все это является контурным значением для создания другого эффекта, где также используются наброски смещения свойства. Ведь контур смещения задает объесть пространства между контуром и краем или границей элемента. В этом и заключается вся концепция, которую вы легко поймете, оставив другие вещи после получения кодов.

Если вы сейчас думаете о том, каковы на самом деле эти эффекты, то посмотрите предварительный просмотр ниже.

Контур CSS, это свойство стиля, которое помогает вам выделить некоторую информацию или элемент дизайна в контенте вашего сайта.

Существует множество стилей контуров, которые выделяют ваш контент. Научиться использовать их очень важно, если вы хотите создавать аккуратные и профессионально выглядящие сайты.

06 Августа 2019 Загрузок: 1 Просмотров: 1591 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0