'css' tag archívuma

CSS naked day

Április 9-én, azaz holnap újra CSS naked day lesz. Infók a 2006-os, első és a tavalyi 2007-es alkalomról. Idén a szervezők még több résztvevővel számolnak.

Hova tűnt a design?

Április 9-én mindenki megmutatja hogyan néz ki az oldala valójában. Ezzel is szemléltetve az xhtml+css erejét.

Hogyan vehetek részt ebben?

Jelentkezz a CSS Naked day oldalon, s bekerül az oldalad linkje is a résztvevők közé. Ezután semmi más dolgod nincs, mint minden CSS-t eltávolítani az oldaladról.

Opcionálisan a rémült olvasóidnak leírhatod, hogy nem az Ő böngészőjükkel van baj, hanem ez a mai egy ilyen nap:

Mikor lesz ilyen legközelebb?

Jövőre. Az időpont választásban több dolgot is figyelembe kell venni, ezért lett idén április 9-e a css naked day:

  • A Naked Day kedd, szerda, vagy csütörtök kell, hogy legyen (ezek a legforgalmasabb napok)
  • Közel kell essen április első hetéhez
  • Nem lehet április elseje (bolondok napja)
  • Legalább 5 nappal előbb meg kell hirdetni, mint esedékes

Ne gondolkozz, csak csináld!

Alábbi php kód megkönnyíti a naked dayre való felkészülést:

Egy példa a használatra:

Ha wordpresst használsz, akkor ajánlom Aja pluginjét, de rengeteg más platformhoz is találsz segítséget a CSS naked day oldalon.

css csoportok

CSS tanulmányainkat folytatandó, egy újabb felfedezésemet osztom meg Veletek. Mint már említettem, css szerkesztésre a csseditet használom.
Nem tudom, hogy az alábbi mutatvány más css buherátorban is működik (biztosan), de csseditben biztosan szebbé, s áttekinthetőbbé tehető egy oldal hosszú css kódja.

Eddig minden különböző kódrészletet kommentekkel választottam el egymástól, pl. /* header */. Ha ehelyett a /* @group header */ kóddal indítunk, s a /* @end */ fejezi be az adott szakaszt, akkor azok a csseditben kis legördíthető egységeket alkotnak számunkra. Pl.:

Ha nem lettem volna fentebb érthető, itt egy screencast a folyamatról.

Az eredmény pedig itt látható:
cssedit eredmeny

css reset

Ha valaki dolgozott már css-el, akkor tudja, hogy néha gondot okozhatnak a default beállítások. Az oldalaknak van előre megadott margója, felsorolások eleve beljebb kezdődnek stb.

Valószínűleg hasonló gondolatok indították Eriket arra, hogy megcsinálta a css nullázó kódját. Íme:

Amióta ezt megtaláltam, elmentettem reset.css néven, s a css fájljaim első sora általában a következő:
@import url('reset.css');

hicks 3d css box model

John Hicks az egyik kedvenc webdesignerem. Azt hiszem mindannyian ismeritek kezemunkáit, max nem tudtok róla. :-) A két legismertebb a mozilla firefox és thunderbird logok. A blogját érdemes olvasni, Ő nevéhez fűződik a pimpmycamino és a pimpmysafari oldalak létrehozása is.

Amiért most megemlékezem Róla, az az alábbi kis ábra. Pár napja véletlenül leltem rá.

hicks 3d css box model
eredeti

Ez az ábra, ami talán legjobban szemlélteti a dolgokat. Hol a margin, padding, mi mi alatt, felett található, stb. Azt hiszem nem is kell hozzá sokat magyarázni. Nekem sokat segített a dolgok megértésében és használatában.

És ha szeretitek a brit angol nyelvet hallgatni, meg két “bolond” beszélgetését, akkor hangoljatok a rafrissington podcastra! Hicks és Messrs Oxton css html és egyéb témákban beküldött kérdésekre adnak válaszokat sajátságos stílusukban. A piloton jól mulattam tegnap. :-)

kobak meztelen

Ma van április 5, a css pucérkodás napja, vagyis a css naked day.