Css kezdőknek
![Css kezdőknek (HTML és CSS) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-3332bacd.png)
Ú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 (oktatás) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-0406ce17.png)
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 (kezdő) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-7f0499e2.png)
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 (kezdő) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-448f4d23.png)
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 (HTML és CSS) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-6c69a936.png)
Most már csak a csípés CSS ezeket a gombokat:
A HTML-kód elemi:
![Css kezdőknek (HTML és CSS) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-8c7ef50f.png)
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
![Css kezdőknek (kezdő) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-1de91992.png)
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 (kezdő) Css kezdőknek](https://images-on-off.com/images/125/cssdlyanachinayushix-db7ba8dd.png)
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: