• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать вертикальную форму ленты в CSS (Создание чистой вертикальной ленты с поддержкой CSS)
Создать вертикальную форму ленты в CSS
Kosten
Дата: Вторник, 2019-04-30, 02:32 | Сообщение 1
Администраторы
Сообщений:23402
Награды: 56


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

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



Основной HTML прост и понятен:

Код
    <div style="padding:38px 0;max-width:517px;margin: auto;">
  <div class="kugesating-ceranspagen">
   <span class="katusating-cerankin"></span>
   <div class="kugesating-ceranspagen-desamipob">
    <h3>ZorNet - портал для вебмастера</h3>
    <p>Здесь идет описание, которое можно задействовать в тематическом направление.</p>
   </div>
  </div>
</div>

CSS

Код
.kugesating-ceranspagen {
    background-color: #f5f5f5;
    border-radius: 3px;
    color: #565454;
    padding: 15px 15px 15px 75px;
    position: relative;
}

.kugesating-ceranspagen h3 {
    margin: 0 0 0.24em 0;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.3;
    color: #252323;
}

.kugesating-ceranspagen .kugesating-ceranspagen-desamipob p {
    margin: 0 0 1em;
}

.kugesating-ceranspagen .kugesating-ceranspagen-desamipob > p:last-child {
    margin-bottom: 0;
}

.kugesating-ceranspagen.kugesating-ceranspagen-desamipob p a {
    color: #399fd2;
}

.kugesating-ceranspagen .kugesating-ceranspagen-desamipob p a:hover {
    color: #3a3636;
}

.kugesating-ceranspagen .katusating-cerankin {
    display: inline-block;
    position: absolute;
    left: 17px;
    top: 37.5px;
}

.kugesating-ceranspagen .katusating-cerankin:before,
.kugesating-ceranspagen .katusating-cerankin:after {
    content: "";
    display: block;
    position: absolute;
    height: 10px;
    bottom: -8px;
    border: 18px solid #53b0de;    
}

.kugesating-ceranspagen .katusating-cerankin:before {
    border-bottom-color: transparent;
    bottom: -40px;
}

Углы создаются путем установки прозрачного border-bottom-color свойства :before селектора.

Демонстрация
Прикрепления: 3686426.png(12.6 Kb) · lenta.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать вертикальную форму ленты в CSS (Создание чистой вертикальной ленты с поддержкой CSS)
  • Страница 1 из 1
  • 1
Поиск: