• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать логотип в форме HTML с помощью CSS (HTML Shield Logo - Рисование с помощью HTML и CSS)
Создать логотип в форме HTML с помощью CSS
Kosten
Дата: Пятница, 2019-09-13, 23:05 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


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

Так получится:



Форма HTML состоит из 4 отдельных элементов div: двух прямоугольных треугольников по бокам, прямоугольника посередине с текстом и равнобедренного треугольника внизу.

Код
<a class="pajzs" href="http://zornet.ru/">
    <span class="Pajzs">
        <span class="PajzsLeft">
        </span>
        <span class="PajzsMiddle">
            HTML
        </span>
        <span class="PajzsRight">
        </span>
        <span class="PajzsBottom">
        </span>
    </span>
</a>

Код CSS использует чередование больших прозрачных и цветных границ для создания иллюзии треугольников:

Код
a.pajzs {
    width: 350px;
    font-family: Impact,Charcoal,sans-serif;
    height: 350px;
    display: block;
}
a.pajzs span{
    display: block;
}
.PajzsLeft {
    float: left;
    width: 0;
    border-left: 50px solid transparent;
    border-top: 300px solid #CE5937;
}
.PajzsMiddle {
    float: left;
    width: 250px;
    height: 230px;
    background-color: #CE5937;
    color: #FFF;
    text-align: center;
    padding-top: 70px;
    font-size: 80px;
}
.PajzsRight {
    float: left;
    width: 0;
    border-right: 50px solid transparent;
    border-top: 300px solid #CE5937;
}
.PajzsBottom {
    width: 0;
    height: 0;
    border-left: 125px solid transparent;
    border-right: 125px solid transparent;
    border-top: 50px solid #CE5937;
    clear: both;
    margin-left: 50px;
}

Вот такое интересное решение.

Демонстрация
Прикрепления: 1599690.png(36.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать логотип в форме HTML с помощью CSS (HTML Shield Logo - Рисование с помощью HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: