Hogyan tegyük egy tiszta css3 csúszka anélkül, hogy Script

előző ◈ a következő

By the way, ha megvagyunk, akkor is teljesen kész a css adaptív csúszka, csak, hogy módosítani kell a szélességét a fő tartályba max-width és a megfelelő képet.

Határozza meg a képek

Kezdeni, fussunk nem a legnehezebb feladat -, hogy megtalálják a képek az interneten, amely lehet használni, mint diák. Mondjuk, legyen az állatokat. Találtam három kép (a csúszka lesz nagyon egyszerű, három csúszda): az oroszlán, a tigris és a párduc. Szükséges, hogy azokat a kívánt méretet.

Ennek megfelelően meg kell meghatározni, hogy mi lenne a mérete a csúszka. Például 500 pixel széles és 350 magas. Később, akkor jegyezzük meg a stílus, most csak terv.

Kezdjük az alapvető elrendezés

Nos, a kiválasztott kép és kész, van egy mini-tervet arra, kezdjük egy egyszerű html-kód:

Hogyan tegyük egy tiszta css3 csúszka anélkül, hogy Script

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

Legyen ez a fő tartály, amely alapján a jövőnkre csúszkát és a gombokat, hogy ellenőrizzék őket. A többi elrendezés, melyet mutatok, meg kell adjunk hozzá.

Létrehoztunk három rádió gombok, melyek közül az egyik lesz alapértelmezés szerint be. Mindegyikük kap egy egyedi azonosítót. Egy kicsit később, akkor add hozzá az aláírást.

Azt is meg kell hozzá jelölést a blokkok dia:

Mint látható, esik külön edénybe.

Egy külön egységet hozott létre három úgynevezett aláírásokat ezek a gombok, de ebben az esetben fognak szolgálni minket a másik.

Segítségével az attribútum minden aláírás társítani az egyik gombot, ez lehetővé teszi számunkra, hogy dolgozzon velük szépen. Nem a rádió gombok, mert sajnos nem működnek stílusok és címkék. Bundle lehetővé teszi, hogy ezt, hogy ha rákattint az aláírás automatikusan kiválasztja és a rádió gomb, ami nagyon hasznos a számunkra.

Kezdjük az egészet stílusú CSS

Először be kell állítania a stílus a teljes tartályban.

Tehát azt, hogy a méret a korábban tervezett neki, és hogy egy kis teret felülről és relatív pozícionálás a tartály belseje minden elemét lehet elhelyezni teljesen.

A következő lépés az oldalról elrejtése gombok, még mindig felhívni őket nem lehet és nem kell a használatát őket.

A következő lépés - teszünk a blokk maga csúszka és annak tartalmát - diák.

Azáltal, hogy az szélessége és magassága egy értéket, akkor öröklik gyakorlatilag azt mutatják, hogy a böngésző venné az értékeket a csomagolást egységet. Így a készülék szélessége 500, magassága 350 képpont, amennyire szükségünk van.

Ezután adja meg az egyes diák a háttérképet. Mivel ez tartalmazza az átláthatóságot, akkor nem lát változtatásokat. Azonban, ha megváltoztatja a homály 0-1, kiderül, mi párduc, mint a háttér, menjünk vissza az átláthatósági 0.

Azt, hogy egy aláírás (és valóban, a kapcsolók)

Először meg kell rendezni őket nagyjából a közepén. Tettem ezt a segítségével abszolút pozicionálás és a negatív külső behúzás. Van általában központosító segítségével abszolút pozicionálás: set koordinátákat balra: 50%, ami után teszik negatív behúzás által hagyott szélességének a fele az elem.

Ezek a szabályok stilizálhatja kiadónk, és segítségével ál-hozunk létre a keretet a gombok és spozitsioniruem őket.

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

Is hozzá kerekítési 20%. Most akkor csak három zöld négyzet most még a tennivaló, hogy amikor rájuk kattint megváltozott stílus. Ha minden ezt, itt van a mágikus szükségünk szelektor:

De ez történik. Alapértelmezésben a címkék (négyzetek) és a fehér, és ezek nem láthatók, csak a zöld keretet. Ezek szelektorokban ha elmondjuk a böngésző: ha # point1 gomb a felhasználó által kiválasztott, a címke módosításához stílusok 1. szám, ha a kiválasztott # point2, alkalmazni a stílust a második címkét. Megértem, hogy előfordulhat, hogy nehéz megérteni mindezt, ha egy kezdő. Ebben a példában két ál-alkalmazott, és a szimbólum

amely lehetővé teszi, hogy válassza ki az elemeket felüli bemutatott neki a választó. Néhány egyszerű példa, hogy ha világossá tenni:

p - kiválasztja az összes bekezdések, amelyek után a jelölést Divs.

tétel - az összes elem egy csoportját tétel, amely a jelölésben, hogy lezárja a blokkon belül azonosítót. Azok, amelyek előtt a készülék nem lesz kiválasztva.

Azt hiszem, most már világossá vált. De ál-: ellenőrzött az egyik újítás és CSS3 segítségével alkalmazhatók stílusok, attól függően, hogy a rádió gombot, vagy négyzet be van jelölve, vagy sem.

Tehát, azzal a magyarázattal, hogy ez minden, mert most, hogy a legfontosabb dolog, hogy ez végül mind keresni! Adjuk hozzá a következő mágikus szelektor:

Itt látjuk a használata: ellenőrzött és

újra, de mint már elmagyaráztam nekik, akkor hiszem, hogy mi ezeket a választókat. De valójában milyen parancsot kap a böngésző, ha egy személy kiválasztja az első gombot, hogy láthatóvá tegye a megfelelő fotó. Mint látható, megváltoztatjuk a z-index, azaz a szám a réteg, és távolítsa el a teljes átláthatóság, helyette teljes fényelnyelés.

Mivel már regisztrált CSS minden csúszik a háttérképet, most lesznek helyettesítve, és láthatóvá válnak. Automatikusan az oldal betöltésekor a csúszka jelenik oroszlán, ha rákattint a második gomb - a tigris, amikor rákattint a harmadik - egy párduc. A csúszka hibátlanul működik!

Ugyanez nyilatkozatot

Az elején azt mondta, hogy az Advent a CSS3 csúszka lehet tenni pusztán ez a technológia, anélkül, hogy a parancsfájlok használatát, de bizonyos fenntartásokkal. Tehát, mint tudjuk, hoztunk létre a csúszka nem kapcsol csúszdák, ez csak akkor lehetséges, amíg valaki rákattint a gombokat. Igen, az ilyen korlátozásokat figyelembe kell venni.

Effektusok és kiegészítő diák

Így felveheti korlátlan számú új diák. Ehhez már csak be kell adni:

új aláírást (címke)

Új diák és fotókat is

Plusz ne felejtsük el, hogy egy új választó a stíluslap. Azt is szeretném elmondani, hogy ebben a cikkben, már végre egy nagyon egyszerű csúszka. Nincs sallang, mint mondják.

Add hatások valójában nem nagyon nehéz. Csak add a zökkenőmentes átmenetet a diák, és a kívánt átalakítás.

Most fotók vannak döntve 55 fok, és ez lesz a színe pedig 90 fok. De annak a ténynek köszönhető, hogy alapértelmezés szerint rejtett csúszda, csak nem látni. És ez szükséges, de látni fogjuk, az eltörlése ezeket a hatásokat, mikor fog váltani diák. Mivel adott a zökkenőmentes átmenetet, a törlési hatások bekövetkezésének simán, és majd meglátjuk, hogy képeket povrachivayutsya a normális, és látja a színeket transzfúzió.

Az ötlet? Megkérdeztük a hatását láthatatlan képet, és mikor fordulnak elő időnk észrevenni a eltörlésének hatásait. Itt vagyok, persze, nem használja az összes szükséges szállító változat előtétek mindent dolgozni a régebbi böngészők, de ez csak a kedvéért a megtakarítás térben és időben. Általában a túl ezen hatások tettem csak a kedvéért egy példa, sőt, mi is hozzá hatásukat, amit akar.

Talán ez befejezem ezt a cikket. Mi történt csúszka gyönyörű fordulópont új fotó hatásokat. Persze, ez nyilvánvaló hátrányai, de ez egy csúszka tiszta CSS3. Nos, többet megtudni a technológia akkor a mi természetesen ott is jobban kezelni az új választókat.

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

A legtöbb IT hírek és webfejlesztés A csatorna-távirat