HTML/CSS - Border h1 dla tekstu

pytanie zadane 6 lipca 2022 w HTML i CSS przez AnimaVillis Stary wyjadacz (12,450 p.)
zamknięte 7 lipca 2022 przez AnimaVillis

Cześć!

Mam przygotowany kod:

        <div class="row align-items-start menu-footer">
            <div class="container-fluid">
                <div class="row">
                  <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot">Java</div>
                  <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot">PHP</div>
                  <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot">JQuery</div>
                </div>
              </div>
        </div>

Czyli podzielony ogólnie na trzy części, ale od każdej części chciałbym uzyskać taki efekt:

Jakieś podpowiedzi? Bo powiem szczerze, że brakło mi fraz w googlu żeby to opisać dokładniej.

komentarz zamknięcia: VBService wyczerpał temat.

1 odpowiedź

odpowiedź 7 lipca 2022 przez VBService Ekspert (255,800 p.)
edycja 7 lipca 2022 przez VBService

Najlepsza

Próbowałeś triku z linear-gradient i efektu "odcinania" koloru.

przykład

<div class="row">
  <div>Lorem</div>
  <div>Lorem</div>
  <div>Lorem</div>
</div>

.row {
  display: flex;
  justify-content: space-between;
  width: 60vw;
  height: 2em;
  background-image: linear-gradient(to bottom, white 46%, black 46% 54%, white 54%);
}
.row div {
  font: 400 1.1em/1.8 system-ui;
  background-color: white;
  padding: 0 1em;
}

komentarz 7 lipca 2022 przez VBService Ekspert (255,800 p.)
edycja 7 lipca 2022 przez VBService

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
 
<div class="row align-items-start menu-footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-start"><span>Java</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-center"><span>PHP</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-end"><span>JQuery</span></div>
    </div>
  </div>
</div>

.container-fluid .row {
  background-image: linear-gradient(to bottom, #fefefe 46%, #d39891 46% 54%, #fefefe 54%);
}
.container-fluid .row div span {
  color: #aa5153;
  font-weight: bold; 
  background-color: white;
  padding: 0 1em;
}

komentarz 7 lipca 2022 przez VBService Ekspert (255,800 p.)
edycja 7 lipca 2022 przez VBService

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
  
<div class="row align-items-start menu-footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-start"><span>Java</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-center"><span>PHP</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-end"><span>JQuery</span></div>
    </div>
  </div>
</div>

.container-fluid .row {
  background-image: linear-gradient(to bottom, #d39891, #fefefe 46%, #d39891 46% 54%, #fefefe 54%);
}
.container-fluid .row div span {
  background-image: linear-gradient(to bottom, #d39891, #fefefe 46%, #fefefe 47%);
  color: #aa5153;
  font-weight: bold; 
  background-color: #fefefe;
  padding: 0 1em;
}

komentarz 7 lipca 2022 przez VBService Ekspert (255,800 p.)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
   
<div class="row align-items-start menu-footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-start"><span>Java</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-center"><span>PHP</span></div>
      <div class="col-md-4 col-sm-4 col-xs-4 header-menu-fot text-end"><span>JQuery</span></div>
    </div>
  </div>
</div>

.container-fluid .row {
  background-image: linear-gradient(to bottom, #d39891, #fefefe 46%, #d39891 46% 54%, #fefefe 54%);
}
.container-fluid .row div span {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 46%, #fefefe 46%);
  color: #aa5153;
  font-weight: bold; 
  background-color: rgba(0,0,0,0); /* transparent */
  padding: 0 1em;
}