Dupla keret felhasználásával css
Az egyik szórakoztató alkalmazás tulajdonságait CSS3 box-árnyék létrehozása kettős határ az elem körül. Nagyon érdekes hatása regisztrációs oldalak, de ez csak akkor működik, az újabb verziók a támogató böngészők box-árnyék.
Van azonban számos módszer, hogy hozzon létre egy ilyen hatás. És nyilvánvaló használatát háttérképet nagyon messze van az ideálistól.
Ebben a leírásban, öt módszer is létezik, hogy hozzon létre egy dupla keret elem körül. És csak az egyiket igényel egy képet, és mindenki más is használja tiszta CSS kód kiváló támogatást a böngészőben.
1. módszer: határ és vázlat
Ez a módszer csak akkor működik a böngészők, amelyek támogatják a körvonal tulajdonság (mindent, kivéve IE6 / 7). Akkor add az elem mindkét tulajdonságok határ és körvonalait.
Az ok, ez a módszer működik, hogy a keret körvonala mindig megjelenik a külső a téglalap. A probléma nyilvánul tulajdonságok körvonalazzák segítségével úszó elemeket, mivel a keret átfedi a szomszédos elemekkel.
2. módszer: pseudo elem
Ez a módszer egy abszolút pozicionálás a keret:
3. módszer: árnyék
A legjobb módszer, mivel az csupán egyetlen kódsort a tulajdonságokat box-árnyék.
A megjelenése egy dupla keret két árnyékok. Ezek meghatározása vessző. Elmosódás értéke 0. Mivel a második árnyék átfedi az első, azt a szélesség kétszerese. A lényeg - használata fedett színek, amely létrehoz egy egyértelmű határ a keretek között.
Mint a vázlatot tulajdon. box-shadow nem érinti a szomszédos elemeket és felülbírálhatja őket. Ezért meg kell határozni a területen alkotó megjelenése a kompozíció.
Természetesen a támogatás box-shadow tulajdonság csak az új böngésző.
4. módszer: Kiegészítő elem div
A módszer egy külső tagja
A külső tagnak van egy valamivel nagyobb méretű, amely létrehozza az illúzió egy kettős keretben.
5. módszer: border-image tulajdonság
Egy másik új módszert gyakran elfelejtett tulajdonság CSS3 border-image:
Tudod más módszert?
5 óra utolsó oszlopában „CSS”
Csekély hatása interaktív animációs karakter.
Kis fogalma szórakoztató tipp, hogy végrehajtsák az SVG és anime.js. Amellett, hogy a speciális stílust a példában realizált animáció és az átalakulás, a grafikus objektumok.
Kísérlet: animált SVG betűk alapján anime.js könyvtárban.
Cool weboldal megjelenítését a kísérlet, amelyben a „first-person” a napszemüveg.
A kísérleti script legördülő navigációt.
aleksandr.argen
Ez mind jó, de vannak nehézségek különböző határait (például, hogy megteremtse a hatását 3D) Mégis, a legjobb megoldás - ez a két div-és egy másik. Továbbra is vegyes mérföld - táblázat (div), vagy div (lásd a táblázatot). Nincs megkötés a böngésző, és tudod, hogy a tulajdonságok a két oldalon.
zloboglaz
Teljesen egyetértek! Nemrég ispolzavat éppen egy ilyen terv a kettős választóvonal.
border-image: url (többszörös határait) 12 12 12 12 ismétlés; / * A * Opera / .gif elfelejtett border-image: url (több borders.gif) 12 12 12 12 ismétlés; / * A * Opera / így működik)
Nem beszélve arról a tényről, hogy anélkül, hogy az FF és az IE nem fog működni.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!