Material de referință pentru limbile de programare majore și aspectul site-ului.
O tehnică gata de a crea site-uri dinamice simple și complexe, folosind PHP și MySQL.
Dezvoltarea de site-uri web sub "cheie".
Dezvoltarea de fragmente separate de site-uri, sfaturi cu privire la aspectele legate de aspectul paginilor web și programarea web.
Instrumentul bazat pe web
magazin web
Servicii Web
Grafica web
Resursele web
Vrei să ții pasul cu evenimentele care au loc pe site? Abonați-vă pentru a primi ultimele știri și articole.
Uită-te la Google
Efecte grafice fără grafică. Rotunjirea colțurilor
Acum, că am învățat cum să lucrăm cu browserele care nu acceptă CSS3, putem trece la îmbunătățirea designului paginii noastre web. Să începem prin rotunjirea colțurilor blocurilor și a secțiunilor paginii, pentru a le oferi o formă mai moale, raționalizată și pentru a indica separarea vizuală între ele.
Colturi rotunjite - acesta este un efect vizual simplu și obișnuit, care a fost surprinzător de greu de implementat pe paginile web. Nu era necesar doar să pierdem timpul creând imagini de colțuri rotunjite în aplicații grafice, dar și să petrecem mult timp adăugând HTML și CSS. Pentru a determina locația fiecărui colț, a fost adesea necesar să se creeze un întreg buchet de blocuri div divizate, deoarece specificația CSS 2.1 permite câmpului să nu aibă mai mult de o imagine de fundal. Astfel, codul CSS referitor la plasarea imaginilor ar putea deveni foarte, foarte complex. Imaginile, pe lângă codurile HTML și CSS exagerate, au crescut semnificativ cantitatea de date pe care fiecare utilizator a trebuit să o descarce, ceea ce a dus la reducerea vitezei de încărcare a paginilor. Chiar dacă ați folosit scenarii pentru a crea dinamic colțuri rotunjite fără a crea sau încorpora imagini manual, ați crescut numărul de fișiere pentru încărcare de către utilizatori și o performanță redusă a paginilor. Și toate acestea de dragul colțurilor rotunjite!
Crearea ovalelor și a cercurilor utilizând proprietatea razei de graniță
Desigur, luând în considerare îmbunătățirea continuă a CSS3 și introducerea suportului pentru noile specificații în browserele din lumea reală, totul devine puțin mai complicat. Cu toate acestea, în comparație cu alte abordări, acestea sunt cele mai perfecte lucruri.
Să editați fișierul style.css și să faceți un bloc cu un meniu orizontal, o secțiune de conținut și un bloc cu un meniu vertical, precum și un finisher de pagini cu colțuri rotunjite. Pentru aceasta, introduceți raza de margine în codul blocurilor corespunzătoare.
#page_header marginea ul: 5px 4px 5px 4px;
afișare: bloc;
înălțime: 30px;
frontieră: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Pentru Firefox * /
-webkit-border-radius: 10px; / * Pentru Safari și Chrome * /
raza de graniță: 8px;
>
#post width: 695px;
margine: 5px 2px 0 4px;
padding: 4px;
float: stânga;
frontieră: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Pentru Firefox * /
-webkit-border-radius: 10px; / * Pentru Safari și Chrome * /
raza de graniță: 10 pixeli;
>
#sidebar width: 190px;
float: dreapta;
frontieră: solid 1px # D1D1D1;
-moz-border-radius: 10px; / * Pentru Firefox * /
-webkit-border-radius: 10px; / * Pentru Safari și Chrome * /
raza de graniță: 10 pixeli;
margine: 5px 4px 0 2px;
padding: 4px 2px;
>
marginea #page_footer: 4px 0 0 0;
frontieră: solid 1px # D1D1D1;
-moz-border-radius: 10px 10px 0 0; / * Pentru Firefox * /
-webkit-border-radius: 10px 10px 0 0; / * Pentru Safari și Chrome * /
raza de graniță: 10px 10px 0 0;
>
Testați pagina web. În browserele moderne, acesta va arăta astfel.
Despre proprietatea razei de frontieră
Toate cele patru valori pot fi enumerate într-o singură proprietate a razei de graniță, separate prin spații; De asemenea, puteți utiliza o valoare comună pentru o rotunjire uniformă a tuturor colțurilor. În Safari 4 și Safari pentru iOS 3 și mai devreme, adăugarea mai multor valori la o singură proprietate a razei de graniță nu este acceptată; este permisă specificarea unei singure valori care va fi aplicată tuturor unghiurilor.
Folosind proprietatea raza de graniță, puteți crea următoarele elemente:
Sprijin pentru proprietatea raza de frontieră în browsere
Trimiteți-le prietenilor: