Css kezdőknek

Css kezdőknek

Úgy döntöttem, hogy egy új cikksorozatot - „CSS kezdőknek”, remélem, hasznos lesz sok. Az első lecke lesz dedikált gombok ...

felhívni a gomb

Először is fel kell hívni a gomb, mint ez:

Ez a legalkalmasabb a szerszám „lekerekített téglalap eszközt” a Photoshop, és vele a Start - rajzolni valamit, mint például:

Megváltoztatva a Radius beállíthatja a kívánt zagruglenie gombot (ebben a példában, az egyértelműség kedvéért, a tartalom teljesen átlátszó ( „Fill Átlátszóság” => 0%)):

Css kezdőknek

A szélessége a tárgy ebben a példában 320 - azaz a Azt feltételezik, hogy a nagyobb gombok nem.

Border nyomtat a „Stroke” (a „Keverési beállítások”), típusa - gradiens - a # 000000 a # 676767:

Css kezdőknek

Most, hogy nem árt, hogy töltse és gradiens gombot (fel paraméter meg van adva homály, a szín, a fenék, a szerszám „Gradient Overlay” a „Keverési beállítások”):

Css kezdőknek

Eredmény ázott határ:

Ha teszünk egy színes háttér:

Nos - egy gombot, és kész, folytassa a következő lépéssel ...

Egyszerű CSS gomb

Css kezdőknek

Most már csak a csípés CSS ezeket a gombokat:

A HTML-kód elemi:

Css kezdőknek

Gumi CSS gomb

Most bonyolítja a feladat - fogalmunk sincs, milyen színű lesz a gombot, és milyen méretű, csak feltételezzük, hogy a gombok nem lesz több, mint 320 széles.

Épület egy DOM

Minden gomb lesz egy tag , csomagolva

  • . elem mi csak létre kell hozni egy gumigombot tisztázni, hogy a következő képernyő:

    Css kezdőknek

    Nos, a HTML kód:

    A megfigyelt eredmények

    Összevetjük az eredményeket munkánk különböző böngészők:

    Css kezdőknek

    Mint látható, több probléma is van ezzel a végrehajtás:

    • áttetszőség az IE6 nem működik - akkor csavarja a hack, de miért - IE6 lehet halottnak
    • box-sugár nem működik az IE és az Opera - vagy elutasíthatja funkciók, vagy általunk felvázolt tér háttér színét (az IE van egy piszkos hack cm Íves sarok (border-radius) a határokon böngésző.)

    Gombok megérintheti a demo. sortsy az összes elérhető a következő linken:

    További linkek a témában:

    információ

    Kapcsolódó cikkek