Colturi rotunjite, css

Colturi rotunjite, CSS

În acest articol, vom examina un exemplu despre cum să creați un panou de site cu colțuri rotunjite pe o culoare de fundal solidă cunoscută anterior, în timp ce panourile vor fi redimensionate după cum doriți.







I. Să începem să lucrăm cu Adobe Photoshop:

  1. Creați o imagine nouă (Ctrl + N) de o dimensiune mică, de exemplu: 300x200 pixeli, pe fundal alb;
  2. Folosim instrumentul Rounded Rectangle Tool (U). Setează raza de rotunjire a razei la 10 pixeli și controlează dimensiunea obiectului Object Round Rectangle Options - Unconstrained

    Să alegem o anumită culoare pentru panou, de exemplu: # 74c44c
    Utilizați acest instrument pe panza noastră, apoi faceți clic cu butonul din dreapta în panoul Straturi după numele stratului Forma 1 care apare și selectați Resteriere Layer. În final, ar trebui să arate ceva asemănător imaginii de mai jos:
  3. Măriți imaginea maximă (Ctrl ++) și utilizând instrumentul Crop (C), selectați colțul din stânga sus al dreptunghiului rotunjit, după cum se arată în imagine

    Ie capturați doar zona în care se face rotunjirea colțurilor, tot ceea ce este umplut cu solid nu va cădea în zona de decupare. Apoi, faceți clic dreapta în interiorul dreptunghiului selectat și selectați Decupare. obținem:
  4. Salvați imaginea rezultată într-un fișier, pentru aceasta apăsați Ctrl + Shift + Alt + S sau selectați Salvare pentru Web din meniul Fișier. În fereastra care apare, urmați următoarele setări:
    1. GIF - formatul în care vom salva imaginea;
    2. Modul adaptiv - corecție de culoare, în cazul nostru este cel mai bun;
    3. Parametrii care reduc calitatea și claritatea imaginii (Dieter, Lossy, Web Snap) sunt dezactivate și setate la minim;
    4. Eliminați marcajul de selectare opus Transparency (Transparență);
    5. Alegeți numărul de culori Culori, astfel încât să nu existe pierderi de calitate;
    6. Setați parametrul Matte la nici unul
    7. Apoi, faceți clic pe butonul Salvare și salvați imaginea, de exemplu sub numele: panel_top_left.gif
  5. Vom face punctele 3-4 cu cele trei colțuri rămase, rezultând un set de imagini:
    1. panel_top_left.gif - colțul din stânga sus;
    2. panel_top_right.gif - colțul din dreapta sus;
    3. panel_bottom_left.gif - colțul din stânga jos;
    4. panel_bottom_right.gif - colțul din dreapta jos.






La această lucrare cu Adobe Photoshop terminat.

  1. Creați un document html (este în continuare planificat ca cititorul acestui articol să aibă cunoștințele inițiale despre HTML și CSS);
  2. Adăugați 4 etichete imbricate
  3. Descriim pentru prima etichetă
    clasa și numiți-l.

Culoarea de fundal trebuie setată numai la prima etichetă (părinte)

;

  • Lângă tag-ul părinte
    descrie stilurile pentru toate etichetele imbricate
    :

    Ie pentru fiecare etichetă

    Setați imaginile create anterior ca pe un fundal care nu se repetă. Pentru prima etichetă
    fundalul este imaginea panel_top_left.gif. care utilizând combinația de parametri din stânga sus a proprietății de fond este plasată în colțul din stânga sus. Imagine panel_top_right.gif. care este fundalul primei etichete imbricate
    în etichetă
    cu panoul de clasă utilizând combinația de parametri din dreapta sus a proprietății de fundal pe care o plasăm în colțul din dreapta sus, etc.

  • Să descriem indentarea textului din marginile panoului și să aplicăm un anumit design textului care va fi conținut în interiorul panoului:
  • Să colectăm acum toate acestea într-un singur document:

    și obțineți rezultatul:

    Panoul nostru își poate schimba dimensiunea, atât în ​​înălțime, cât și în lățime, în timp ce calitatea colțurilor rotunjite nu se pierde

    Creați site-uri astfel,
    că au bucurat ochiul!

    P.S. Când toate browserele acceptă CSS3, un astfel de exemplu poate fi implementat utilizând o singură etichetă

    și o clasă CSS pentru asta, pentru că va fi posibil să specificați mai multe imagini de fundal pentru un element în același timp.

    Subiecte conexe

    Ti-a placut blogul nostru, vrei sa urmezi actualizarile? Abonați-vă la fluxul RSS sau la poșta electronică. De asemenea, ne puteți urmări pe Twitter.

    Băieții, bine, articolele normale au fost amânate și apoi grădinița a fost dizolvată ....

    Sincer, nu am citit. Și faptul că a fost transferat am observat un pic mai târziu, deoarece în cititorul merge mai întâi cel mai nou, dar deja a întârziat

    da această metodă utilizează Google.

    Alex. Nu aș sfătui să fac asta, este un mod teribil.

    Dacă se repetă exact implementarea colțurilor rotunjite fără imagini, sfătuiesc să citiți următorul articol: "Colțuri rotunjite fără utilizarea imaginilor".

    Descriu de mine, repet, cu mai mult de un an în urmă pentru un alt blog, poți numi "fier". Acesta va funcționa în toate browserele, la orice dimensiune și dimensiune a fontului. În plus, nu încalcă semantica. În cazul în care lățimea sau înălțimea blocului este cunoscută în prealabil, numărul de imagini poate fi redus.

    Este posibil și sprite, și este posibil și, în general, imagini în DataURI să se cramă direct în CSS.

    În css există o comandă -moz-border-radius: 10px 10px 10px 10px;
    Dar este acceptat doar în FireFox, în Opera și IE nu funcționează

    Chiar și mai scurtă este -moz-border-radius: 10px;

    când se utilizează "-moz-border-radius", codul nu trece validatorul.

    Imaginile mele nu sunt încărcate (dezactivate - Internetul este lent) și totul este dreptunghiular.
    A -moz-raza de frontieră funcționează!

    bună lume.
    mai repede este mai ușor fără fotozopa

    >> PS Când toate browserele acceptă CSS3 ... va fi posibilă setarea mai multor imagini de fundal pentru un element simultan.

    Va exista o proprietate a razei de graniță care vă permite să desenați colțurile fără a desena deloc. El chiar IE în cea de-a noua versiune sa stăpânit.

    >> mai rapid este mai ușor fără o fotografie fotografică







    Articole similare

    Trimiteți-le prietenilor: