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ű.

CSS 3 online generator 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:
  • CSS 3 online generator

    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; /* …

  • CSS 3 online generator

    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 …

  • CSS 3 online generator

    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 …

  • CSS 3 online generator

    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 …

  • CSS 3 online generator

    Ma kollegámmal belefutottunk egy új project kapcsán abba, hogy egy lapról sitemap-t kellett volna generálni, de amit eddig használtunk ( Create your Google Sitem …

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

12 hozzászólás

  1. codee47 (http://www.code-art.hu) 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 (http://blog.harder.hu) says:

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

  4. Pipis (http://www.pipis.site11.com/) 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 (http://fefy.info) 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 (http://blog.harder.hu) 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 (http://pipis.site11.com) 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 (http://fefy.info) 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 (http://pipis.site11.com) 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 (http://fefy.info) 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 (http://blog.harder.hu) 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>