15 hasznos CSS és HTML leírás honlapkészítéshez


15 olyan leírás következik, amelyek mindenki számára hasznosak lehetnek honlapkészítés közben. A leírások demo-kat és komplett mintakódokat is tartalmaznak, úgyhogy kezdők számára is is könnyen kivitelezhetőek.

Egyszerű és tetszetős css FORM design

A leírásban bemutatják, hogy lehet egyszerűen és gyorsan összerakni egy CSS alapú formot táblák használata nélkül.

Egyszerű és tetszetős CSS FORM design

leírás: Clean and pure CSS FORM design

CSS és Mootools segítségével szimulált horizontális navigáció

CSS és Mootools segítségével egy a flash menükhöz hasonló megoldást lehet elérni.

CSS és Mootools segítségével szimulált horizontális navigáció

leírás: Using CSS and Mootools to simulate Flash horizontal navigation effect

2 CSS alapú vertikális menü megmutat/elrejt effekttel

A leírásban 2 módszert is bemutat a szerző arra vonatkozóan, hogy lehet egy menü egyes elemeit elrejteni és újra megjelentetni JS segítségével. Az egyik megoldás egy egyszerű javascript effect, a másik pedig a Mootools Toggle Effect-jére épül.

2 CSS alapú vertikális menü megmutat/elrejt effekttel

leírás: Two CSS vertical menu with show/hide effects

Szép animált menü készítése CSS és Mootools segítségével

A címe igazából mindent elmond. Kiegészítésként még annyit, hogy ez egy alap verzió minden szempontból, de a testreszabása nem egy nagy ördöngősség.

Szép animált menü készítése CSS és Mootools segítségével

leírás: Nice animated menu using CSS and Mootools

Pasztel színű fő- és almenü megoldás CSS-sel

A leírás bemutatja, hogy lehet olyan menüt építeni CSS segítségével, amelyben a főmenü egyes elemeire állva megjelennek a hozzá tartozó almenüpontok.

Pasztel színű fő- és almenü megoldás CSS-sel

leírás: Pastel color menu with dynamic submenu using CSS

Gyönyörű CSS által formázott gombok ikonokkal

A leírás bemutatja, hogy lehet szép gombokat csinálni pár sornyi CSS-sel és pár ikonnal.

Gyönyörű CSS által formázott gombok ikonokkal

leírás: Beautiful CSS buttons with icon set

Form tervezése CSS, UL és DL segítségével

Egy kicsit más módja a form-ok építésének mint amit megszokhattunk.

Form tervezése CSS, UL és DL segítségével

leírás: FORM elements design using CSS and list (ul and dl)

CSS menü feed reader ikonokkal

CSS menü feed reader ikonokkal

leírás: Nice CSS menu with feed reader icons list

CSS gradient text effect

A leírás bemutatja, hogy lehet színátmenetes szöveget készíteni PNG és CSS segítségével (se flash-t, se javascriptet nem tartalmaz a megoldás). A megoldást tesztelték firefox, Safari, Opera és IE6 alatt is.

CSS gradient text effect

leírás: CSS Gradient Text Effect

CSS alapú buborékok

No ez a cím így elég hülyén hangzik, de a képre nézve biztos érteni fogod, hogy a több helyen is látott “mondta” típusú buborékokra gondoltam, amikor kis nyilacskák vagy háromszögek jelzik hogy az adott szövegrészlet kihez tartozik.

CSS alapú buborékok

leírás: CSS Speech Bubbles

A PNG átlátszóság kreatív felhasználása a honlapkészítéskor

A PNG képek átlátszóságát ma már gyakorlatilag minden böngésző lekezeli (kivétel IE6, de arra is vannak megoldások a tutorial.hu-n), úgyhogy ideje gyakrabban használni őket. A leírás egy ötletes módját mutatja be a PNG átlátszóság kihasználásának.

A PNG átlátszóság kreatív felhasználása a honlapkészítéskor

leírás: Creative Use of PNG Transparency in Web Design

A file input-ok testreszabása CSS és DOM segítségével

Vannak olyan elemek, melyeket a hagyományos úton (pl. CSS) nem lehet átszabni (fájl feltöltés pl.) a honlapkészítés során. Ám erre is van megoldás (DOM), lásd a lentebb linkelt leírást.

A file input-ok testreszabása CSS és DOM segítségével

leírás: Styling File Inputs with CSS and the DOM

Input type=”submit” testreszabása, avagy szép gombok a form-ban

Fentebb már volt egy leírás arról, hogy lehet szép gombokat készíteni de az a leírás linkekkel (a href) operált. Ez a leírás viszont azt mutatja be, hogy lehet a form-okban használt input type=”submit” gombokat testreszabni.

A button elem testreszabása

leírás: Rediscovering the Button Element

Favicon megjelenítése egy külsős honlapra mutató link mellett

A honlap szövegében általában vannak linkek – eddig gondolom semmi egetrengetőt nem mondtam. Ám ha az a link egy külsős site-ra mutat, milyen jó is lenne ha annak a másik site-nak a faviconját be tudná tölteni a lapunk és a favicon megjelenne a link mellett, nem? :)

Favicon megjelenítése egy külsős honlapra mutató link mellett

leírás: Hyperlink Cues with Favicons

Digg stílusú, CSS alapú navigáció készítése

A digg.com-t mindenki ismeri, a menüjét mindenki ismeri – ha te is szeretnél ilyet, íme a megoldás:

Digg stílusú, CSS alapú navigáció készítése

leírás: Digg-like navigation bar using CSS

A listát eredetileg a Social cms Buzz oldalán olvastam (15 CSS and HTML Tutorials You Can Use In Your Projects), annak ferdítése ez a cikk.

Kapcsolódó bejegyzések:
  • Minden ami apró kis grafikai elem, hogy jobban nézzen ki a weblapunk.20 Ingyenes Ikon készlet 25 Apró grafikai elem (ornament) Desktop és webes ikonok …

  • Aki szereti a TAB-os (füles) navigációt és nem idegenkedik a CSS alapú megoldásoktól, valószínűleg hasznos találja az alábbi gyűjteményt, ahol több mint 50 megol …

  • Bár tény, hogy a WordPress a legnépszerűbb blogmotor, nem biztos hogy mindenkinek ez az idális megoldás. Azt viszont talán nem mindenkinek egyértelmű, hogy milye …

  • A cikkben eredetileg szereplő neon szöveg videó sajnos elérhetetlenné vált a látogatók számára, úgyhogy igyekszem egy újabb, frissen összeszett tutorial listával …

  • Egy egyszerü, de jópofa, szines 2 oszlopos design a smashingmagazine támogatásával: WordPress.FunEgy flickr-re kihegyezett képmegjelenítő theme a Clo …

A cikket beküldte: Harder (http://blog.harder.hu)

2 hozzászólás

  1. Gismo says:

    Köszi a gyűjteményt!
    Esetleg egyéb resources? :D

  2. Harder says:

    Lesznek persze, csak idő kell hogy átrágjam magam több száz angol nyelvű híren és kigyűjtsem a jobbakat a lapra. :)

Szólj hozzá
a 15 hasznos CSS és HTML leírás honlapkészítéshez c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>