Vývoj tvarů, komponent + jejich testování

použitá barva: dodgerblue:
Hex: #3399FF
RGBA (51, 153, 255,1)
CMYK: 80, 40, 0, 0
HSV: 210, 80, 100

Žádné SVG, žádný scss,less,sass,
žádné IMG.
jen css BS compaktibilní
žádná extra sématika
Upraveno pro můj web.

Obsah je výhradně pro moje účely. Pokud si stáhnete kódy, můžete je použít (tomu stejně nezabráním). Kód je ovšem hodně rosypaný :)

Jarmil

border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 40px solid dodgerblue;
border-top: 40px solid dodgerblue;

Jarmil

border-left: 50px solid transparent;
border-right: 50px solid none;
border-bottom: 40px solid dodgerblue;
border-top: 40px solid dodgerblue;
+ triangle do prava jako div

Jarmil

Zcela nečekaně :)
triangle do leva jako div +
border-left: 50px solid none;
border-right: 50px solid transparent;
border-bottom: 40px solid dodgerblue;
border-top: 40px solid dodgerblue;

Jarmil

Tvary pro dnešek stačí

K docílení podobných tvarů by šlo dojít více způsoby, v tomto případě je to poměrně složitá cesta postavena na: border: solid blue 40px; a variacích. Modelovat frame + text a přilepit trojúhelníky, by byla také cesta, ale také větší problematika v kompaktibilitě vykreslování v prohlížečích. (testnu to, bylo by to jednoduší). Použitelnost pro weby tu sice je, ale raději bych to považoval za hovadinu, možná jen ten první, avšak to zabere zbytečně moc místa po stranách. Snad jen jako nadpis (špičatej a ostrej !) což není zase tak cool.

A nebo si pohrát s drobečkovou navigací "breadcrumb" Boostrap s tím počítá.
Ovšem použít to u responzivního webu jako mapu webu to není moc ok tak max. v omezené verzi u podstránek ve tvaru HOME / PODSTRÁNKA / MAX. JEDNA PODSEKCE. To pak nedává moc smysl a u krátkých webu o 4x položka ... tam se asi neztratíte.

Našel jsem i toto řešení responzivní možná hezčí, ale taky ma svoje mouchy, je to hezký, ale zbytečný.

Závěr je jasný, vím o tom, pokud to někdo bude chtít a nenechá si říct pak to mít bude, ale dobrovolně to nikam hulit nebudu.


Breadcrumbs 1 (6 elementů)

Phone (2 elementů, max-size:60px)
Tablet (4 elementů, max-size:100px)



Tohle jsem někde viděl a pokusil se zreplikovat

Celkem mi to vyšlo dle předlohy, technologii originálu jsem nestudoval, já použil klasické CSS SKEW.

Responzivitu jsem tu teď fakt neřešil. A asi ji nebudu řešit ani potom, prostě jsem si jen trošku developil.

Celkem jsem zvědav, jestli něco z toho někdy použiji do nějakého webu, otestuju rozšířím a uvidím.



Potřebuji
NAVRHNOUT WEB

Potřebuji vytvořit
DATOVÉ ŘEŠENÍ

Potřebuji
NĚCO JINÉHO