Diskuze: Stylování menu s CSS

Aktivity

Insane Qurd

Tvůrce

Insane Qurd:22.11.2016 18:10

Ahoj,

chtěl bych se zeptat jestli by někdo věděl, jak se dá nastylovat podobné menu:

Odpovědět

22.11.2016 18:10

It's impossible to say it's impossible.

vojta3310

Člen

vojta3310:22.11.2016 18:40

Ahoj,
nemám moc zkušeností, ale měl bych tři nápady:

normální obdélníkovou vrstvu (div, nebo něco jiného) a jako pozadí nastavit obrázek s tím šikmým zlomem. (s měnícím se rozlišením to nemusí vypadat hezky)
zase obdélníková vrstva s menu a s nastaveným overflow hidden a v ní bílá vrstva s vyšším z-index natočená pod úhlem. (bez alfa kanálu > neprůhledný bude celý obdélník)
průhledná vrstva s owerflow hidden v ní pootočená černá vrstva a v té pootočené vrstva s menu, otočená zase tak aby byla rovně)

ještě jednou upozorňuji že s tím nemám zkušenost a je to jen nápad jak by to možná šlo a provedení nechám také na tobě. Pootočení uděláš asi takto: (někde jsem to viděl a vypůjčil si)

-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);

Snad ti to pomůže.

Nahoru Odpovědět

22.11.2016 18:40

David Dostal

Tvůrce

David Dostal:22.11.2016 19:10

http://jsfiddle.net/xjxks5a0/
Tak nějak by to šlo udělat, snad je to z toho vidět :-) (Barva pozadí samozřejmě stejná - tady je to jen pro zřetelnost.)
K divu (nebo prostě kontejneru menu) přidáš pomocí ::after pseudoelement o stejné délce, správně ho napozicuješ a pomocí skew ho zešikmíš. Kdyby jsi ho místo toho rotoval, vyčuhovaly by rohy.

Editováno 22.11.2016 19:11

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

22.11.2016 19:10

David Dostal

Tvůrce

David Dostal:22.11.2016 19:12

Ještě obrázek...

Nahoru Odpovědět

22.11.2016 19:12

Neaktivní uživatel

Člen

Neaktivní uživatel:23.11.2016 7:41

Možností je několik.

Postaru třeba nějak takhle:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>

<style>
html a{text-decoration:none}
nav{display:block;width:100%;margin:0;padding:10px 0 0 0}
nav ul{width:100%;padding:10px 16px 0 16px;margin:0;letter-spacing:2px}
nav a{color:white;font-weight:bold}
nav a:hover{text-decoration:underline}
.black{background-color:black}
.inline-list>li{display:inline-block;padding:0 5px;margin:0}
.menu-bottom{display:block;width:100%;height:80px;background-image:linear-gradient(to top left,#fff 50%,#000 50%);margin:0;padding:0}
</style>

</head>
<body>

<nav class="black">
  <ul class="inline-list">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </ul>
  <span class="menu-bottom"></span>
</nav>

</body>
</html>

Nahoru Odpovědět

23.11.2016 7:41

Neaktivní uživatelský účet

Dominik Matoušek

Člen

Dominik Matoušek:27.11.2016 11:33

Na zakřivení divu můžeš použít například toto:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);

Editováno 27.11.2016 11:34

Nahoru Odpovědět

27.11.2016 11:33

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.