NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:8.12.2017 16:11

Ahoj všem,

dostal jsem se k trochu (alespoň pro mne netradičnímu úkolu. Původně jsem měl jenom nahrát už jeden obrázek a vedle něho proklikávací texty, avšak mě napadlo to zkusit posunout trochu dál. Chtěl bych za pomocí CSS vytvořit obrázek podobný tomu níže (ten jsme splácal za minutu pro ukázku). Načež jsem ale trochu narazil jak přesně bych to měl dělat. Chtěl bych se odrazit od těchto vláken
https://stackoverflow.com/…ector-in-css
http://jsfiddle.net/cardeo/8ku6T/

Ovšem než se do otoh nějakým způsobem pustím tak bych se chtěl zeptat jestli někdo už něco podobného nedělal a neporadil jestli na to není nějáké záhadně lehké řešení.

Díky.

 
Odpovědět
8.12.2017 16:11
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:8.12.2017 16:34

Můžeš to udělat třeba jako svg a jseš za vodou. Nebo pomocí CSS a nějakýho toho pozicování :D tady máš vnitřní a prostřední kruh:

border-bottom: 10px solid #FF0;
border-left: 10px solid #F0F;
border-right: 10px solid #0FF;
border-top: 10px solid #68F;
height: 100px;
width: 100px;
border-radius: 50%;
background: blue;
 
Nahoru Odpovědět
8.12.2017 16:34
Avatar
Alexej Haman
Člen
Avatar
Alexej Haman:8.12.2017 16:44

Tady máš nápovědu na vnější kruh stackowerflow

 
Nahoru Odpovědět
8.12.2017 16:44
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:8.12.2017 22:49

Na tohle bych spis pouzil cesty v SVG

 
Nahoru Odpovědět
8.12.2017 22:49
Avatar
Jan Štrobl
Člen
Avatar
Jan Štrobl:9.12.2017 10:13

Zapomněl jsem dodat že ty jednotlivé barevné oddíly by měli mít efekt po najetí a měli by mít odkaz (alespoň ten text). S SVG jsem nikdy nedělal, jdu si počíst.

 
Nahoru Odpovědět
9.12.2017 10:13
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 5 zpráv z 5.