CSS tippek

A linkleltár második részében szemezgettem az internet kincsei közül a CSS témájában, most néhány hasznos tippet szeretnék megosztani a stíluslapokkal kapcsolatban.

Gyakori hibák

Saját tapasztalatomból (is) tudom, hogy következetességgel és odafigyeléssel sok-sok munkaóra megspórolható. Én a legtöbb időt az alábbiak figyelmen kívül hagyása miatt vesztegettem el.

Pont, vessző, pontosvessző, szóköz – mindig csak a megfelelő helyre!

  • .p » ponttal az elején a class="p" stílusú tag-ekre vonatkozik
    p » pont nélkül minden bekezdésre érvényes
  • a, a:hover, a:visited » ez egyes stílusok felsorolásakor közéjük mindig kell vessző, az utolsó után viszont soha
  • a {border: 0; background: #000; color: #fff;} » egy stílus meghatározásánál az egyes tulajdonságok után mindig legyen pontosvessző (bár az utolsó után már nem kötelező, de nem baj, ha ott van)
  • a {font-size: 10px} » az érték és annak mértékegysége között soha ne legyen szóköz

Nem mindegy a sorrend!

  • p a » bekezdésn belüli link
    a p » linken belüli bekezdés
  • p.header » minden class="header" stílusú bekezdés
    .header p » a class="header" header stílusú tag-en belüli összes bekezdés

Egyszerűen jobb

Mint az élet sok más területén, így itt is igaz, hogy a legegyszerűbb a legjobb; mert ha kevesebb a kód, akkor először is kisebb a fájl, másodszor pedig könnyebb átlátni.

Rövidítsünk, ha lehet!

  • p {font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 11px;
    line-height: 15px;
    font-family: helvetica, sans-serif}

    » mindezek helyett elég ennyi:
    p {font: bold italic small-caps 11px/15px helvetica, sans-serif}

  • body {background-color: #000;
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center top}

    » egyenértékű ezzel:
    body {background: #000 url(bg.gif) no-repeat center top}

  • p {border-color: #000;
    border-style: solid;
    border-width: 10px}

    » egyszerűbben és rövidebben:
    p {border: #000 solid 10px}

Ráadásul…

  • …jó tudni, hogy egy tag-nek akárhány stílusa lehet (szóközökkel elválasztva).
    p class="txt alignright" » ebben az esetben a bekezdések a .txt és az .alignright stílusokban definiált tulajdonságokkal jelennek meg

John Wood és Paul Harrison videói a Ludwig Múzeumban

John Wood és Paul Harrison videói a Ludwig MúzeumbanRengeteg ötlettel és humorral készültek ezek a videómunkák, melyeket tegnap végre volt alkalmam megnézni – ajánlom mindenkinek, aki még nem látta (megtekinthető a Ludwig Múzeumban április 30-ig – nem június 8-ig, ahogyan az igénytelen, régóta frissítetlen honlapjukon szerepel!).

John Wood és Paul Harrison neve már ismerősen cseng a hazai képzőművészeti életben, mivel többször is szerepeltek videóikkal magyarországi kiállításokon. Az azonban talán kevéssé ismert a hazai közönség előtt, hogy nemcsak hogy először az 1993-as győri Mediawave fesztiválon mutattak be közös művet, (ekkortól datálódik együttműködésük), hanem első önálló kiállításukat is ebben az országban, a dunaújvárosi Kortárs Művészeti Intézetben volt alkalmuk megrendezni 1998-ban. Munkáikat nemcsak számos nagy-britanniai, illetve nemzetközi kiállításon, hanem különböző tévécsatornákon (MTV Europe, SBS Australia, Channel 4, Arte, stb.) is láthatta a közönség.

A Ludwig Múzeumban megrendezett kiállításukon legújabb munkáikkal jelentkeznek. Ezek a művek bizonyos szempontból hasonlítanak a korábbiakhoz, melyeket leginkább finom humoruk miatt kedvelt meg a közönség. John Wood és Paul Harrison tárgyakat manipulál olyan módon, hogy azok szokatlan aspektusait és tulajdonságait helyezik a középpontba. Ezeket a folyamatokat rögzítik aztán rövid videofilmek formájában.

Paul Harrison 1968-ban született Woolverhamptonban, John Wood pedig 1969-ben Hong Kong-ban. Harrison Birminghamben él, Wood pedig Bristolban. Mindketten a Bath College-ban tanultak festészetet. Az f a projects (London) képviseli őket.

(www.ludwigmuseum.hu)

És ha már a Művészetek Palotájában jártam, készítettem pár fotót a környékéről is.

Művészetek Palotája

Művészetek Palotája

Photoshop CS2: gombok a palettákon

Először: vegyük észre a gombokat a palettákon. Másodszor: használjuk is őket – mert hasznosak. A következőkben ezt a két leggyakrabban használt paletta (Layers, History) példáján keresztül próbálom bebizonyítani.

Gombok a Layers palettán

A Layers paletta alján levő gombok talán ismertebbek, mint a tetején találhatók (vagy csak tévesen magamból indulok ki), melyek megvédik kívánt pixeleinket a nemkívánt behatásoktól.

Layers palettaBalról az első (Lock transparent pixels) az átlátszó részeket óvja, ha bekapcsoljuk. Ekkor nem tudunk az átlátszó részekre festeni. Egy részben átlátszó részen az átlátszóságának mértékében jelenik meg, amit rá rajzolunk (például egy 20 %-os átlátszóságú területen a 100 %-os fedettségű ceruza csak 20 %-ban látszik).

Balról a másodikat (Lock image pixels) bekapcsolva nem tudunk módosítani a réteg tartalmán, legfeljebb a méretén. A Free transform eszközzel azonban csak a réteg egészén tudunk változtatni, az egyes részein nem.

A harmadik gomb (Lock position) a réteg pozíciójának megőrzésére szolgál. Ha bekapcsoljuk, festeni tudunk a rétegre, elmozdítani, torzítani viszont nem lehet.

Végül a Lock all bekapcsolásával teljes védelmet biztosíthatunk a rétegünknek – annak tartalmát, méretét, formáját és pozícióját nem módosíthatjuk.

Gombok a History palettán

A History Options ablakban (mely elérhető a History paletta jobb felső sarkában megbúvó kicsi nyilacskán keresztül) az Automatically Create New Snapshot When Saving kipipálásával minden egyes mentés állapota elérhető marad a paletta felső részéből. Ha sokszor mentünk, és nagy méretű fájllal dolgozunk, ez meglehetősen igénybe veheti gépünk erőforrásait.

History palettaVan azonban egy másik, nagyon egyszerű módja a pillanatnyi helyzet „lefényképezésének”. Csak kattintsunk a History paletta alján a középső gombon (Create new snapshot). Ekkor ugyan az történik, mint ha a fentebb leírtak szerint járnánk el, vagyis a pillanatnyi állapot megörökítésre kerül, és elérhető marad a History paletta felső részéből. A felugró ablakból választhatunk, hogy a teljes dokumentumuk állapotát jegyezze meg a Photoshop (Full Document), rétegeink összeolvasztva kerüljenek megörökítésre (Merged Layers), vagy csak az éppen kiválasztott rétegünk szerepeljen a pillanatfelvételen (Current Layer). Azonban fontos megjegyezni, hogy egyik esetben sem kerül mentésre a fájl, ezt ne felejtsük el megtenni!

A bal oldali gomb (Create new document from current state) a pillanatnyi állapot alapján egy új dokumentumot hoz létre; a jobb oldali kuka (Delete current state) pedig gondolom, mindenkinek ismerős, törli a History palettán kijelölt állapotot.

Röviden

rövidre vágva

A végeredmény soha nem tetszik, de néha iszonyatosan jó letolni, aztán élvezni a kényelmet, meg a szelet… Lányok, fiúk próbáljátok ki – mert idézve Karányonyi Gábor barátom egyik nagyszerű költeményét:

„Lompos hajjal az élet gyötrelem
Fejem tükrös felülettel kedvelem”

Pink Floyd Live at Pompeii (DVD)

Először is nagy köszönet Kedvesemnek, aki volt olyan leleményes, hogy a magyarországi forgalmazás hiánya ellenére megszerezte ezt az általam régóta áhított Pink Floyd filmet (külön köszönet a Marácz családnak a közreműködésért), és névnapomon megajándékozott vele.

Pink Floyd: Meddle

Pink Floyd Live at Pompeii – DVD borítóA DVD teljes címe Pink Floyd Live at Pompeii The Director’s Cut. Vagyis a fő attrakció a 92 perces 2003-ban készült rendezői változat, de az extrák között szerencsére megtalálható az eredeti, 1971-es 62 perces film is. Számomra ez utóbbi megtekintése okozta a nagyobb élményt kerekebb egészével – míg a rendezői változat kétségtelenül érdekesebb az űrbéli jelenetekkel, a párizsi és londoni stúdió felvételekkel, interjúkkal, illetve a végén Pompeji digitális újraalkotásával. Mindkét filmet az Echoes gyönyörű dallamai keretezik (az 1971-ben megjelent Meddle című album B oldala), melynek két része között helyet kaptak olyan régebbi számok is, mint a Careful with that axe Eugene, vagy a Set the controls for the heart of the Sun. Fantasztikus hangulata van a kétezer éves üres amfiteátrumnak, melynek közepén a Pink Floyd tonnányi felszerelésével szólaltatja meg magával ragadó zenéjét.

Pink Floyd Live at Pompeii – jelenet a filmből

Az extrák között az eredeti filmen kívül szerepel még egy érdekes 24 perces interjú a film rendezőjével, Adrian Maben-nel, fotók, grafikák, dalszövegek és Pompeji történetének leírása. Ajánlom mindenkinek, aki szereti a ’60-as ’70-es évek Pink Floyd-ját.

Pink Floyd Live at Pompeii – jelenet a filmből