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

ppz6lxpz

Člen

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

Jaroslav Smrž

Tvůrce

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 */

ppz6lxpz

Člen

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

Jaroslav Smrž

Tvůrce

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 */

ppz6lxpz

Člen

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

Jaroslav Smrž

Tvůrce

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.