Sunt sigur că ești deja familiarizat cu proprietatea css border. Înveți ceva nou pe care nu știai despre bordura css înainte? Ei bine, nu numai că vei învăța, dar vei vedea și câteva lucruri noi pe care nu le-ai știut niciodată înainte!
Nu numai că CSS3 poate fi folosit pentru a rotunji colțurile, dar și codul CSS pur poate fi folosit pentru a crea forme complexe... În trecut, puteai folosi imaginea de fundal pentru a da impresia de colțuri rotunjite. Datorită noilor tehnici de utilizare a borderului, o putem face în cod pur css.
Elementele de bază ale utilizării borderului css
Cu siguranță, ești deja familiarizat utilizare standard proprietăți de frontieră:
Chenar: 1px negru solid;
Codul de mai sus va reda un chenar de 1px, care va fi negru. Simplu și ușor. De asemenea, puteți extinde puțin sintaxa:
Lățimea chenarului: gros; chenar-stil: solid; culoare-chenar: negru;
În plus, pot fi utilizate valori specifice. proprietăți de frontieră-latime, trei Cuvinte cheie a: subțire, mediu, gros.
Dar utilizarea sintaxei extinse nu este întotdeauna practică. Să aruncăm o privire la un exemplu când trebuie să schimbați culoarea chenarului casetei la trecerea mouse-ului. În acest caz, folosirea sintaxei scurte este mult mai ușoară:
Casetă (chenar: 1px roșu continuu;) .box: hover (chenar: 1px verde continuu;)
Mai elegant și mai simplu se poate face după cum urmează:
Casetă (chenar: 1px roșu continuu;) .box: hover (chenar-culoare: verde;)
După cum puteți vedea, tehnica avansată este utilă și atunci când modificăm doar unele proprietăți: lățime, stil, culoare și altele.
Frontiera-Raza
Frontieră-rază este proprietatea „de aur” a CSS3 - prima și cea mai comună proprietate care a devenit practică și utilă. Cu excepția IE8 și mai jos, toate browserele redau colțuri rotunjite cu aceasta.
Deși, este necesar să folosiți prefixe speciale pentru Webkit și Mozilla pentru ca stilul să fie corect.
Webkit-border-radius: 10px; -moz-border-radius: 10px; chenar-rază: 10px;
În zilele noastre, putem elimina prefixele speciale și putem folosi forma standard de chenar-rază.
Un alt avantaj este că putem folosi valori speciale pentru fiecare parte a blocului:
Chenar-sus-stânga-rază: 20px; chenar-sus-dreapta-rază: 0; raza-chenar-jos-dreapta: 30px; raza-chenar-jos-stânga: 0;
În codul de mai sus, setarea chenarului-sus-dreapta-rază și a chenarului-jos-stânga-razei la zero poate crea forme uimitoare. Deși elementul poate moșteni unele proprietăți care vor trebui resetate la zero.
La fel ca marginea și umplutura, putem condensa sintaxa:
/ * stânga sus, sus în dreapta, dreapta jos, stânga jos * / border-radius: 20px 0 30px 0;
Ca exemplu, folosind proprietatea border-radius, vă voi arăta „lămâia” pe care designerii o folosesc adesea atunci când proiectează site-uri web:
Lămâie (lățime: 200px; înălțime: 200px; fundal: # F5F240; chenar: 1px solid # F0D900; chenar-rază: 10px 150px 30px 150px;)
Trecând dincolo de elementele de bază
La mulți designeri, toate cunoștințele în domeniu proprietăți css graniță, acolo se termină. Dar mai sunt mai multe chestii tari cu care poți crea lucruri uimitoare!
Structuri complexe de frontieră css
Există multe tehnici de creare a modelelor folosind structuri complexe de frontieră. De exemplu, să ne uităm la următoarele...
Stil de frontieră
Folosim întotdeauna binecunoscutele proprietăți solide, punctate și punctate. Dar există câteva alte proprietăți în stilul graniței: groove și creasta.
Chenar: 20px groove # e3e3e3;
Sau în sintaxă extinsă:
Chenar-culoare: # e3e3e3; lățime chenar: 20px; chenar-stil: canelura;
Deși aceste proprietăți sunt utile, ele nu sunt baza pentru cadre complexe.
Contur
Cea mai populară tehnică pentru crearea unui chenar dublu este utilizarea proprietății outline.
Casetă (chenar: 5px solid # 292929; contur: 5px solid # e3e3e3;)
Această metodă funcționează excelent, deși ne limitează la doar două cutii. Uneori trebuie să creați un chenar gradient care constă din mai multe straturi... cum atunci?
Pseudo-elemente
Când tehnica conturului nu este suficientă mijloace alternative este de a folosi pseudoelementele: înainte și: după. Cu care puteți adăuga cadre suplimentare la element:
Casetă (lățime: 200px; înălțime: 200px; fundal: # e3e3e3; poziție: relativă; chenar: 10px verde continuu;) / * Creați două casete cu aceeași lățime a containerului * / .box: după, .box: înainte (conținut: ""; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0;) .box: după (bord: 5px roșu continuu; contur: 5px galben continuu;) .box: înainte (chenar: 10px albastru continu;)
Nu foarte elegant ca aspect, dar macar, funcționează. Este puțin problematic să înțelegi secvența de culori din cadru... dar poți înțelege.
Cutie-Umbră
Un „mod infantil” interesant de a crea acest efect este utilizarea proprietății CSS3 box-shadow:
Casetă (chenar: 5px roșu continuu; casetă-umbră: 0 0 0 5px verde, 0 0 0 10px galben, 0 0 0 15px portocaliu;)
În acest caz, am fost mai deștepți, folosind o proprietate special concepută pentru umbră. Schimbând parametrii x, y, blur la „zero”, putem folosi diferite culori pentru a crea multe cadre.
Dar există o problemă, în browserele mai vechi care nu înțeleg proprietățile box-shadow, doar un chenar roșu de 5px va fi vizibil.
"Tine minte! Designul site-ului ar trebui să arate cross-browser, adică același în toate browserele. Inclusiv versiunile vechi.”
Schimbarea unghiurilor
Pe lângă cele folosite sens simplu border-radius, putem specifica două separate - prin separarea lor cu / vom specifica raza orizontală și verticală.
De exemplu:
Raza-chenar: 50px / 100px; / * rază orizontală, rază verticală * /
... este la fel ca:
Chenar-sus-stânga-rază: 50px 100px; chenar-sus-dreapta-rază: 50px 100px; raza-chenar-jos-dreapta: 50px 100px; raza-chenar-jos-stânga: 50px 100px;
Această tehnică este potrivită pentru a crea forme de bloc unice. De exemplu, iată cum puteți crea un efect de hârtie înfășurată:
Casetă (lățime: 200 px; înălțime: 200 px; fundal: # 666; chenar-sus-stânga-rază: 15em 1em; chenar-jos-dreapta-rază: 15em 1em;)
Forme CSS folosind chenar
Această tehnică arată cum puteți crea formulare CSS, folosind elemente cu dimensiuni zero de înălțime și lățime. Esti surprins? Sa vedem un exemplu...
Pentru următoarele câteva exemple, vom folosi următorul marcaj:
... și următorul stil de bază:
Cutie (lățime: 200px; înălțime: 200px; fundal: negru;)
Cel mai comun exemplu folosind CSS forme - crearea unei săgeți curgătoare. Secretul din spatele acestei săgeți este să creezi o graniță cu Culori diferite pentru fiecare parte. Apoi, punem atribute de lățimeși înălțimea cu 0.
Atribuiți clasa de săgeți blocului div:
Săgeată (lățime: 0; înălțime: 0; chenar-sus: 100px roșu continu; chenar-dreapta: 100px verde continuu; chenar-jos: 100px albastru continu; chenar-stânga: 100px galben continu;)
Pentru a demonstra, folosim mai întâi sintaxa extinsă. Apoi, putem elimina cod suplimentar folosind sintaxa scurtă:
Săgeată (lățime: 0; înălțime: 0; chenar: 100px solid; culoarea chenarului: roșu verde albastru galben;)
Interesant, nu? Acum vom seta culori transparente pe toate părțile, cu excepția părții albastre.
Săgeată (lățime: 0; înălțime: 0; chenar: 100px solid; culoarea chenarului de jos: albastru;)
A iesit grozav! Dar contrazice aspect semantic, creați un .arrow div, doar pentru a adăuga o săgeată la pagină. În acest scop, putem folosi pseudo-elemente, ceea ce vom face acum.
Creați un balon de vorbire
Pentru a crea balonul vorbitor, avem nevoie de o bucată mică CSS pur cod și un bloc div.
Balon de vorbire (poziție: relativă; culoare de fundal: # 292929; lățime: 200px; înălțime: 150px; înălțime linie: 150px; / * vertical centru * / culoare: alb; text-align: center;)
Balon de vorbire: după (conținut: „”;)
În această etapă, vom crea săgeata pe care am făcut-o înainte, o vom adăuga la element și tot ce rămâne este poziționarea:
Balon: după (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoare chenar: roșu verde albastru galben;)
Dacă dorim ca săgeata să indice în jos, va trebui să setăm toate chenarele la transparente, cu excepția celui de sus.
Balon de vorbire: după (conținut: „”; poziție: absolut; lățime: 0; înălțime: 0; chenar: 10px solid; culoarea chenarului de sus: roșu;)
Când creăm asta Forma CSS, nu putem specifica dimensiunea săgeții în mod specific. În schimb, putem seta proprietatea border-width, care va seta dimensiunea săgeții. De asemenea, vom seta poziția săgeții în partea de jos-mijloc. În consecință, folosim valorile de sus și stânga pentru aceasta.
Balon de vorbire: după (conținut: „”; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; culoarea chenarului de sus: roșu; sus: 100%; stânga: 50%;)
În plus, rămâne să dăm culoarea aceeași cu cea a blocului. Amintiți-vă, atunci când poziționați, trebuie să luați în considerare dimensiunea altor chenare care sunt invizibile (15px). Vom da blocului și colțuri rotunjite.
Speech-bubble (/ *… alte stiluri * / border-radius: 10px;) .speech-bubble: after (conținut: ""; poziție: absolut; lățime: 0; înălțime: 0; chenar: 15px solid; border-top -culoare: # 292929; sus: 100%; stânga: 50%; margine-stânga: -15px; / * ajustați pentru lățimea chenarului * /)
Nu-i rău, nu? Folosind câteva clase CSS și ajustări ale marginilor, puteți crea așa ceva.
/ * Utilizarea bulelor de vorbire: aplicați clasa.speech-bubble și.speech-bubble-DIRECTION așa cum se arată mai jos
Primă! Centrarea verticală într-un bloc
Pentru un rând de text, puteți utiliza line-height. Dar dacă ai două sau mai multe linii text ... Cea mai bună soluție va seta proprietatea de afișare la tabel și va pune tot textul în paragraf. Așa arată marcaj html:
Speech-bubble (/ * alte stiluri * / display: table;) .speech-bubble p (display: table-cell; vertical-align: middle;)
Nu ne limităm la triunghiuri. CSS este capabil să redă tot felul de forme - chiar și inimi și un semn de pericol biologic.
Pericol biologic (lățime: 0; înălțime: 0; chenar: 60px solid; chenar-rază: 50%; chenar-sus-culoare: negru; chenar-jos-culoare: negru; chenar-stânga-culoare: galben; chenar-dreapta- culoare: galben;)
Concluzie
Pentru a controla chenarul unui element, utilizați proprietate universală frontieră. Această proprietate vă permite să setați lățimea, stilul și culoarea chenarului unui element într-o singură declarație.
Aceste trei proprietăți (grosimea, stilul și culoarea chenarului) pot fi setate într-o singură declarație. Iată un exemplu:
Puteți specifica un stil de chenar doar pe o parte a unui element. Pentru a face acest lucru, utilizați proprietățile border-top (bord superior), border-right (chenar dreapta), border-bottom (chenar de jos), border-left (chenar stânga).
În acest exemplu, fiecare parte a cutiei are o grosime, un stil și o culoare diferită a chenarului.
Gandeste ca atunci cand Ajutor CSS puteți crea o formă ca aceasta:
Valorile marginilor - grosimea, stilul și culoarea - pot fi setate separat folosind proprietăți speciale.
- border-style - stilul chenarului.
- border-width - lățimea chenarului.
- border-color - culoarea chenarului.
Să luăm în considerare fiecare dintre valori separat.
Proprietatea tip graniță. Stil de chenar.
Proprietatea border-style stabilește stilul chenarului. În CSS, în Diferențele HTML, marginea unui element poate fi nu numai solidă. Valorile valide pentru stilul de chenar sunt:
- none - fără margine (implicit).
- solid - chenar solid.
- dublu - chenar dublu.
- dashed - chenar întrerupt.
- punctat - Un chenar alcătuit dintr-o serie de puncte.
- creasta - chenar de creastă.
- groove - margine de canelura.
- inserție - o chenar indentat.
- start - chenar extrudat.
Exemple de cum arată.
fara frontiera (niciuna)
margine solidă
chenar dublu
margine punctată
margine întreruptă
marginea canelurii
marginea crestei
chenar insetat
început
Apropo, dacă setați culoarea marginii la negru pentru cadrul de creastă, obțineți următorul rezultat.
Un div cu margine neagră și stil de creastă.
Chenarul arată ca un solid, dar asta pentru că stilul de creastă este creat prin adăugarea unui efect de umbră neagră, iar efectul negru de pe marginea neagră nu este vizibil.
Folosind proprietatea border-style, stilul chenar poate fi setat pentru mai mult decât pentru toate laturile blocului. Este posibil să setați mai multe valori pentru o proprietate de tip chenar, în funcție de numărul de valori, stilul de chenar va fi atribuit unui număr diferit de laturi ale blocului. Puteți seta una, două, trei și patru valori. Să ne uităm la exemple pentru fiecare caz.
O singură valoare (solid) - stilul de chenar este setat pentru toate laturile blocului.
Două valori (dublu solid) - prima valoare stabilește stilul pentru părțile de sus și de jos, a doua pentru lateral.
Trei valori (solid dublu punctat) - prima valoare pentru partea de sus, a doua pentru lateral, a treia pentru partea de jos.
Patru valori (liniate dublu punctată) - fiecare valoare pentru o parte în sensul acelor de ceasornic începând de sus.
Proprietatea border-width. Grosimea chenarului.
Proprietatea border-width este utilizată pentru a seta grosimea marginii unui element. Grosimea marginii poate fi specificată în orice unitate de măsură absolută, cum ar fi pixelii.
Ca și în cazul proprietății în stil de margine, proprietatea poate fi, de asemenea, setată la una până la patru valori. Să ne uităm la exemple pentru fiecare caz.
Exemplu de cod:
Există, de asemenea, valori ale cuvintelor cheie pentru proprietatea border-width. Sunt trei dintre ele:
- subțire - margine subțire;
- grosime medie - medie;
- gros - chenar gros;
Grosimea chenarului: subțire.
Grosimea chenarului: medie.
Grosimea chenarului: gros.
Proprietatea chenar-culoare. Culoarea chenarului.
Facilitatea de culoare chenar este utilizată pentru a controla culoarea chenarului. Culorile pentru această proprietate pot fi setate folosind orice metodă descrisă în articolul „Culori în CSS”, și anume:
- Notație hexazecimală (# ff00aa) a culorii.
- Format RGB - rgb (255,12,110). Format RGBA pentru CSS3.
- formatele HSLși HSLA pentru CSS3.
- Numele culorii, cum ar fi negru. Lista plina numele culorilor sunt listate în tabelul cu nume de culori CSS.
Proprietatea culoare-chenar poate avea, de asemenea, una până la patru valori și le gestionează în același mod ca și proprietățile anterioare.
O singură valoare (roșu).
Două valori (roșu negru).
Trei semnificații (roșu negru galben).
Patru semnificații (roșu negru galben albastru).
Acum să ne întoarcem la problema prezentată mai sus și să desenăm o formă:
Iată codul care desenează o astfel de formă, doar mai mare ca dimensiune:
Setarea valorilor pentru laturi separat
După cum sa menționat mai sus, puteți specifica valorile proprietăților de frontieră doar pentru o parte a unui bloc. În aceste scopuri, există proprietăți:
- border-top (chenar de sus)
- border-right (chenarul din dreapta)
- border-bottom (chenar de jos)
- border-left (chenar din stânga)
Permiteți-mi să vă reamintesc că toate proprietățile au trei valori (grosime, stil și culoare) în orice ordine. Dar există proprietăți care vă permit să setați separat grosimea, culoarea și stilul pentru fiecare parte. Scrierea acestor proprietăți este derivată din cele de mai sus.
Opțiuni de margine de sus (border-top).
- border-top-color - Setează culoarea chenarului superior al elementului.
- border-top-width - Setează grosimea chenarului superior al elementului.
- border-top-style - Setează stilul marginii superioare a unui element.
Opțiuni pentru marginea dreaptă (chenar-dreapta).
- border-right-color - Setează culoarea marginii din dreapta a unui element.
- border-right-width - Setează lățimea marginii din dreapta a unui element.
- border-right-style - Setează stilul chenarului drept al unui element.
Parametri de jos (border-bottom).
- border-bottom-color - setează culoarea marginii de jos a elementului.
- border-bottom-width - Setează lățimea marginii de jos a elementului.
- border-bottom-style - Setează stilul marginii de jos a unui element.
Opțiuni pentru marginea stângă (border-left).
- border-left-color - Setează culoarea marginii din stânga a elementului.
- border-left-width - Setează lățimea marginii din stânga a elementului.
- border-left-style - Setează stilul marginii din stânga a elementului.
Un exemplu de utilizare a acestor proprietăți:
- a redefinit culoarea marginii de sus folosind proprietatea border-top-color la roșu,
- folosind proprietatea border-right-width setați grosimea marginii din dreapta la 10px,
- folosind proprietatea border-bottom-style, stilul de margine de jos este redefinit ca dublu,
- folosind proprietatea border-left-color, chenarul din stânga este setat la albastru.
Proprietate de rază de frontieră. Rotunjirea colțurilor graniței.
Proprietatea border-radius este pentru rotunjirea colțurilor marginilor unui element. Această proprietate a fost introdusă în CSS3 și funcționează corect în toate browserele moderne, cu excepția Internet Explorer 8 (și mai vechi).
Valorile pot fi orice număr folosit în CSS.
Proprietatea border-radius este de 15 px.
Dacă cadrul blocului nu este specificat, atunci are loc rotunjirea cu fundalul. Iată un exemplu de rotunjire a unei casete fără chenar, dar cu o culoare de fundal:
Proprietatea border-radius este de 15 px.
Există proprietăți pentru rotunjirea fiecărui colț al unui element individual. Acest exemplu le folosește pe toate:
Chenar-sus-stânga-rază: 15px; chenar-sus-dreapta-rază: 0; raza-chenar-jos-dreapta: 15px; raza-chenar-jos-stânga: 0;
Proprietatea border-radius este de 15 px.
Deși acest cod poate fi scris într-o singură declarație: border-radius: 15px 0 15px 0. Ideea este că proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos prezintă regulile care guvernează astfel de anunțuri.
După ce ați studiat cu atenție acest tabel, puteți înțelege că cea mai scurtă înregistrare a stilului necesar va fi astfel: raza-chenar: 15px 0. Există doar două valori.
Puțină practică
Cum să desenezi o lămâie folosind CSS.
Iată codul pentru un astfel de bloc:
Marja: 0 auto; / * Așezați blocul în centru * / lățime: 200px; inaltime: 200px; fundal: # F5F240; chenar: 1px solid # F0D900; chenar-rază: 10px 150px 30px 150px;
Am desenat deja forma:
Acum să lăsăm un triunghi din el:
Codul triunghiului este astfel:
Marja: 0 auto; / * Așezați blocul în centru * / padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea-fond-chenar: roșu;
Proprietatea border CSS are aliasuri pentru a crea chenarul unui obiect, și anume grosimea chenarului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru a percepe mai bine conținutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.
1. Sintaxă de margine CSS
frontieră: border-width border-style border-color | moşteni;
- border-width - grosimea chenarului. Puteți să-l setați în pixeli (px) sau să utilizați valorile standard subțire, mediu, gros (difer doar în lățime în pixeli)
- border-style - stilul chenarului redat. Poate lua următoarele valori
- niciunul sau ascuns - anulează granița
- punctat - cadru punctat
- dashed - cadru liniuță
- solid - linie simplă (folosită cel mai des)
- dublu - lunetă dublă
- groove - chenar canelat 3D
- creastă, inserție, început - diverse efecte de cadru 3D
- moștenire - se aplică valoarea elementului părinte
- border-color - culoarea chenarului. Poate fi setat folosind un anumit nume de culoare sau în format RGB (vezi numele culorilor html pentru site)
Valorile din proprietatea border CSS pot fi specificate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.
2. Exemple cu diferite chenaruri CSS
2.1. Exemplu. Diferite stiluri de decorare a chenarelor în stil chenar
stil de chenar: punctatstil de chenar: punctatstil de chenar: solidchenar-stil: dubluborder-style: caneluraborder-style: creastachenar-stil: insertborder-style: începutPatru rame diferite
stil de chenar: punctat
stil de chenar: punctat
stil de chenar: solid
chenar-stil: dublu
border-style: canelura
border-style: creasta
chenar-stil: insert
border-style: început
Patru rame diferite
2.2. Exemplu. Culoarea chenarului se schimbă la trecerea mouse-ului
Acest exemplu este foarte simplu, dar interesant. Acesta arată cum pot fi folosite pentru a crea: pseudoclasa hover și chenarul CSS efecte simple(de exemplu, pentru un meniu).
Când treceți cursorul mouse-ului peste bloc, culoarea chenarului se va schimba
Așa arată pe pagină:
2.3. Exemplu. Cum se face o chenar transparentă
Cadrul poate fi transparent. Acest efect este rar, dar poate fi uneori foarte util pentru web designeri. Pentru a seta transparența, trebuie să utilizați setarea de culoare sub formă de RGBA (R, G, B, P), unde ultimul parametru transparența este setată (număr real de la 0,0 la 1,0)
Așa arată pe pagină:
3. Grosimea chenarului: proprietatea border-width
Specifică grosimea liniei. Anterior, am cerut-o descriere uniformă frontieră.
Sintaxa CSS lățimea graniței
lățimea graniței: subțire | mediu | gros | sens;
- subțire - grosime linie subțire
- mediu - lățimea medie a liniei
- gros - grosime linie groasă
Mai jos sunt câteva exemple. Cel mai neobișnuit lucru va fi grosimea diferită a chenarului pe fiecare parte.
lățime margine: subțirelățime margine: medielățime margine: grosGrosimi diferite la margini
Așa arată pe pagină:
lățime margine: subțire
lățime margine: medie
lățime margine: gros
Grosimi diferite la margini
4. Cum să faci un chenar cu o singură margine (chenar)
Proprietatea border CSS are proprietăți derivate pentru setarea chenarelor unilaterale pe un element:
- border-top - pentru a seta chenarul de sus (chenarul de sus)
- border-bottom - pentru a seta chenarul de jos (chenarul de jos)
- border-right - pentru a seta chenarul la dreapta (chenarul din dreapta)
- border-left - pentru a seta chenarul la stânga (chenarul din stânga)
Aceste limite pot fi combinate, de ex. prescrie propriul cadru pentru fiecare direcție. Sintaxa este exact aceeași cu border.
Există și proprietăți
- border-top-color - setează culoarea chenarului superior
- border-top-style - Setează stilul chenarului superior
- border-top-width - setează grosimea marginii superioare
- etc. pentru fiecare direcție
După părerea mea, este mai ușor să scrii totul într-o linie decât să produci text suplimentar în stiluri. De exemplu, următoarele proprietăți va fi la fel
/* Descrierea a două stiluri identice: */
4.1. Exemplu. Cadru frumos pentru evidențierea citatelor
Exemplu de cadru de citat
Așa arată pe pagină:
Exemplu de cadru de citat
Notă
Puteți seta un chenar separat pentru fiecare parte.
5. Cum să faci mai multe chenaruri pe un element html
Uneori trebuie să faci mai multe chenare. Să dăm un exemplu
5.1. Prima opțiune cu mai multe margini
Așa arată pe pagină:
Există o a doua cale prin suprapunerea umbrelor.
5.2. Amestecarea umbrelor pentru a crea mai multe chenare
Așa arată pe pagină:
6. Rotunjirea colțurilor la margini (border-radius)
Pentru a crea rame frumoase utilizați proprietatea CSS border-radius (disponibilă numai în CSS3). Cu el puteți rotunji colțurile, ceea ce creează un aspect complet diferit. de exemplu
7. Linie indentată CSS
Liniile indentate pot arăta spectaculos fundal întunecat, care nu este potrivit pentru fiecare site.
Așa arată pe pagină:
Pentru a accesa bordura din JavaScript, trebuie să scrieți următoarea construcție:
document.getElementById ("elementID").style.border= „VALOARE” (! LANG:
16 iunie 2016
Salutari tuturor. Astăzi vă voi spune de ce, atunci când proiectați site-uri, acestea fac uneori un chenar transparent în css, adică un chenar invizibil al unui element.
De ce ai nevoie de o bordură transparentă?
În timpul aspectului următorului aspect, sarcina a fost: când treceți cu mouse-ul peste un element de meniu, acesta ar trebui să aibă o subliniere. Și nu pentru text, ci pentru întregul bloc cu link. Pentru cei care cunosc aspectul, totul este destul de simplu și clar în acest caz... Trebuie doar să adăugați proprietatea chenar-bottom la link atunci când treceți cu mouse-ul peste ea. Dar dacă doar o faci, nu va fi foarte frumos și cool. Acum vă voi arăta un exemplu. Iată așa cod html necesare pentru a crea meniu simplu cu 4 puncte:
În general, i s-au prescris unele stiluri, dar nu le voi da pe toate. Suntem interesați de efectul de subliniere atunci când trecem cu mouse-ul peste un articol. Este implementat astfel:
Meniu li a: hover (chenar-jos: 5px maro solid;)
Totul este destul de simplu, dar se dovedește așa (pasați cursorul peste orice articol):
De acord, nu foarte frumos. În plus, o parte din conținut va fi localizat dedesubt și va fi deplasat cu 5 pixeli în jos de fiecare dată când trece cu mouse-ul. După cum știți, chenarul crește dimensiunea elementului.
De fapt, pentru a rezolva problema, trebuie doar să setați inițial legătura la același cadru cu o grosime de 5 pixeli, dar culoare transparentă... În acest caz, la trecerea mouse-ului, se va schimba doar culoarea cadrului.
Meniu li a (chenar-jos: 5px solid transparent;)
Am dat o singură proprietate, restul stilurilor nu ne interesează, le poți scrie chiar tu. Acum, când treceți cu mouse-ul, nu va apărea nicio zvâcnire, vă puteți asigura de acest lucru:
Grozav, sper că am răspuns la întrebare, pentru ce este în css cadru transparent... Poate că are un alt folos. Sau mai degrabă, nu este posibil, dar sigur. Poate fi folosit pentru a crea triunghiuri. Cum, uite. Deci acestea sunt opțiunile pentru utilizarea unui cadru transparent.
