БЛОГ НА HUSL


Адаптивное решение логотипа на СSS без JS

Автор вопроса: Иван

Вопрос исключительно из спортивного интереса

Как решить проблему линий у логотипа без js.

calc() решает только в момент загрузки страницы, и не решает, когда окно меньше контейнера. https://jsfiddle.net/Konistra/bch3j0tv

1600px введите сюда описание изображения

1024px введите сюда описание изображения

$(window).on('resize load', function() {
  const winWidth = $(window).width();
  const conWidth = $('.container').width();
  $('#line1').attr('x2', (((winWidth - conWidth) / 2) + 5));
  $('#line2').attr('x1', (((winWidth - conWidth) / 2) + 128));
});
body {
  background-color: #555;
}

.container {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 13px;
}

.footer__logo {
  margin: 50px 0;
  width: 141px;
  img {
    width: 100%;
    height: 100%;
  }
}

.footer__logo-line {
  transform: translate(0px, -68px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="footer__logo">
    <img src="https://i.stack.imgur.com/b1DQM.png" alt="logo">
  </div>
</div>
<div class="footer__logo-line">
  <svg style="width:100%;height:4px;">
      <line id="line1" x1="0" y1="1" x2="0" y2="1" style="stroke: #fff;stroke-width: 4;"></line>
      <line id="line2" x1="0" y1="1" x2="100%" y2="1" style="stroke: #fff;stroke-width: 4;"></line>
    </svg>
</div>


Источник

Ответы (3 шт):

Автор решения: Михаил Камахин 

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.line {
  display: flex;
  align-items: center;
}

.line::before,
.line::after {
  content: '';
  position: static;
  display: block;
  width: 100%;
  height: 4px;
  background-color: red;
}

.line::before { /* управление левой линией */
  width: 10%;
}

.line__img { /* управление изображением */
  min-width: 100px;
  max-width: 100px;
  padding: 0 10px;
}


.line::after { /* управление правой линией */
  width: 100%;
}
<div class="line">
  <div class="line__img">
    <img src="https://www.flaticon.com/svg/static/icons/svg/3937/3937483.svg">
  </div>
</div>

→ Ссылка
Автор решения: zhurof 

*,*:before,*:after{
  box-sizing: border-box;
}
body {
  background-color: #555;
  margin: 0;
}

.container {
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;  
}

.footer{
  color: #ffffff;
  font-size: 13px;
  position: relative;
  padding: 50px 0 0;
}
.footer:before,
.footer:after{
  content: '';
  display: block;
  border-bottom: 4px solid;
  position: absolute;
  bottom: 0;
}
.footer:before{
  left: 0;
  width: calc(50% - (1200px - 30px) / 2 + 14px)
}
.footer:after{
  right: 0;
  width: calc(50% + (1200px - 30px) / 2 - 135px);
}

.footer__logo {
  display: inline-block;
  vertical-align: top;
  width: 141px; 
}
.footer__logo img {
  display: block;
  width: 100%;
}

/*если меняется контейнер, переопределяем ширины с учётом его новых размеров*/
@media(max-width: 1199px){
  .container{
    max-width: 992px;
  }
  .footer:before{
    width: calc(50% - (992px - 30px) / 2 + 14px)
  }
  .footer:after{
    width: calc(50% + (992px - 30px) / 2 - 135px);
  }
}

/*Если ширина контейнера становится равна ширине экрана*/
@media(max-width: 991px){
  .footer:before{
    width: 29px;
  }
  .footer:after{
    width: calc(100% - 150px);
  }
}
<div class="footer">
    <div class="container">
        <a href="/" class="footer__logo">
            <img src="https://i.stack.imgur.com/b1DQM.png" alt="" class="footer__logo">
        </a>        
    </div>
</div>

→ Ссылка
Автор решения: Alexandr_TT

Как прокомментировал @Grundy♦

а почему полностью не сделать эту часть с помощью svg?

Решение на SVG,

на мой взгляд действительно больше подходит для лого.
К тому же можно сделать анимацию, несколько украсить его.

.container {
width:100vw;
height:auto;
}

#logo {
fill:none;
stroke:white;
stroke-width:3;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
  <rect width="100%" height="100%" fill="#5474BD"/>
   
 <path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8">
       <animate attributeName="stroke-dashoffset" begin="0s" dur="5s" to="0" fill="freeze" />
</svg>
</div>

Анимация CSS

Добавляем второй path копию исходного path лого, для того, чтобы показать трассу движения. Можно обойтись и без него, дело вкуса.

Если нужна одноразовая анимация удалите infinite

body {
margin:0;
padding:0;
}
.container {
width:100vw;
height:auto;
}
#trace {
fill:none;
stroke:#858585;
stroke-width:3;
}
#logo {
fill:none;
stroke:white;
stroke-width:3;
stroke-dasharray:1821;
stroke-dashoffset:1821;
animation: draw 5s linear forwards  infinite;
} 

@keyframes draw {
to {stroke-dashoffset:0;}
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
  <rect width="100%" height="100%" fill="#5474BD"/>
  <path id="trace" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8"/>
 
 <path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8"/>
       
</svg>
</div>

Анимация SVG

Добавлена тень к лого, анимация повторяется с паузами между повторениями 1s

.container {
width:100vw;
height:auto;
}

#logo {
fill:none;
stroke:white;
stroke-width:3;
stroke-dasharray:1821;
stroke-dashoffset:1821;
filter:url(#shadow);
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 123" preserveAspectRatio="xMinYMin meet">
  
  <defs>
        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="6" dy="8" stdDeviation="4"/>
        </filter>
  </defs>
  <rect width="100%" height="100%" fill="#5474BD"/>
   
 <path id="logo" d="M2.4 95.5H127.4c0 0-5.7-4.1-7.6-7-2.5-3.9-3.8-8.7-4.1-13.3-0.3-5.2 0.1-10.8 2.6-15.4 2.7-5 7.3-9.2 12.4-11.8 4.6-2.4 10.1-3.1 15.3-2.9 3.4 0.2 9.8 2.9 9.8 2.9l5.4 3.6-5.4 7.3c0 0-5.2-3.4-8.2-3.9-4.3-0.8-9.1-0.8-13 1.2-3.7 1.9-6.6 5.5-8.2 9.4-1.7 4.2-2 9.2-0.9 13.6 0.9 3.6 3.1 7.1 6.1 9.4 2.8 2.2 6.5 3.1 10 3.3 4.2 0.2 8.6-0.8 12.4-2.7 3.2-1.6 8.2-7 8.2-7 0 0-1.4-9.3-0.6-13.9 0.7-4.1 2.2-8.1 4.5-11.5 2.5-3.6 6-6.8 10-8.8 4.3-2.2 9.4-3.1 14.2-3 3.2 0 6.4 0.9 9.4 2.1 2.4 1 6.7 3.9 6.7 3.9l-4.4 8c0 0-4.7-3.4-7.4-4.1-3-0.8-6.3-0.7-9.4 0-3.4 0.8-6.9 2.3-9.4 4.8-2.9 3-5 7.1-5.4 11.2-0.5 4.4 0.7 9.3 3.2 13 2.2 3.3 5.8 5.9 9.5 7.3 3.4 1.2 7.3 1 10.9 0.3 3.8-0.8 7.6-2.4 10.6-4.8 2.9-2.3 6.7-8.8 6.7-8.8V45.2l9.2-0.2-0.2 21.3 20-21.2h13l-24.8 25.1 22.4 25.1h24.5 10.5 1110.8">
       <animate id="an" attributeName="stroke-dashoffset" begin="0s;an.end+1s" dur="5s" to="0" fill="freeze" />
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.