Technológiai overlay css
Sablonok, egy sor a legjobb gyakorlatok és technikák megoldását célzó egyik leggyakoribb „problémák” design, általában bemutatott összefüggésben a tervezési elvek. Egyikük - elve „, hogy maradjon az oldal» (Maradok az oldalon). Ez azon a tényen alapul, hogy az oldal frissítése, az rossz a felhasználó gondolkodási folyamatait, így az úgynevezett vakító, ha változik. és el kell kerülni a vizuális túlterhelés a felhasználó mikor és hol lehet.
Mi lehet ésszerűen dönteni, mikor kell tartani a felhasználó az oldalon, és szimulálni ezt a folyamatot. Az egyik módja annak, hogy a látogató ugyanazon az oldalon -, hogy megpróbáljuk felvenni néhány esemény a jelenlegi helyzetben, az oldal megjelenítését „mini page” vagy a feltörekvő párbeszéd egy réteg tetején az aktuális oldalon. Egy ilyen réteg hívjuk szuperpozíciójaként overlay.
Felszíni overlay lehet használni, hogy kérdéseket tegyen fel, benyújtja tulajdonságok jelzik haladás, utasításokat ad, vagy az információ megjelenítésére. Ők lehet aktiválni közvetlenül a felhasználó intézkedéseket (például kattintva az akció, amelynek az egeret a tárgy) vagy bevezetését webes alkalmazások különböző szakaszaiban befejezését a cselekvés. - Tervezési webes felületek
Ha a felhasználói felület csak a látszat egy modális ablakban jelenik meg, jellemzően használt album hatás, és a fennmaradó oldal szürke, jelezve, hogy az inaktív. E bemutató - bemutatni Önnek néhány módszer, hogy lehet alkalmazni, hogy hozzon létre egy eltakaró overlay a CSS, és kijelölje „profik” és a „hátránya” az egyes technikát azok leírását.
MÓDSZER №1: abszolút pozicionált elemek
Az első módszer, hogy hozzon létre az átfedés - abszolút pozicionálás a HTML elem oldalt. A jelölő egy üres div és CSS DIV abszolút pozicionált és rendelt z-index bolshii fontosságát annak érdekében, hogy az oldalon marad a tetején az összes többi elemet, kivéve a modális ablak nyitva van a tetején a tábla, amely kap több magasabb z-index, mint a overlay.
Tegyük fel, hogy a mi elrendezés adunk egy üres div, és ő nevezi osztály .overlay, de a CSS elhelyezése ezen overlay oldalanként:
Ez a kód nagyon egyszerű, de ha ezt a módszert használja, amit tudnod kell valamit.
Először is, győződjön meg arról, hogy az overlay egyáltalán elhelyezve, hogy a szervezetben. Tehát, ha a bevezetését, például, amelyek a másik, és elhelyezése a div, hogy más div beállított relatív, az overlay teljesen elhelyezve, hogy a tartály helyett szervezetben. Tehát meg kell adni, vagy a lehetőséget, hogy a kényszerítő közvetlen alárendelt egység test, vagy ellenőrizze, hogy egyik gyerek nincs telepítve a helymeghatározás relatív.
Több az ezt a módszert kell jegyezni, hogy nem kell használni túl magas értékeket a z-index. Sok fejlesztő, mint hogy egy nagyon nagy érték, mint a z-index: 999999; elhelyezésénél az overlay vagy bármely más tagja a tetején a többi elem az oldal. Ez nem szükséges. A legtöbb esetben a z-index értéke 10, néha még kevesebb is elegendő, hogy az oldal elem maradt a tetején. Csak azt kell tudni, hogy ha a többi elem z-index, és minden, akkor csak meg a z-index overlay már a legmagasabb megtalálható.
Végezetül meg kell szem előtt tartani, hogy ezzel a módszerrel ad hozzá a jelölést egy üres div, és ez persze nem szemantikailag.
A módszer előnye, hogy támogatja az összes fontosabb böngészők és még régebbi, akár IE8.
Tettem egy példa Codepen, így ki lehet próbálni az eredmények ezt a technikát. Poprobuytezamenit min-height html és a test magasságának, vagy távolítsa el a viszonylagos elhelyezése a szervezetben, és nézze meg, hogyan lépjünk át a sablont kell nyírni az alján.
MÓDSZER №2: elem rögzített helyzetben
Ismét ezt a technikát, akkor csak egy üres elem jelölését, szemantikus jelölés, ami ellen. Hogyan lehet ezt elkerülni?
MÓDSZER №3: ALKALMAZÁSI ál
Annak elkerülése érdekében, hozzátéve, az üres elemeket jelölő helyett létrehozni az overlay, akkor ál. Stílusok és megoldások e módszer sok tekintetben hasonlít az előző, azzal az eltéréssel, hogy ahelyett, hogy a stílus és a helyét egy üres elem az osztály .overlay szánunk a stílus pszeudo szerv: előtt vagy: utána.
Kiválaszthatja a helymeghatározás ál abszolút képest test, vagy rendeljen hozzá egy fix elhelyezése. Bármit is dönt, akkor meg kell gondolni már említettük, az első két módszer kérdést. Itt egy példa:
MÓDSZER №4: alkalmazás ABLAK modális széles profilú
Sablon létrehozása árnyékolt háttérrel ily módon nem igényel további alkatrészeket. Ehelyett lehet alkalmazni, hogy egy nagy modális ablak áramkört tompítás a többi oldal.
Köszönjük, hogy ezt a technikát, hogy Leah Faith (LeaVerou), ő volt az első, hogy ossza meg velünk a twitter. Tehát, képzeljük el, hogy van egy olyan elem jelölését, ami modális ablak, ami megjelenik az alábbiak alkalmazását:
Persze ne felejtsük el, hogy állítsa be a z-index modális ablakok annak érdekében, hogy tartsa a tetején a többi oldal elemek.
Itt kell megjegyezni, hogy amikor ezt a módszert használja, a sötét overlay alatt modális ablak nem távolítja el az egér kölcsönhatás más oldalelemek. Ön nem lesz képes megakadályozni a dob az index esemény és az egér, ha rákattint egy másik oldalra elem, ami a legtöbb esetben káros hatással lehet. Tehát azt kell megvizsgálni, hogy ilyen hatás szükséges, az alkalmazás, vagy sem, mielőtt dönt arról, hogy használja ezt a módszert.
Szintén fontos megjegyezni, hogy a vázlat készült határ-a, és kövesse a lekerekített sarkokkal. Ha megvannak, ahogy az alábbi példák, észre fogod venni, egy rés. Tehát ez a módszer nem a legjobb választás, ha van egy modális ablak lekerekített sarkokkal.
MÓDSZER №5: alkalmazás az ablak SZÉLES modális Shadows UNIT
Az egyetlen különbség az előző technika, hogy ahelyett, hogy egy nagy kör is alkalmazni kell a modális ablak széles árnyék box.
Az eredmény, természetesen, szintén nagyon hasonló.
Természetesen kivetése sötét eredő ez a módszer is, nem akadályozza kölcsönhatás a többi oldal elemeit, amelyek alapján a modális ablakot.
blokk árnyék nem könnyű megmutatni, és a dolgok még rosszabb, ha a széles árnyékok alkalmazott rögzített elem, mert ez okozhat a böngésző, hogy dolgozza át a nagy terület az oldal görgetés esetén. Különösen rossz jön Firefox'e ahol a rögzített elemek és a széles árnyékában CSS blokk jelentősen csökkenti a sebességet. legfeljebb 2 fps görgetés és manipulálni a DOM.
MÓDSZER №6: USE ELEMENT HTML DIALOG
Utolsó megbeszéltük technika nagyon új és tényleg elképesztő! És a szemantikus is, ha létrehozol egy overlay a dialógus vagy modális ablakot.
Most már könnyen létrehozhat és hozzá stílusok használata az elem HTML ablakot. párbeszédablak elem biztosítja a belső funkciókat. Párbeszéd létezik a DOM-fa, és rendeljen stílusok lehet egy egyszerű CSS. párbeszéd az elem része a kérelem, amellyel a felhasználó használja, hogy egy feladatot, például egy párbeszédablak vagy felügyelő. - HTML specifikáció WHATWG
Egy elem HTML párbeszéd négy fő tulajdonsága van. amelyek közül hármat mi leginkább létrehozása érdekli overlay (negyedik idején ezt az írást még nem alkalmazták):
Dialógusok is öröklődik. Amikor egy modális párbeszédpanel nyitva van, akkor blokkolja a többi dokumentumot. Ha szabályozni használata esetén fennáll a több modális dialógusok stack „végzett dialógusok.”
Az új átfedő réteget a meglévő CSS kontextusok végez viselkedés „mindig felül”. És a párbeszéd, Nagyítás és specifikáció a felső réteg. Modális párbeszédpanel tartózkodnak a felső réteget. Szóval nem kell aggódni a z-index beállítása manuálisan a modális ablak marad a tetején minden oldal elemeit.
Cool, mi? Dialog elem középre defaul, de mint említettük az első bekezdésben, akkor használja az abszolút helymeghatározás, így lapozhat. Akkor megkerülni az abszolút helymeghatározás alapértelmezésben beállított fix helyzetben a stíluslap. Ha úgy dönt, hogy változtatni kell a fix helyzetben, akkor is be kell állítani az értékeket a felső és bal oldali, valamint összehangolja azokat. Dialog elem lehet helyezni a DOM sehol.
Lehet, hogy egy stílust ugyanúgy, mint bármely más eleme a blokk szintű.
Ezen túlmenően, dialógus elem együtt jár egy ál-nevét. a hátteret, amely lehetővé teszi, hogy rendelni stílusok háttérbe alatt modális ablak, ami így egy sötét overlay hatás, amelyet már korábban létrehozott az előző öt technikát, csak ebben az időben, akkor könnyen létre a sablon hozzárendelése pszeudoelem stílusok, majd alapértelmezés szerint a dialógus elem .
Ez az, amit fog kinézni az eredmény:
Ez minden kell ahhoz, hogy megteremtse a sablont a dialógus elem! Hogy ez a munka még könnyebb - párbeszéd jön az API, miért vagy elrejtése a modális ablak lesz feladat-cukorka, és ott, ahol többek között a használt típusú show () és hide (). További részletek a párbeszéd elem és API és élőben példák lehetnek ebben demo Eyzhi Kitamura (Eiji Kitamura). A demó egy olyan példa, Poliphili módban. amikor nézd meg egy böngészőt, amely még nem támogatja a párbeszéd eleme.
Epilógus
Azt hiszem, néztük szinte az összes használható eljárások létrehozására overlay modális ablakok oldalt. Ahogy sejteni lehetett, a legújabb technológia felhasználásával egy elem párbeszéd a legalkalmasabb, hogy megteremtse a overlay modell ablak vagy párbeszéd, de abban az időben az írás, ez csak a támogatott a Chrome Canary megfizethető polifiletikus csoport. Így meg kell, hogy legyen óvatos böngésző támogatja, ha megpróbálja használni azt. De amint ő t is támogatni fogja az összes főbb böngészők, ez lenne a legjobb módja a sablont, és kiválóan elérhető lesz vele dolgozni.
Felülvizsgálat: Team webformyself.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat