NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: CSS problémy se šikmím polem pro text

Aktivity
Avatar
ppz6lxpz
Člen
Avatar
ppz6lxpz:18.10.2019 20:04

Zdravím,
v designu svého mini-projektu potřebuji využít šikmé plochy pro text jdoucí za sebou http://imgsafe.org/…e/9fd9e21623.

Použil jsem proto textclip-path a vzápětí jsem narazil na hromadu problémů, které se mi nepodařili elegantně vyřešit. :-(

Potřebuji:

  • Aby se text zalamoval společně s blokem.
  • Aby měl blok svůj border s odstupňovanými barvami.
  • Aby byly bloky částečně průhledné, ideálně blur.

Aktuální verze vypadá takto:

.box {
        z-index: 2;
        margin: 1em auto;
        width: 60em;
        max-width: calc(100% - 5em);
        min-height: 50px;
        margin-top: calc(2%+ 10px);
        margin-bottom: calc(2%+ 10px);
}
.obsah {
        padding: 10px;
        box-shadow: 0 0 0 32px rgba(0, 255, 0, 10);
        background: rgba(0, 80, 255, 0.5);
        position: relative;
        z-index: 3;
        min-height: 150px;
        border-right: solid white;
        border-left: solid white;


}
.prvni {
        -webkit-shape-outside: polygon(0 0, 100% 0, 100% 70%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.druhy {
        -webkit-clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
        clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
}
.treti {
        -webkit-clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
        clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
}
.ctvrty {
        -webkit-clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

Marně jsem zkoušel:

  • shape-inside
  • word-wrap: break-word;
  • atd.

Budu rád za jakoukoliv pomoc. |-)

 
Odpovědět
18.10.2019 20:04
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na ppz6lxpz
Jaroslav Smrž:19.10.2019 7:11

Ahoj, kód, co potřebuješ, by mohl vypadat nějak takto:

HTML:

 <p class="sikme-strany">
   <span>
     Text šikmého tvaru
   </span>
</p>

CSS:

.sikme-strany {
      background-color: #00aeef;
      padding: 15px;
        display: inline-block; margin-left: 1em; margin-right: 1em;
        transform: skewY(-5deg); -ms-transform: skewY(-5deg); -moz-transform: skewY(-5deg); -webkit-transform: skewY-30deg); -o-transform: skewY(-5deg);}
      .sikme-strany span {
        display: inline-block;
        transform: skewY(5deg); -ms-transform: skewY(5deg); -moz-transform: skewY(5deg); -webkit-transform: skewY(5deg); -o-transform: skewY(5deg)
      }

V podstatě musíš nastavit úhly pro "pozadí" - samotný tvar a potom stejným způsobem vyrovnat i text, aby byl vodorovně, proto záporné hodnoty.

Nahoru Odpovědět
19.10.2019 7:11
/* Life runs on code */
Avatar
ppz6lxpz
Člen
Avatar
ppz6lxpz:19.10.2019 15:45

Děkuji za nápad, ale asi to nebude to pravé ořechové.

Špatně jsem se nejspíš vyjádřil, ten text nemá jít stejně šikmo jako ta plocha, ale když dojde k zešikmení, má se zalomit a pokračovat na dalším řádku.
Pak taky potřebuji, aby první a poslední blok měli jednu stranu rovnu, takže tahle metoda asi nepůjde použít.

Takto to vypadá teď: sff.nahorniak.cz.
K tomu potřebuji jen ty rámečky podél celých bloků a aby se text při zmenšení stránky na šikmé ploše zalomil.

 
Nahoru Odpovědět
19.10.2019 15:45
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na ppz6lxpz
Jaroslav Smrž:19.10.2019 16:34

To by mělo být v pohodě, jen třídu aplikuješ na div, ve kterém budeš mít pozadí a v tomto divu bude vnořený text <p>. S tím zalamováním podle zkosené strany, to by se nejspíš dalo řešit nějak pomocí JS, kde by se dynamicky vypočítával margin p podle stupňů úhlu v závislosti na šířce a výšce elementu / obrazovky. Když bys měl absolutní rozměry a pozice, tak by to šlo naformátovat přímo v css, ale pokud to má být responsivní, tak vážně nevím, jak to udělat čistě v css. S tímhle ti poradí spíš nějaký frontenďák.

Nahoru Odpovědět
19.10.2019 16:34
/* Life runs on code */
Avatar
ppz6lxpz
Člen
Avatar
Odpovídá na Jaroslav Smrž
ppz6lxpz:19.10.2019 17:29

Moc děkuji za snahu mi pomoct. Na první pohled taková jednoduchá věc a pak to řeším tři dny a stále bez úspěchu. :-(
Mám počkat na pomoc nějakého "frontenďáka" tady, nebo se mám obrátit s tímto dotazem někde jinde?

 
Nahoru Odpovědět
19.10.2019 17:29
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na ppz6lxpz
Jaroslav Smrž:19.10.2019 17:45

Tady určitě někdo poradí. Ale odpověď bych očekával asi až v pondělí, až se budou lidi v práci nudit :)

Nahoru Odpovědět
19.10.2019 17:45
/* Life runs on code */
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.