CSSkové trojuholníky a bubliny

napísal , 13 Jul 2011 [ CSS ]
Počul som, že horíš nedočkavosťou vedieť ako robiť takéto bubliny s trojuholníkmi v CSS bez použitia obrázkov!
Hm, to znie ako riadna kravina, povedz mi o tom viac.
Nuž.. všetko to začalo obyčajným štvorcom, ktorý mal "border"...

Jedného dňa sa rozhodol, že bude mať hrubý rám. A veruže sa tak aj stalo, s hrúbkou úctyhodných 20px mu bolo čo závidieť!
Ostatné štvorce neotáľali a objavili príkaz border-color, vďaka ktorému mali všetky strany inej farby.
Prišla doba kedy štvorce už neboli "in" a tak zostali len rámy.
(width:0; height:0;)
I see what you did there.
Niektorí rebeli dokonca upustili od spodného borderu.
A rebeli medzi rebelmi nakoniec zhodnotili, že aj bočné rámy sú príliš mainstream...
...a tak vznikol z rebelujúceho štvorca trojuholník.
To si si vymyslel riadnu hovadinu.
Ja viem
Pre boha živého, celé internety ťa vysmejú!
Ja viem :((
A na čo je to vlastne dobré?
Okrem toho, že budeš v kruhoch internetových developerov za najväčšieho bossa ;)... dosť sa to hodí v mailoch, ktoré radi ignorujú obrázky.
Aha.. v tom prípade to možno nie je až taká chobotina jak sa zdá.
Čo takto dať nejaké to CSSko?
Asi by sa patrilo...
.bublina {
	background: #efeda9; color: #98965f;
	border: solid 1px #efeda9;
	width: 300px; padding: 8px;
	border-radius: 10px;
	box-shadow: 1px 3px 8px rgba(255,255,255, 0.8) inset;
}

.rebelujuciStvorec {
	height: 0px; width: 0px;
	border-style: solid;
	border-color: #ff9000 transparent transparent transparent;
	border-width: 20px 20px 0 20px;
}
Hmm.. hm..
A ešte ťažký bonus na záver, takto sa dajú trojuholníky ohýbať:
border-width:
20px 5px 0 20px;		 border-width:
20px 20px 0 20px;		 border-width:
20px 20px 0 5px;		 border-width:
20px 20px 0 0;
Jediné obmedzenie je, že vždy bude jedna hrana vodorovná alebo zvislá. Každopádne na bubliny, ako sú tieto, to bárskoľko stačí.
Áno, hneď je svet krajší keď vieme robiť CSS-only bubliny :)
napísal , 13 Jul 2011

19 komentárov

komentuj ku každému komentáru sa v databáze ukladá iba meno, text a dátum, iba za účelom zobrazenia pod článkom
neukladá sa email, IP adresa ani informácie o prehliadači a údaje sa nepoužívajú na reklamu, newsletter, na žiadnu ekonomickú aktivitu, nikam sa neposielajú, sú v databáze len aby sa mohli zobraziť pod článkom

Archivovaný archív je bez komentárov. Radšej.