| Autor | Zpráva | ||
|---|---|---|---|
| tpmar Profil |
Zdravím,
dostal jsem zadaný obrázek tlačítka v menu ale chci ho přetvořit do kaskádových stylů, kvůli responzivitě. Nenašel by se někdo, kdo by mi poradil, případně sepsal CSS toho tlačítka? 
Zatím jsem přišel na tohle ale nejsem s tím moc spokojený. :( CSS: .menu li {
display: inline-block;
width: 85px;
text-align: center;
border-radius: 55%/15px 15px 0 0;
background-color: #335B74;
background: -moz-linear-gradient(top, rgba(51,91,116,1) 0%, rgba(38,81,109,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(51,91,116,1)), color-stop(100%, rgba(38,81,109,1)));
background: -webkit-linear-gradient(top, rgba(51,91,116,1) 0%, rgba(38,81,109,1) 100%);
background: -o-linear-gradient(top, rgba(51,91,116,1) 0%, rgba(38,81,109,1) 100%);
background: -ms-linear-gradient(top, rgba(51,91,116,1) 0%, rgba(38,81,109,1) 100%);
background: linear-gradient(to bottom, rgba(51,91,116,1) 0%, rgba(38,81,109,1) 100%);
}
.menu li a {
line-height: 31px;
text-decoration: none;
}HTML: <ul class="menu">
<li><a href="">Domů</a></li>
<li><a href="">Reference</a></li>
<li><a href="">Služby</a></li>
<li><a href="">Produkty</a></li>
<li><a href="">Ke stažení</a></li>
<li><a href="">Fotogalerie</a></li>
<li><a href="">Kontakt</a></li>
</ul> |
||
| Chamurappi Profil |
#2 · Zasláno: 20. 8. 2016, 21:32:43
Reaguji na tpmara:
Brr, neklikací okolí odkazu – tohle asi nikdy nepochopím. Když chci stylovat odkaz v menu, tak bych přeci měl stylovat hlavně ten odkaz, ne? A <li> mě skoro nezajímá…
Výška řádku zadaná v pixelech je také ošklivá. Nemluvě o tom, že je ten text odkazu strašně nekontrastní, takže přes čumák by měl dostat i grafik. Kdybych to musel skutečně malovat přes CSS (čemuž moc nefandím), udělal bych to třeba takhle. Na rozdíl od -moz-linear-gradientu, -webkit-gradientu, -webkit-linear-gradientu, -o-linear-gradientu, -ms-linear-gradientu a linear-gradientu to pojede všude, kde je podporovaný box-shadow, a je to prakticky bez duplikací…
|
||
| tpmar Profil |
Chamurappi:
„Brr, neklikací okolí odkazu“ Tohle ještě není finální verze, obvykle dělám okolí odkazu klikací. „Výška řádku zadaná v pixelech je také ošklivá.“ Co je na tom ošklivého? Podle mě to je jen o zvyku ne? Nebo je za tím i něco víc? Případně, pokud znáš dobrou literaturu, kde jsou tyto věci vysvětleny, ocením, když mi ji doporučíš. „Kdybych to musel skutečně malovat přes CSS (čemuž moc nefandím)“ Takže mi navrhuješ nechat to jako obrázek a poté dělat responsivní menu pomocí toho obrázku? Vzhledem k tomu, že se to bude natahovat do šířky, mi přijde, že by se kvalita mohla poměrně zhoršit. Každopádně děkuji za skvělé řešení!! :-) |
||
| Chamurappi Profil |
#4 · Zasláno: 22. 8. 2016, 20:58:08
Reaguji na tpmara:
„Co je na tom ošklivého?“ 1) Je to neobecné. Výška řádku by velmi pravděpodobně měla být závislá na velikosti písma. 2) V Exploreru se při zvětšování písma pixely nezvětšují. „Případně, pokud znáš dobrou literaturu, kde jsou tyto věci vysvětleny“ Na tohle stačí JPW. „Takže mi navrhuješ nechat to jako obrázek“ Nemusí být bitmapový. SVG má podobnou podporu jako box-shadow.
„Každopádně děkuji za skvělé řešení!! :-)“ Rádo se stalo. Ale vymluv grafikovi ten slabý kontrast, nerad se podílím na podobných zločinech proti čitelnosti… |
||
|
Časová prodleva: 8 let
|
|||
0