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

  1. Clira [ Streda 13.7.2011, 16:00 ]

    Pobavilo a ešte je to aj poučné :) to sa často nestáva....

  2. Habaděj [ Štvrtok 14.7.2011, 10:33 ]

    Světový úspěch zaručen!

  3. Atlox333 [ Štvrtok 14.7.2011, 13:29 ]

    Super vec... :)

  4. Kuka [ Piatok 15.7.2011, 13:05 ]

    Very nice job! Fakt je to podarene napísané dude :)

    Nielen revolučný CSS-hack ale aj revolučné podanie tutoriálu cez tie speech bubbles :)

  5. fremy [ Piatok 15.7.2011, 13:13 ]

    Velmi super. Jenže než to někde vyzkouším, tak článek ztratím. Šup s ním do Evernote.

  6. cvirooo [ Nedeľa 17.7.2011, 14:44 ]

    tak toto je premakaná vec :)

  7. 81403 [ Nedeľa 17.7.2011, 15:20 ]

    Och, aky uspech to zozalo, vdaka vsetkym :)

  8. KuboNM [ Piatok 22.7.2011, 08:09 ]

    Nice 81403 ;)

  9. yderf [ Štvrtok 11.8.2011, 23:08 ]

    very nice a respect! cely cas som cakal kedy nastupi nejaky sibnuty clip alebo podobne, nestalo sa - fakt velmi dobry napad.

  10. Rayiner [ Nedeľa 21.8.2011, 20:14 ]

    Pekne osem ;)

  11. PatrikL [ Nedeľa 28.8.2011, 10:58 ]

    Čítal som viacero návodov ako to robiť, ale nikto z toho neurobil takýto zábavný a jednoducho pochopiteľný článok. Kebyže sa takto píšu viaceré IT návody, už by som nemusel kamarátom vysvetľovať čo to vlastne robím. Pochopili by to azda už aj sami.

  12. Misok [ Piatok 23.9.2011, 15:43 ]

    To sa mi prave hodi, nice

  13. kangarko [ Streda 12.10.2011, 14:41 ]

    už urob nejaký nový článok, web začína byť mrtvy

  14. 81403 [ Streda 12.10.2011, 15:08 ]

    heh, zákon schválnosti.. zrovna mám niečo rozpísané :)

  15. kangarko [ Nedeľa 16.10.2011, 09:32 ]

    ta vidiš, teraz sa učím s PHP a jquerry nemohol by si spraviť nejaký návod ako urobiť komentáre ku článku? hľadal som na nete ale našiel som len s mysql a dosť zložité

  16. kangarko [ Nedeľa 16.10.2011, 09:42 ]

    zaujímalo by ma ako urobiť aby v bubline boli tie štvorce vedľa seba (pokiaľ ich je viac). Prikladám screen pre lepšie porozumenie :D

    http://obrazky.volne.eu/out.php/i5311_mind.png

  17. 81403 [ Nedeľa 16.10.2011, 12:04 ]

    @kangarko napríklad s float: left;
    Potom ich ale treba "clearnúť" (clear: left; alebo clear: both;)

  18. kangarko [ Nedeľa 16.10.2011, 19:45 ]

    ok thx

  19. mistr_moskva [ Nedeľa 13.1.2013, 11:15 ]

    super!

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