Grafikus panelek (html css) létrehozása

Panelek - a webmesterek egyik kedvenc eleme. A panel egy nagyon univerzális elem, amelyet például helyszíni fejlécként lehet használni:

vagy a vízszintes menü:

Ahhoz, hogy a panel gyönyörű legyen, meg kell adni a hangerőt, a dekoratív határokat, árnyékokat, így a grafika nem mentesülhet. A legegyszerűbb módja az, hogy a teljes panelt képként mentse el, és beillesztse egy HTML-oldalba img-elemként vagy konténerelem háttereként. Ugyanakkor ez a módszer a legkevésbé rugalmas és kényelmes, mivel a panel merev mérettel rendelkezik. Általában a "gumi" (vagyis a könnyen átméretezhető) panelek létrehozása a háttérképeket feldolgozó böngészők funkcióját használja.

A konténerelem, legyen szó akár egy táblázatos celláról vagy egy div dobozról, háttérképként állítható be a CSS stílus háttérképével. Ha az elem mérete nagyobb, mint a háttérkép mérete, a böngésző automatikusan átmásolja a háttérképet vízszintesen és függőlegesen, ezáltal kitölti az elem teljes területét a háttérrel. Például készítsen egy egyszerű, 16x16 képpont méretű háttérképet (a kép 4-szerese):

és 160x160 képpont méretű táblázathoz használhatja háttérképként:

A böngésző teljesen feltöltötte az asztalt hátterülettel, 10-szer vízszintesen és függőlegesen másolja a háttérképet. A rendszer segítségével a background-repeat CSS-stílust, akkor a háttér párhuzamos mód: repeat-x - nem köthetők csak vízszintesen, repeat-y - nem köthetők csak függőlegesen, ismételje meg - nem köthetők vízszintesen és függőlegesen (ez az alapértelmezett), no-repeat - nem ismétlődő .

Ezt a funkciót grafikus "gumi" panelek létrehozására is használják. A dinamikus szélességű panel létrehozásának algoritmusa a következő:

2. Határozza meg a panel egy részét egyenletes, vízszintesen feszített textúrával. Ehhez ki kell választani a kereteket (ez mentálisan, azaz nem vonja le a vonalakat):

3. A bal és jobb keretelemeket a közös panelből kell levágni, és külön képként elmenteni panel_left.jpg és panel_right.jpg;

4. A középső részből vágja ki a kép magasságának egy csíkot, amely megegyezik a panel magasságával és 1-5 képpont szélességgel, és mentse el külön képként panel_center.jpg. Ennek eredményeképpen három apró képet kell kapnunk: panel_left.jpg, panel_center.jpg, panel_right.jpg:

5. Hozzon létre egy HTML táblát egy sorral és három cellával. Az asztal magasságát a panel magasságával és tetszőleges szélességével állítjuk be. Az első és harmadik cellák a képkeretek szélességének megfelelő szélességet határoznak meg panel_left.jpg és panel_right.jpg:

6. A táblázat első és harmadik cellájában helyezzük el a képkereteket megjelenítő img elemeket. A központi cellához állítsa be a background_center.jpg háttérképet és vízszintesen másoljon. Ezt egy CSS stílus hátterén lehet elvégezni:

7. Szükség van a táblázat cellái közötti rés eltávolítására a szegély-összeomlási stílussal. és az első és harmadik cellák mezőit is eltávolíthatja a párnázási stílus használatával. Ez lehetővé teszi, hogy minden kép szorosan illeszkedjen egymáshoz:

Emellett érdemes gondoskodni azokról a felhasználókról, akik a böngészőjükben letiltott grafikusokkal rendelkeznek. Be kell állítani a panel háttérszínét, közel a grafikus színhez, és meg kell adni a képek méretét az img címkékben. A végső példa itt tölthető le.