Tolóajtó css - elrendezés
Előnyei közé tartozik a CSS ritkán vitatják -Az a képesség, hogy overlay a háttérképeket különböző hatások elérése érdekében. Összhangban CSS2 szabványt minden háttérképet egy külön HTML elemet. A legtöbb esetben egy tipikus kódot, amely leírja a közös felület elemeinek biztosít számunkra több HTML-elemeket.
Az egyik ilyen eset-alapú navigációs lapok. Itt az ideje, hogy vegye vissza felett a fülek, a népszerűsége egyre csak növekvő elsődleges navigációs eszközként. És most, hála a széles körű támogatást CSS tudjuk javítani a minősége és megjelenése a füleket a honlapjainkon. Valószínűleg már tudja, hogy a CSS lehet használni, hogy „megszelídítése” egy egyszerű rendezetlen listát. Lehet, hogy még láttam listákat tervezett formájában fülek, ami így néz ki:
Mi lenne, ha veszi a kódot pontosan az előző példában, és kapcsolja be a tab, valahogy így:
Segítségével egy egyszerű CSS lehetséges.
Mi az innováció?
Sok a CSS-ütközött kedvenceim (könyvjelzők alapuló CSS) szenvednek a monotónia a design: a színes téglalapok, esetleg a stroke, az aktuális lapon nincs stroke, a színváltozás a hover állapotban. Vajon tényleg minden, hogy a CSS tud nyújtani nekünk? Több doboz egy színnel töltse?
Mielőtt CSS terjedt el a navigációs tervezés sok új ötletet: furcsa formák, okos átmenetek a színek, a szimulálni valós felületek. Ez a kialakítás azonban zömében a komplex szerkezetét raszterizálja szöveget és beágyazott táblázatok. Szöveg szerkesztése vagy változás könyvjelzők elhelyezése szekvenciák nehézkes dolog. Méretezés szöveget lehetetlen volt, vagy súlyos problémákhoz vezet az oldalon készítmény.
Navigáció a sima szöveg könnyen kezelhető és teher sokkal gyorsabb, mint a navigációs alapján raszteres szöveget. Ezen kívül, bár mi is hozzá alt tulajdonság minden kép, sima szöveg még nyilvánosan elérhető, mivel ez lehet méretezni. Ez nem meglepő, hogy a navigációs alapul egyszerű szöveges visszakerül a web design. Azonban a megjelenése a CSS-könyvjelzők még egy lépés volt vissza a tervezés, és minden bizonnyal nem az a tény, hogy akkor bele egy design portfólió. Az új technológiák (pl CSS) lehetővé kell tennie, hogy valami jobb, és ugyanolyan minőségi design, amely lehetővé tette a táblázatok használata könyvjelzők alapján raszteres képeket.
A módszer a „tolóajtók”
Mi lehet létrehozni egy szép, igazán rugalmas interfész komponensek, amelyek bővíteni és szerződés méretétől függően a szöveg segítségével két különböző háttérképeket. Egy bal oldali lap, a másik, a jobb oldalon. Képzeld el, hogy ez a pár kép, tolóajtók, becsukjuk az ajtót. Ezek az ajtók tolódnak és fedésben többet, ha az ajtó szűk, és fordítva, eltávolodnak egymástól, és átfedésben kevesebb, ha azt szeretnénk, hogy lezárja a nagyobb tér. Ezt az ábrán látható:
Ebben a modellben az egyik kép egy részét fedezi a másik. Ha feltételezzük, hogy a széleken Képeink van valami egyedi, mint például a lekerekített sarok könyvjelzőket, nem szeretnénk, hogy egy kép teljesen elhomályosítja a többi mögött található. Ennek elkerülése érdekében tesszük az első (ebben az esetben a bal oldalon) kép a lehető legszűkebb. De ez a kép legyen elég széles ahhoz, hogy megvédje a látszólagos egyediségét. Esetünkben egyedülálló lekerekített sarkok, így az első egy kép szélessége a lekerekített rész a kép:
Ha a méret a lap növekedni fog eredményeként például méretezés a szöveget, képeinket eloszlassa az oldalán, felfedve egy csúnya szakítás. Ezért szükséges, hogy felmérhessük a bővítése a megfelelő. Mennyit lehet növelni az objektumot az átméretezés a szöveget a böngésző? Tényleg kell számolni a lehetőségét, hogy növeli a 300%. , Meg kell, hogy nyúlik a háttérképet, hogy kompenzálja ezt a növekedést. A példánkban fogjuk, hogy a hátsó kép (jobb oldalon) a méret 400h150 pixel, és a front-9h150 pixel.
Ne feledje, hogy a háttérkép csak akkor látható a „bejárati” elemet, amelyen alkalmazzák ( „bejárati” + -region tartalom behúzás). Mindkét Képeink vannak csatlakoztatva a külső sarkokat saját elemekkel. Látható részei ezek a képek egyesítjük belül az ajtó nyitását és formában lapok formájában:
Amikor a lapon megnövekszik, a kép egymástól, töltő szélesebb ajtó, a látható képek is egyre nagyobb:
Ugyanez a teendő, és fényes képet az aktuális lapra. Ily módon mind a 4 képet (1. 2. 3. 4.) tudjuk kezdeni a kódot, és CSS a lapok.
könyvjelzők létrehozása
Ahogy felfedezni létrehozása vízszintes listák CSS, észre fogod venni, legalább kétféleképpen lehet elhelyezni egy csoport objektumokat egy sorban. Mindegyiknek megvannak az előnyei és hátrányai. Mindkettő igénybevétele meglehetősen bonyolult kérdéseiről CSS, ennek eredményeként, akkor hamar zavaros. Az egyik módszer inline elemek, a második tulajdonság úszó.
Az első út-talán gyakrabban jár változik a kijelző ingatlan «inline» (vonal). „Soros” módszer vonzó a maga egyszerűségében. Azonban, ez vezet a végrehajtási problémákat módszerünk tolóajtók az egyes böngészők. A második módszer. amelyre kiemelt figyelmet fordítunk, az általunk használt modell az épület egy úszó lista elemeit egy vízszintes sorban. Úszó modell azonban azt is bosszantó lehet. Ez néha ellentmondásos viselkedése sérti minden elképzelhető logika. Mégis közös megértése, hogyan kell kezelni a több úszó elemek és a tudás megbízható módon, hogy „exit” a több úszó (vagy fogva tartás egy tartályban) csodákat tehet.
Igyekszünk, hogy tegyen több lebegő elemek úszó belsejében egy tároló elemet. Ezt kell tenni annak érdekében, hogy a külső szülő lebegő elem teljesen körül a belső úszó elemek. Akkor add mögött lapok háttérszínét vagy háttérképét. Fontos megjegyezni, hogy a helyzet a következő fülek elem vissza kell állítani a segítségével CSS-tulajdonságok egyértelmű. Ezután az úszó fül nem befolyásolja a helyét a többi elem az oldalon.
Kezdjük az alábbi kódot:
A gyakorlatban #header egység lehetnek például, az alakja egy logó és a keresést. A példánkban fogjuk csökkenteni a href értéket minden utalást a „#”. Egyértelmű, hogy a valós életben, az ikon helyett lesz az út, hogy a fájl vagy mappa.
Kezdjük a CSS tulajdonságokat rendelni úszó #header tartályba. Ez biztosítja, hogy a tartály valójában „hold” az elemek a lista, amelyet szintén úszó. Mivel mi #header úszó, meg kell jelölnie azt a szélessége 100% -os. Azt is hozzá egy ideiglenes sárga alapon, hogy megbizonyosodjon arról, hogy a szülő elem húzódik végig a teljes szélessége a fülek mögé. És végül, feltenni néhány alapvető font tulajdonságok, egységességének biztosítása a megjelenése elemek:
Referenciaként kérünk bloc feltérképezése érdekében figyelemmel kíséri, mi történik, anélkül, hogy aggódnia kisbetűvel modell:
Ezután adjunk hozzá a megfelelő háttérkép a lista elem (változtatásokat és kiegészítéseket félkövér betűkkel jelennek meg):
Mielőtt hozzáadja a bal háttérképet a szünet, és látni, mi van ebben a pillanatban, az 1. példa (Figyelmen kívül hagyja a szabályt, hogy én, amelyet a test elem mintafájlba. Csak beállítja az alapvető értékeit margin, padding, színek és a szövegben.)
Az eredményt a 2. példában közé kezdett formát ölteni. Ezen a ponton térjünk a felhasználók zavaros IE5 / Mac, akik maguknak: „Mi folyik itt? Könyvjelzők halmozott egy függőleges oszlopban, és elnyúlt a szélessége a teljes képernyőt. „Ne aggódj, nemsokára még az Ön számára. Egyelőre csak nézni, hogy mi történik, vagy ideiglenesen átválthat egy másik böngészőt, és megnyugodhat, hamarosan megoldja a problémát, IE5 / Mac.
Most, amikor a képeket az egyszerű könyvjelzők került a sor, mi határozza meg a kép az aktuális lapon. Ehhez olvassa el a lista elem id = „aktuális” és a kapcsolat belsejébe. Mivel nem változtathatja meg a tulajdonságai, kivéve a háttér háttérkép, akkor használja a background-image tulajdonság:
Alján a lapok, szükségünk van valamilyen szélütés. De az alkalmazás a border tulajdonság a szülő #header nem teszi lehetővé számunkra, hogy „kiszivárgott” az aktuális lapot át ezt a határt. Ehelyett fogunk létrehozni egy új képet a kívánt stroke alsó szélét. És amíg mi dolgozunk a következő kép, adjunk hozzá egy finom színátmenet így néz ki:
Fogjuk alkalmazni ezt a képet, hogy a háttérben mi #header tartály (helyett sárga fent megadott), csúsztatjuk le a tartály és hozzá a háttér színt, amely megegyezik a felső szín létrehozásához gradiens. Azt is hozzá kezdetben eltávolítás behúzva az elem testet, és hozzáadjuk a bemélyedés 10 pixel a bal felső és a jobb oldali részei ul elem:
Hogy teljes legyen a lap továbbra is „kiszivárgott” az aktuális lapot át a határon, mint már említettük. Azt gondolhatnánk, hogy mi vonatkozik a mi könyvjelzők alsó határa egybeesik a színe az alsó szélütés háttérképet #header elem. és változtassa meg a szegély színét az aktuális lapon fehér. Azonban ez vezetne a megjelenése apró „lépés” látható a figyelmes szem. De ha megváltoztatjuk a francia a linkeket, akkor hozzon létre egy világos és derékszögben a jelenlegi lapon, mint a képen látható:
Fogjuk elérni ezt csökkentésével az alsó padding a szokásos hivatkozásokat 1 pixel (5px - 1px = 4 képpont), majd hozzátéve, hogy pixel az aktuális link:
Ez a változtatás az alsó határ a látható a szokásos kedvencek, de elrejti az aktuális lapra. Kapunk 3. példa.
Utolsó lépések
A közeli pillantást volna észre az előző példában, a fehér területek a sarkokban könyvjelzőket. Ezek zavarják a hátsó sarkát átlátszatlan képet, hogy látható legyen az elülső bal sarokban a kép. Elméletileg tudtuk, hogy a sarkokban az azonos színű, mint a háttér mögött. De a lapok nőhet a magasság, és aztán vissza a gradiens háttér mozog, ami szín eltérések sarkok és gradiens háttér. Ehelyett meg fogja változtatni a képet, így átlátszó sarkokkal. Ha alkalmazzuk a stroke könyvjelzők simítás (anti-aliasing), definiáljuk, mint egy átlátszó szín (matt) átlagos értéke beállítható háttér gradiens.
Most, hogy a sarkok átlátható, egy darab a jobb oldali képet nézzük az átlátszó bal sarokban. Ennek elkerülése érdekében, adjunk hozzá egy kevés bal padding a lista elem szélességével egyenlő a bal oldali kép (9px). - Ahhoz, hogy menteni a szöveget középre behúzás hozzáadása után Listaelemre, ugyanezt az összeget a bal margó referencia (9px = 6px 15px) el kell távolítani
De ez a lehetőség nem megfelel nekünk, mint a bal oldali kép most eltávolodott a bal szélén a fület a 9 hozzáadott pixelek padding. Most, hogy a belső szélei a bal és jobb „ajtók” vannak egymáshoz, akkor már nem kell folyamatosan előre a bal oldali képen. És meg tudjuk változtatni a sorrendjét háttérképeket, azok alkalmazására ellentétes elemeket. Azt is meg kell változtatni a kép az aktuális lapon:
Ezzel, van egy példa 4. megjegyzés, hogy mi volna, hogy hozzon létre egy átlátszó sarkok lépések vezettek egy kis „halott” terület a bal oldalán, ha az nem reagál egeret. A holt zóna kívül a szöveget, de ez még mindig észrevehető. Átlátszó képek minden oldalán a fülek használata opcionális. Ha úgy döntünk, hogy nem a mi lap „halott” site, csak akkor kell használni színkitöltéssel a fülek mögé, hanem egy gradiens, és hogy a könyvjelzők sarkok az azonos színű. Addig fogjuk fenntartani az átláthatóságot a sarkokban. [Az IE / Win azt mondta: „halott” terület létezett a megtett lépésekről, és minden oldalról a link szövege. A megoldás erre a problémára vázolja fel a következő cikket a sorozat tolóajtók CSS rész II.-kb. fordító]
És végül, az utolsó simításokat. Mindegyiket: hogy minden szöveget félkövér, a szöveg a füleket a hagyományos barna, és a jelenlegi sötét szürke, az azonos színű a szöveg rendelni állapotát linkek lebeg. távolítsa el a aláhúzás linkek. Minden által ebben a pillanatban kiegészítéseket és módosításokat mutatjuk be az 5. példában.
Egy másik módszer a kompatibilitás biztosítása érdekében
Tekintsük a 2. példában azt elismerte a probléma IE5 / Mac, ami feszített fül teljes szélessége az ablak, az épület függőlegesen egymás alatt. Nem éppen a hatás keresünk.
A legtöbb böngésző, hogy alkalmazási tulajdonságok float elem magában foglalja a sűrítési a legkisebb méret által meghatározott annak tartalmát. Ha egy lebegő elem tartalmaz egy képet (vagy maga a kép), akkor csökken a kép szélességét. Ha csak szöveget tartalmaz, akkor csökken a szélessége a leghosszabb sor szöveg, amely nem tartalmaz kötőjelet.
Problémák merülnek fel IE5 / Mac, amikor egy blokk elem auto szélesség helyezni egy lebegő elem. Ebben az esetben, minden böngésző lebegő elem préseljük a lehető legkisebb szélessége, figyelmen kívül hagyva a belső rögzítő darab. De IE5 / Mac ebben a helyzetben nem. Ehelyett, hogy kiterjeszti az úszó és blokkolja a belső elemei a teljes rendelkezésre álló szélessége. Kerülő ezt a viselkedést, meg kell alkalmazni az úszó is összekapcsolni, de csak a IE5 / Mac, anélkül, hogy más böngészők. Először is, adjunk hozzá egy úszó egy meglévő szabályt. Ezután a „backslash” módszer, hogy elrejtse a IE5 / Mac új szabály, amely megszünteti az úszó minden más böngészők:
A 6. példa szerinti IE5 / Mac most megjeleníti a könyvjelzőket, mint várták. Más böngészők, semmi sem változott. IE5 / Mac tartalmaz számos CSS-hibákat, amelyeket rögzített változata IE5.1. Ezekből a hibákat IE5 / Mac szenved, és a módszer „tolóajtó.” Számuk meghaladja minden elképzelhető határait, és nem fogok foglalkozni velük. És mivel a frissítés 5.1 sokáig, mindenki számára elérhető, a százalékos Mac OS 9 és c telepített IE5 / Mac folyamatosan csökken, és nullához közelít.
Csak alaposan vizsgálják ki a módszert a „tolóajtók”, amely lehetővé teszi, hogy typeset a rendezetlen lista és a linkeket és a módosított néhány CSS szabályok füles navigáció egy egyszerű szöveget. Ez a navigációs gyors betölteni, könnyen támogatása, és a szöveg lehet jelentősen megnövelt bármely irányba anélkül, hogy elszakadna a design. Mondanom sem kell, mennyire rugalmas ez a módszer létrehozása során minden kifinomult megjelenésű navigáció?
Ezzel a technikával korlátozott, csak a képzelet. A utolsó példa csupán egy kiviteli alakot. De ez a példa nem korlátozza az elképzeléseinket.
Alkalmazza a technikát más hatások nem tartjuk itt is adhatunk. A példánkban mi változott a színe a szöveget a hover állapotban. de miért nem változtatja meg a háttérképet az egész érdekes élőpontokkal. Ha van egy kód két egymásba HTML elemek mindig tudunk használni CSS overlaying háttér képeket eredményez, és hatással, amit soha nem álmodott. Példánkban létrehoztunk egy vízszintes lapfülsor, de a módszer Tolóajtó lehet használni sok más esetben. Mi használja ezt a módszert javasol?
Alapítója és vezetője Stopdesign „és Douglas Bowman (Douglas Bowman) specializálódott egyszerű, világos és a fejlett design. Állandóan vitatja a status quo, és nyomja a határokat, hogy mi érhető el a meglévő webes szabványokat. Douglas volt főépítész az elismert újratervezése Vezetékes News tavaly. Azt ígéri, hogy nem lesz tartalom ezzel dicsőséget.