Megértjük a klip-út
Az egyik legjobb dolog a tanítás, hogy a diákok jönnek a friss ötleteket. Az ipari fejlődés, hajlamosak vagyunk azt hinni, a feladatellátás és így hiányzik az új érdekes technikát.
Ez volt az első olyan projekt héten nálunk edzőtábort. A single-site, bemutatva annak megértését, HTML és CSS: használja szemantikus jelölés és CSS stílus. Az egyik diák, Heather Banks. Azt akartam, hogy szaporodik a hatása Squarespace. ahol ha rámutatva div úgy tűnt, szelet.
Ismerve őt korábbi tapasztalatok HTML és CSS, ez a probléma teljesen saját hatáskörén belül, de úgy döntöttem, hogy segítsen neki megvalósítani ezt a hatást. Tedd metszés menüpont nem könnyű feladat, ha mozog, és az első gondolata az volt, hogy egy kis képet, hasonlóan a háttérben, és állítsa be, mint a háttérben pseudo-elemekre után. A probléma az, hogy ez a módszer nem adaptív és kiszámítható.
Bevezetés a clip-path tulajdonság
Ez a tulajdonság a szabvány részét, amelynek az állapota munkatervét, és lehetővé teszi, hogy elrejtse a kép egy része maszkot. Míg clip-path nem széles körben támogatott minden újabb böngészők (nem támogatott a Firefox és az IE), de ez jól működik a Webkit böngésző.
Megjegyezzük, hogy használja az ingatlan most, meg kell adnia egy előtagot -webkit.
Bízza az ingatlan csak meg kell adnia a párok halmaza X és Y. Ezekből az értékekből megépíteni a görbe, és a kép levágott a görbén.
Hozhat létre a különféle formájú körök, ellipszisek, sokszögek. Minden korlátozott, csak a képzelet szab határt.
egyszerű háromszög
Effect fenti érjük egyetlen elem azokra alkalmazott és tulajdonságai clip-path.
Hű, nézzük részletesen
Csakúgy, mint a helymeghatározás, arra kell gondolnunk, a koordinátái X és Y tengelyek X: 0 és Y: 0 kezdve a bal felső sarokban az elem. X koordináta: 100% megfelel a jobb szélén, és az Y koordináta: 100% - bal szélét elem.
Megértettem tökéletesen. Ily módon hoztuk létre az alábbi pontokat.
Egyszerű útvonal indul a bal alsó sarokban pont belül 50% vízszintesen a felső határ, és 100% vízszintesen az alsó határt. Három pontot! Háromszög!
Bármi, ami nem esik ezeket a határokat, díszítve. Az elem maga is azt állítja, méretei, csak megváltoztatja a kijelzőn.
A fenti példában használt egy sokszög alakú, és meghatározott egy sor pár x és y, vesszővel elválasztva. De mi is használ más formáit figyelembe különböző értékeket.
kör
Ahhoz, hogy hozzon létre egy kört, meg kell adnia a három értéket. X és y koordinátái a kör középpont és a kör sugara. Beállítása után a tartomány, használtuk a kulcsszót, hogy közvetítse a középpontjának koordinátáit.
Gyakran van szükség, nem kör, hanem ellipszis. Annak meghatározására, az ellipszis kell beállítani négy értéket: a sugár X-tengely, Y-tengely sugara a kulcsszó és elválasztjuk a központban koordináták x és y.
lekerekített téglalap
(Nem lehet stabil munkát a Google Chrome)
Lehet, hogy hozzon létre egy téglalapot lekerekített sarkok és élek sokszögek - ez nem az, amit meg kell. Ezután hasznos lehet alakja a süllyesztés. Tart négy érték, meghatározó felső, jobb, alsó és bal oldali határoló régió, valamint a négy meghatározó paraméterek a lekerekítés sugara elválasztjuk kulcsszó sugara.
Jó hír, van egy rövidített:
QH
- Kör: kör (sugár x tengely y-tengely)
- Ellipse: ellipszis (x-rad y-rad az x-tengelyen y tengely)
- Sokszög: poligon (x-tengely Y-tengely, x-tengelyen y tengely.)
- Betét: süllyesztés (jobb felső bal alsó kerek felső sugár jobb sugarú alsó sugara bal sugár)
Hozzon létre egyéni formák
Kör és ellipszis korlátozódik csak néhány értéket, míg a sokszögek - ez gyakran a legjobb választás létrehozása bonyolult alakzatokat. Az a képesség, hogy meghatározza több pontot tudunk csökkenteni a terméket, ahogy tetszik.
A blokkban a szöveget a képregény
Most van egy ötlet formák és azok létrehozását, nézd meg, hogyan tudod használni őket, hogy hozzon létre hatásokat.
Mi lehet alkalmazni az ingatlan, ha lebeg a kurzort egy elemet, és használja a tulajdonságait átmenet teszi az átmenetet simább, de meg kell, hogy kezdeti állapotban az összes kordinaty használható formában, ha mozog.
gyakorlati haszna
Mivel a támogatás clip-path korlátozódik pillanatnyilag WebKit böngésző, komoly korlátai annak használatát. A Firefox, mert ez az SVG maszk, de a zökkenőmentes átmenetet a segítségével átmenet ebben az esetben nem mindig lehetséges.
Általában, ha szeretné felfedezni ezt a funkciót, a Chrome és más böngészők WebKit, mint a Safari, valamint támogatja azt.
Térjünk vissza az eredeti problémához
Az egész kezdődött azzal a ténnyel, hogy mi volna, hogy újra a hatása navigáció Squarespace. Forgalomba egyik eleme másikkal szemben, és segítségével klip-út a menüpontok, akkor újra a hatását mindenféle képek csere nélkül.
Hibát talált? Orphus: Ctrl + Enter