Lekerekített sarkok, CSS

előző ◈ a következő

Lekerekített sarkok, CSS

Ebben a cikkben megnézzük egy példát: létrehozunk egy web-site-panelek, lekerekített sarkokkal egy előre ismert egyszínű háttér, akkor a panel valahogy megváltoztatni a méretét.

I. kezdjük a munkát az Adobe Photoshop:

  1. Létrehozása egy új képet (Ctrl + N) a kis méretű, például: 300h200 pixel fehér alapon;
  2. Az általunk használt eszköz Lekerekített téglalap eszköz (U). Mi jelent a sugara a sarkok kerekítés sugara 10 pixel, és a dimenzió kezelése objektumot hozzá forduló téglalap Options - korlátlan

    Válasszon bármilyen színt a panel, például: # 74c44c
    Ezzel az eszközzel a mi vászonra, majd kattintson a jobb gombbal a panel Layers (Rétegek) megnevezés megjelent Alak 1-es réteg, és válassza ki Resterize réteg. Az eredmény valami hasonló az alábbi képet:
  3. Nagyítás, hogy a maximális (Ctrl ++), valamint a Crop szerszám (C) válassza ki a bal felső sarkában a figura (lekerekített téglalap) ábrán látható

    Ie elfog egyetlen terület, ahol van egy kerekítése sarkok, minden fürdött szilárd nem esik bele a kivágott terület. Ezután a jobb gombbal belül a növényi mezőbe, majd kattintson a Crop. kapjuk:
  4. Mentse el a képet egy fájlba a Ctrl + Shift + Alt + S vagy válassza a Mentés a Web (Save for Web) a Fájl (File) menü. A következő beállításokat elvégeztük a megjelenő ablakban:
    1. GIF - formátum, amelyben menteni a képet;
    2. Adaptív - a színkorrekció módot, ebben az esetben a legjobb;
    3. Paraméterek csökkenti a kép minőségét és tisztaságát (Dieter, Veszteséges, Web Snap) kikapcsol, és a minimumra van állítva;
    4. Betakarítás tick Átlátszóság (Transparency);
    5. Válassza ki a színek száma színek, így nincs veszteség a minőség;
    6. Matt az opció sem
    7. Ezután kattintson a Mentés gombra (Save), és mentse el a képet, például néven: panel_top_left.gif
  5. Végzünk pontot 3-4 fennmaradt három sarkok, végül megkapjuk egy sor képek:
    1. panel_top_left.gif - bal felső sarokban;
    2. panel_top_right.gif - jobb felső sarokban;
    3. panel_bottom_left.gif - a bal alsó sarokban;
    4. panel_bottom_right.gif - jobb alsó sarokban.

Ebben a munkában az Adobe Photoshop kész.

  1. Hozzon létre egy html - dokumentumot (a továbbiakban azt tervezik, hogy az olvasó ezt a cikket egy alapvető ismeretekkel a HTML és CSS);
  2. Hozzá 4 tag egymásba ágyazott
  3. Bemutatjuk az első tag
    osztály, és hívja a panel.

A háttérszín kell állítani csak az első (a szülői) címke

;

  • Továbbá képest a szülő címke
    Bemutatjuk stílusok összes beágyazott tag
    :

    Ie minden tag

    adott egy nem ismétlődő háttérképet korábban létrehozott. Az első tag
    háttérképpel panel_top_left.gif. hogy segítségével a paraméterek kombinációja bal felső háttér ingatlan található a bal felső sarokban. A fényképek panel_top_right.gif. háttérben, hogy az első alcímke
    címke
    panel osztály paraméter segítségével kombinációk elejére jobb utáni háttér tulajdonságai a jobb felső sarokban, stb

  • Bemutatjuk francia szöveget a panel szélei és alkalmazza a tervezéstől a szöveg van benne legyen az panel:
  • Most gyűjteni az egészet egy dokumentumot:

    és azt az eredményt kapjuk:

    A panel lehet átméretezni, mind a magasság és a szélesség, míg a minőségi sarkok kerekítés nem vész el

    Hozzon létre egy oldal, mint ez,
    hogy azok kellemes a szemnek!

    Ui Ha minden böngésző támogatja a CSS3, ez a példa is megvalósítható révén egyetlen tag

    és a CSS-osztály számára, mert lesz lehetőség, hogy hozzanak több háttérképeket egy elemet.

    Kapcsolódó témák

    Tetszik a blog, azt szeretnénk, hogy a frissítéseket? Iratkozz fel az RSS feed, vagy hírlevél e-mailben. Ön is tudja követni minket a Twitteren.

    Nos fiúk, mint a normál éhomi cikket, majd épített egy óvoda ....

    Őszintén szólva, én nem (a) olvasni. És az a tény, hogy ő mozgott észrevettem egy kicsit később, mert az első olvasó nagyon új, de már késő volt

    Igen, ez a módszer a Google.

    Alex. Én nem tanácsot erre, ez egy szörnyű módon.

    Ha ez a végrehajtás iteresuet lekerekített sarkok képek nélkül, javasoljuk, hogy olvassa el a következő cikket: „Lekerekített sarkok nélküli képek segítségével.”

    Le, mint egy módja annak, hogy nekem egyszer, több mint egy évvel ezelőtt egy másik blog, ez lehet az úgynevezett „vas”. Működni fog minden brauzerh, bármilyen szinten és a betűméret. Sőt, nem sérti a szemantika. Ha tudja a szélessége vagy magassága a blokk, kolichsetvo képeket lehet csökkenteni.

    És sprite lehet, de meg lehet csinálni image DataURI nyomja egyenesen a CSS.

    A css egy csapat -moz-border-radius: 10px 10px 10px 10px;
    De ez csak a támogatott FireFox'e, az Opera és az IE nem működik

    Még rövidebb -moz-border-radius: 10px;

    felhasználásával «-moz-border-radius» kód nem az érvényesítő.

    Saját kép nincs betöltve (off - lassú internet), és minden téglalap.
    A -moz-border-radius működik!

    hello world.
    gyorsabb egyszerűbb nélkül fotozhopa

    >> PS Ha minden böngésző támogatja a CSS3 ... nem lesz lehetőség, hogy hozzanak több háttérképeket egy elemet.

    Lesz border-radius tulajdonság lehetővé teszi, hogy kiadja sarkok nélküli képek összesen. Ő volt még a kilencedik változata IE elsajátította.

    >> gyorsabb egyszerűbb nélkül fotozhopa

    Kapcsolódó cikkek

    előző ◈ a következő