Una dintre proprietățile de aplicare amuzante ale CSS3 box-shadow este crearea unui chenar dublu în jurul elementului. efect foarte interesant pentru înregistrarea de pagini, dar va funcționa doar în versiunile mai noi de browsere care acceptă box-shadow.
Cu toate acestea, există mai multe metode pentru a crea un astfel de efect. Și utilizarea evidentă a unei imagini de fundal este foarte departe de a fi ideal.
In acest tutorial, există cinci metode pentru a crea un cadru dublu în jurul elementului. Și numai unul dintre ele necesită o imagine, și oricine altcineva folosește codul CSS pur cu suport excelent în browser.
Metoda 1: de frontieră și schiță
Această metodă funcționează numai în browsere care acceptă proprietatea contur (totul cu excepția IE6 / 7). Adăugați elementul atât proprietăți de frontieră și schiță.
Motivul pentru care funcționează această metodă este faptul că conturul cadrului este întotdeauna afișată pe exteriorul dreptunghiului. Problema manifestă proprietăți schiță folosind elemente plutitoare, deoarece rama se suprapune cu elementele adiacente.
Metoda 2: elementul pseudo
Această metodă necesită o poziționare absolută a cadrului:
Metoda 3: umbra
Cea mai bună metodă, deoarece necesită doar o singură linie de cod pentru a seta proprietățile box-umbra.
Pentru apariția unui cadru dublu folosind două umbre. Acestea sunt definite printr-o virgulă. Estomparea este setat la 0. Din a doua umbra se suprapune peste prima, are de două ori lățimea. Punctul cheie - utilizarea de culori opace, care creează o delimitare clară între cadrele.
La fel ca proprietatea schiță. box-shadow nu afectează elementele învecinate și le poate suprascrie. Prin urmare, este necesar să se stabilească câmpul pentru formarea aspectul compoziției.
Firește, sprijinul proprietatea box-shadow este limitată la noi browsere.
Metoda 4: Element div suplimentar
Metoda folosește un element exterior
Elementul exterior are o dimensiune puțin mai mare, ceea ce creează iluzia unui cadru dublu.
Metoda 5: proprietate de frontieră imagine
O altă metodă nouă este adesea uitat CSS3 proprietate de frontieră imagine:
Știi o metodă diferită?
5 lecții coloana ultima „CSS“
un efect redus cu personaje de animație interactive.
Conceptul mic de sfaturi distracție, care sunt puse în aplicare pe SVG și anime.js. În plus față de stilul special în exemplul realizat animația și transformarea obiectelor grafice.
Experiment: animat litere SVG bazate pe anime.js bibliotecă.
afișare cool pagina web a experimentului pe care „first-person“ prin ochelari de soare.
Script-pilot drop-down de navigare.
aleksandr.argen
Totul e bine, dar există dificultăți cu limite diferite (de exemplu, pentru a crea efectul 3D) Cu toate acestea, cea mai bună opțiune - este de două div-și unul în altul. Încă poți mile mixte - tabel (div) sau div (a se vedea tabelul). Nu există restricții cu privire la browser-ul și puteți face proprietățile pentru fiecare parte.
zloboglaz
Total de acord! Am ispolzavat recent doar o astfel de proiectare pentru linia de demarcație dublă.
border-image: url (multiple-frontiere) 12 12 12 12 repetare; / * Pentru Opera * / .gif uitat de frontieră imagine: url-ul (-borders.gif multiple) 12 12 12 12 repetare; / * Pentru Opera * /, astfel de lucrări)
să nu mai vorbim de faptul că, fără în FF și IE nu va funcționa.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!