CSS 3 online generator


Itt a legújabb css3 online generator. Megnéztem és teljesen jó kódot generál, használata meglehetősen egyszerű, egyértelmű.

Css3 generator

Egy mintakód, amit generált:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	/*IE DOES NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow:0px 0px 17px #000000;
	-webkit-box-shadow:0px 0px 17px #000000;
	box-shadow:0px 0px 17px #000000;
	/*IE DOES NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	background: -moz-linear-gradient(top, #ff0000, #0000ff);
	background: -webkit-gradient(linear, center top, center bottom, from(#ff0000), to(#0000ff));
	background: -o-linear-gradient(top, #ff0000, #0000ff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background: linear-gradient(top, #ff0000, #0000ff);
	/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/

Link: CSS3 Generator – By Eric Hoffman & Peter Funk

Kapcsolódó bejegyzések:
  • A CSS3 támogatottsága még elég gyatra, főleg IE terén, ezen igyekszik segíteni az alábbi megoldás:Használata.box { -moz-border-radius: 15px; /* …

  • A webdesigner depot-on jelent meg nemrég egy jó kis gyűjtemény 15db HTML5 és CSS3 generátor szolgáltatást felsorolva, amik között vannak tényleg jók és hasznosak …

  • Régebben ugye a kerekített sarkokhoz ott volt a klasszikus megoldás, amikor képekkel lett megoldva mind a 4 sarok. Ezen túl ott van a szokásos CSS3 megoldás, ami …

  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • A CSS-ben a középre igazítás mindig is nehéz feladat volt, mert a böngészők máshogyan értelmezik a CSS tulajdonságokat, ráadásul vertikális középre igazítás ninc …

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

12 hozzászólás

  1. codee47 says:

    Szia!

    Köszi, de egy link azért elfért volna, vagy csak én nem látom :)

  2. Icebob says:

    Másik hasonló cucc: http://css3generator.com/

  3. Harder says:

    Köszi, pótoltam a cikkben a linket. :)

  4. Pipis says:

    Sziasztok!
    Egy ideje rendszeresen olvasom az oldalt, sokat tanultam innen. Én csak amatőr weblapépítő vagyok, de mivel még sehol nem láttam az alábbi megoldást, így előfordulhat hogy mások is hasznosnak találják. Az egyhangú, csúnya szürke input gombokat fellehet dobni CSS3-al, akit érdekel, az oldalamon van pár minta, le is tölthető.

    http://www.pipis.site11.com/buttons/button.html

  5. Fefy says:

    Pipis: Nem lennének rosszak, de(!) sajnos nem minden esetben tökéletes a végeredmény. Ezt bizonyítja az alábbi kép is: http://blog.fefy.info/images/upload/2011/05/22/css3.jpg (balról IE9, jobbról Opera 11.50, de 11.11-el is ugyanez a végeredmény, más böngészővel pedig lustaságból nem néztem meg). Szóval a css3 szép és jó, de ameddig nem kezelik a böngészők egységesen, addig csak óvatosan vele :) Továbbá ha megengedsz egy kis kritikát: az “#00AA00, #006600, #003300″ színátmenetes háttér esetében nem túl szerencsés a fehér betűszín :)

  6. Harder says:

    CSS3-mat is ma még úgy kell használni, hogy tudatában légy annak, nem mindenhol lesz jó a végeredmény. :) Viszont mindenképp pozitív az irány ami fele haladunk, nemsokára – amint ezek minden (fontosabb) böngésző által normálisan lesznek kezelve, sokat egyszerűsödik az életünk. :)

  7. Pipis says:

    Fefy: Jogos, mert tényleg nem minden böngésző tudja kezelni. FF 4.01-en tökéletes, de pl a CSS3 animációk már nem futnak, csak a legújabb Chrome és Opera alatt. Egyébként az a színkombináció a középzöld és sötétzöld + egy köztük lévő kombinációja, ezek szerint a böngészők nem kezelik amivel nézted.

  8. Fefy says:

    Pipis: A színek miatt, akkor bocsi (mivel IE-vel, illetve Operával néztem(és mindkettő ugyanúgy jelenítette meg), FF nem volt kéznél).

    Harder: Na igen :) Viszont azért remélem, hogy egy fél év múlva (esetleg jöv. évelejétől) már biztonságosabban lehet majd használni a css3 újdonságait. Ezek közül is leginkább a normális kerekítés, árnyékolás, multicolumn, illetve az animációkat várom. Esetleg még egy normális woff is jól jönne, nagyban könnyítené az “életet” :)

  9. Pipis says:

    Fefynek: Egy webshop terv, a fejléckép és a termékképeken kívül minden CSS3-al készült, csakhogy lásd mit szalasztottál el a gombokkal:)

    http://kepfeltoltes.hu/110523/screenshot_www.kepfeltoltes.hu_.jpg

  10. Fefy says:

    Pipis: egész jó lett :) viszont én továbbra is fenntartással kezelem a css3-at, pontosan az miatt, mert nem minden böngésző támogatja.

  11. krisss says:

    Sziasztok

    szuper a cikk, bár én olyat mutatok ami ennél sokkal több:
    bluepeneditor
    nem csak módosítja a css-t és a végén ott állok egy halom kóddal, hanem le is menti a megfelelő helyre!

    mit szóltok hozzá?

    krisss

  12. Harder says:

    Szia Krisztián,
    Grat a bluepeneditor-hoz, próbálgattam az előbb és jópofa cucc, online/realtime módosításokhoz kezdőknek tényleg kényelmes lehet!

Szólj hozzá
a CSS 3 online generator 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>