Tükröződés létrehozása a css3 és a css segítségével
A képekre alkalmazott visszaverődés hatása az egyik leginkább figyelemre méltó hatás, amely a modern webdesignban jelent meg.
Azonban ennek a hatásnak a létrehozása kizárólag a CSS3 használatával meglehetősen hosszú és kifogástalan feladat. Ezenkívül a képek stílusa mellett meg kell változtatnod a css fájljaid más részeit is.
A másik probléma az, hogy a hatása nem minden böngészőben működik. Szerencsére most van egy Reflection.js nevű segédprogram.
Ebben a leckében megmutatom, hogyan hozhat létre tükröződést kétféleképpen: először - a tiszta CSS-en, akkor - a Reflection.js.
Kötelező források
További munkára lesz szükségünk:
- kép az ízlésre;
- Reflection.js;
- idő és türelem.
Itt letöltheti a forrásfájlokat erre a leckére.
CSS3 verzió
A HTML-fájlban beillesztjük a képet, és beillesztjük a HTML5-elemhez
CSS-fájlunkban a következő változtatásokat kell végrehajtanunk:
- Adjon hozzá 60 képpontot a kép tetején, és állítsa be a képernyőre az érték automatikus értékét;
- Használja a -webkit-box-reflect tulajdonságot. hogy tükrözze a képet;
- Maszkot alkalmazzon a képre a -webkit-gradient segítségével, hogy csak a reflexió egy részét jelenítse meg.
A fenti kód használatával kaptuk ezt a szép képet:
A Mozilla fejlesztői webhely szerint. A CSS property -webkit-box-reflect csak a Google Chrome és az Opera böngészőben működik.
Bár a kívánt hatás eléréséhez más módok is vannak, a helyzet már világos: nehéz és időigényes ennek a hatásnak a létrehozása.
De ebben az üzletben is van egy fényes oldal: a Reflection.js megment minket a böngésző kompatibilitásának ápolásától. Lássuk, milyen könnyű elérni a könyvtár használatát.
MooTools-verzió
Mielőtt elkezdi dolgozni a jelölést, töltsön be innen a reflection.js és a mootools.js parancsot. Ezen oldalak fejlécében mindkét fájlhoz linkeket kell létrehoznunk:
A HTML-fájlunkban, mint az előző példában, az elem által csomagolt képet kell elhelyeznünk
Ezt az osztályt a reflection.js fogja használni, hogy ugyanazt a hatást alkalmazza az ezen osztály összes képére:
A script MooTools verziója a reflect () módszert használja a hatás létrehozásához. A különböző beállításokat megváltoztathatja. Például az opacitás (átlátszóság) opció:
Kész! Így lehet a dolgok egyszerűen olyan csodálatos eszközzel, mint a Reflection.js:
következtetés
Bár csak a Photoshop vagy CSS3 használatával hozhat létre reflexiós hatást, sok időt vesz igénybe, és további kérdéseket tesz fel a tervező előtt. Könyvtár Reflection.js. írta Christophe Bale, segít megérteni ezt a figyelemre méltó hatást.
Ajánlom ezt a csodálatos eszközt a Photoshop helyett, vagy közvetlenül a CSS-tulajdonságok szerkesztésénél, hogy egyszerűsítse és felgyorsítsa a fejlesztést.
A "CSS3 és Reflection.js használatával" című cikket a Saitostroenie projekt barátságos csapata készítette el az A-tól Z-ig.