spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

David Ursiny 8.1.2012
Hodnoť článok:
0 0

CSS panáčik

Namiesto obrázkov len HTML a CSS?

Tento panáčik je celý z HTML a CSS. Áno, pokiaľ tu bude IE8, tak sa na nete neuživí.
Ale možnosť vystačiť si s kódovaním a vynechať pri navrhovaní designu webstránky niektoré obrázky je zaujímavá a lákavá. A nemusí to pritom pôsobiť tak insitne, ako v tomto príklade.

Základom takéhoto "kreslenia" je používanie rodičovských prvkov s vlastnosťou overflow: hidden, vytváranie kriviek pomocou vlastnosti border-radius rôznych blokových elementov a tež hojné používanie pseudo elementov before a after.

Trocha smutné je, že nemožno veľmi rátať s čiarkovanými a bodkovanými rámčekmi (nad 3px), ak ich chceme aplikovať na klasické "štvorcové" prvky a chceme pritom, aby plnili estetickú funkciu. Každý prehliadač ich vykreslí inak- a väčšinou dosť zle. V tomto ma príjemne prekvapil IE, pretože jediný vymedzeruje bodky, čiarky a medzery pravidelne. A samozrejme- bodkovanie a čiarkovanie nemôžeme chcieť pri zaoblených prvkoch.

Po vytvorení tohoto panáčika som sa pozrel do sveta, či sa ešte niekto iný takto bohapusto zabáva a samozrejme zopár kúskov som našiel.

A tu je zdroják k panáčikovi :-)

Hodnoť článok:
0 0

8 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Boi Youdontwannaknow 13.1.2012 21:40:29
diky :D to ma nenapadlo
0 0 viťo 13.1.2012 19:19:22
tip: oci si mohol urobit jednym divom - border-left: 5px solid blue, border-right: 5px solid white..
0 0 Boi Youdontwannaknow 13.1.2012 18:44:11
http://concreterdesign.tk/mine.html taký môj malý pokus :D
0 0 viťo 9.1.2012 17:31:35
ono je to stare, asi 4-5 rocne riesenie, hover spocival len v zmene border vlastnosti.. keby si tam chcel zmenit odkaz, muselo by sa to cele prerobit :)
ale ten panacik je sikovny.. ja uz chrabnem, na taketo veci uz akosi nie je cas, s css som sa vybesnel uz davno a teraz len ticho zavidim nad vsakovakymi tymi animaciami a podobne :)
0 0 Jozef Kucera 9.1.2012 17:27:48
@viktor super..tie dvere a disketa su naozaj pouzitelne.. hlavne tie dvere..za ne by sa dal skryt odkaz na vstup na webovu straknu... velmi sikonve..
0 0 Moďerný Občan 9.1.2012 15:29:48
Urcite bude super, ked budu vsetky majoritne browsery poznat zaoblene boxy a vsetky mozne transformacie, ale nechajme kreslenie na dizajnerov a kodovanie na koderov ;)
0 0 Peter Dulačka 9.1.2012 15:26:25
tu trochu advanced verzia ;)
http://www.wagon-bertrand.fr/southParkCSS3/
Zajtra.sk > Programovanie > CSS/HTML > CSS panáčik


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama