Předvánoční slevová akce PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde
Avatar
Vejv-cz
Člen
Avatar
Vejv-cz:18. října 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. října 20:04
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Vejv-cz
Jaroslav Smrž:19. října 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. října 7:11
/* Life runs on code */
Avatar
Vejv-cz
Člen
Avatar
Vejv-cz:19. října 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. října 15:45
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Vejv-cz
Jaroslav Smrž:19. října 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. října 16:34
/* Life runs on code */
Avatar
Vejv-cz
Člen
Avatar
Odpovídá na Jaroslav Smrž
Vejv-cz:19. října 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. října 17:29
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Vejv-cz
Jaroslav Smrž:19. října 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. října 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.