Diskuze: Stylování menu s CSS

HTML a CSS HTML a CSS Stylování menu s CSS American English version English version

Avatar
Insane Qurd
Redaktor
Avatar
Insane Qurd:

Ahoj,

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

Odpovědět 22. listopadu 18:10
It's impossible to say it's impossible.
Avatar
vojta3310
Člen
Avatar
vojta3310:

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

  1. 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)
  2. 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)
  3. 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  ±0 22. listopadu 18:40
Avatar
David Dostal
Redaktor
Avatar
Odpovídá na Insane Qurd
David Dostal:

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. listopadu 19:11
 
Nahoru Odpovědět  +2 22. listopadu 19:10
Avatar
David Dostal
Redaktor
Avatar
David Dostal:

Ještě obrázek...

 
Nahoru Odpovědět 22. listopadu 19:12
Avatar
Petr Linhart
Člen
Avatar
Odpovídá na Insane Qurd
Petr Linhart:

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  +1 23. listopadu 7:41
Avatar
Dominik Matoušek:

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. listopadu 11:34
 
Nahoru Odpovědět  +1 27. listopadu 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.