_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Háromszögelés CSS-el

border3 A mai minimalista weboldalak kinézetét már gyakran alig két-három kép is megfelelően kiszolgálja, ha erre a design alkalmas és így a designelemek css sprite-ra rendezése lehetséges. Előfordulhat azonban, hogy a könnyebb testreszabás, színezés, különböző méretek, esetleg animáció miatt sajnos ez mégse ennyire egyszerű.

Viszont vannak dolgok, amikhez még kép se kell.

Navigációnál és UI kezelőfelületeknél gyakran láthatunk kicsi, egyszerű háromszögekből álló nyilakat. Ezeket elkészíthetjük képpel, esetleg valamely UTF8 karakterrel a html kódban. Előbbi megoldás minden színvariációra és állapotra külön képet igényel, utóbbival pozícinálási gondok lehetnek más-más böngészőkben, és megzavarhatja a felolvasó programokat – nem valami akadálymentes megoldás.

Mi más lehetőség marad? Ma már lehet vektorosan canvas illetve VML elemekre rajzolni, színezni, tetszőleges módon scriptelni különböző állapotokra, hogy nézzen ki az elem… de ez már érezhetően aránytalanul nagy ráfordítás ekkora feladatra.

Egy lehetőség maradt, amivel egyszerű, színes poligonokat rajzolhatunk és nem kell hozzá plugin, kép, de még javasript se: a css keret.

A böngészők egy elemet körbevevő, vastag keretet, azok találkozásánál egy sima, ferde egyenes mentén illesztik, ezzel elkerülve azt a problémás kérdést, hogy melyik keret hol lógjon túl az elem szélén és mennyire. A html és css vízszintes és függőleges világában ezek a ferde vonalak eléggé meglepően hatnak, ritkán is fordulnak elő, mivel csak eltérő színű és esetleg vastagságú kereteknél válnak láthatóvá.

A böngészők keret kezelése

Ha egy ilyen elemen a magasságot és a szélességet nullára vesszük, négy “nyilat” kapunk. Innen már csak a nemkívánatos kereteket kell áttetszővé állítani, és marad egy.

Keretből nyilat

Apróságokra persze oda kell figyelni,pl. a pozicionálásnál, a html elem ilyenkor mindíg a nyíl csúcsa.

Előjött egy IE6 bug és annak körüljárása is, úgyfest IE6 nem kezeli rendesen a transzparens kereteket, kivéve, ha solid stílus helyett dotted -re állítjuk. Mivel ez a keret amúgy se látszik, tökmindegy mire állítjuk, és ha ezzel a trükkel az összes böngészőben jó, akkor miért ne.

Végül a css kód ennyi:

span.arrow {
	display: block;
	width: 0px;
	height: 0px;
 
	overflow: hidden;
 
	border-top: 20px dotted transparent;	
	border-right: 0px dotted transparent;
	border-bottom: 20px dotted transparent;	
	border-left: 20px solid green;
}

Ezáltal egy jól használható, testreszabható kis elemet kapunk, amit a mai egyszerű weboldalak és html alapú alkalmazások jól használhatnak.

Demo, és pár példa itt látható
Tesztelve: IE6, 7, 8, chrome, ff3, safari 4.

Előnyök:

Hátrányok:

cimkék:

Hozzászólások, trackbackek [trackback url]

  1. ksgy 09:40 | 2009.05.25

    Koszi, nagyon kreativ megoldas :) (Amugy sajat otlet?)

  2. _Nec 09:48 | 2009.05.25

    koszi. Igen, regota foglalkoztat a rajzoljunk-kerettel dolog, de most jott a szukseg, hogy vmi ertelemesre is hasznaljam vegre

  3. gex 14:00 | 2009.05.25

    én a cssplay-en találkoztam ezzel először (http://www.cssplay.co.uk/menus/pointer.html), ettől függetlenül jó a cikk és a demo-oldal. esetleg azzal kiegészíthetnéd, hogy a keret szélességekkel lehet játszani, így nyílszerűbb nyilat is rajzolhatunk (nem derékszögű háromszöget).

  4. thgab 19:12 | 2009.05.25

    Frappáns megoldás!
    Én a nettuts-on láttam hasonlót, de ott szövegbuborékhoz használják. http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/

  5. deadcabbit 19:28 | 2009.05.25

    Aranyos! Az a baj, hogy most hirtelen ahol tudnám használni, ott a dropshadow miatt nem érdemes (buborék csücske), de észben tartom :)

  6. mukinyúl 22:29 | 2009.05.25

    Elképesztő! Eszembe nem jutott volna. És ráadásul a jelenlegi munkámnál szükségem is van ilyen háromszögekre. Köszi.

  7. Crystal 11:26 | 2009.05.26

    szép hack, kreatív, szerintem fogom használni.

  8. links for 2009-07-07 « Köszönjük, Emese! 17:44 | 2009.07.07

    [...] Háromszögelés CSS-el – _nec (tags: css design tutorial) [...]

  9. Tweets that mention Háromszögelés CSS-el - _nec -- Topsy.com 10:46 | 2010.02.09

    [...] This post was mentioned on Twitter by opendir, opendir. opendir said: Háromszög CSS / css,border,trukk: http://tinyurl.com/ylegd7y – Érdekes leírás, CSS-el háromszög [...]

Szólj hozzá







kategóriák


del.icio.us

  • No bookmarks avaliable.

epp olvasom

  • A Clash of Kings

    A Clash of Kings by George R.R. Martin

flickr

  • Tuomas Holopainen - the Imagineer
  • The Flock
  • Christmas Crow
  • Geek joy
  • Fast Food - extreme edition
  • Teide north side
  • Teide National Park
  • Genesis
  • Rado Cerix
  • werk - _nec
  • werk - Strati

back to index