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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

12 HOZZÁSZÓLÁS

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

  2. 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 :)

  3. 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. :)

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

  5. 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” :)

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

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

  8. 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!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét