The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Create gradient without image

View previous topic View next topic Go down

Solved Create gradient without image

Post by YoshiGM on March 24th 2012, 9:19 pm

I Want to create a css code with gradient without a image. I Already tried with all page where i cand create the gradient but doesn't work :S

Forumotion supports gradients without images ? If yes.. How can creat it ?

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 24th 2012, 9:21 pm

I Also tried with that page but doesn't work :S

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 24th 2012, 9:26 pm

Not for me :$

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by Mike on March 24th 2012, 9:46 pm

What Browser Yoshi? It needs to have CSS3.

Mike
Hyperactive

Male Posts : 4242
Reputation : 466
Language : English, HTML, CSS
Location : Bozeman, Montana

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 24th 2012, 9:47 pm

Google Chrome.. how you saw in my profile :S

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by Guest on March 24th 2012, 11:20 pm

The code below works?
Code:
background-image: linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -o-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -moz-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -ms-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.01, rgb(57,108,190)),
   color-stop(0.51, rgb(86,141,228)),
   color-stop(0.76, rgb(112,170,255))
);
This is for more browsers. Wink

Guest
Guest


Back to top Go down

Solved Re: Create gradient without image

Post by Nera. on March 25th 2012, 9:58 am

@YoshiGM wrote:Not for me :$

Hi Yoshi,

Set Optimise your CSS to NO. That knew to create problems with the generated gradients.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 25th 2012, 9:35 pm

I Saw in firefox works.. but only if i clicked on the cattegory to hide it :$

Example if i have a TEST CATEGORY, when i click on the name.. it hides and the gradient shows very good.. but in chrome still doesn't work D:

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by Nera. on March 26th 2012, 10:13 am

Yoshi did you try what I told you? For me it works in both Mozilla and Chrome.
Link to where you're setting it up?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 28th 2012, 5:53 pm

Yes,.. i set optimized CSS?: No

and don't work yet :S

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 30th 2012, 12:05 am

Bump

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 31st 2012, 6:07 pm

Bump Hello

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 3rd 2012, 12:26 am

bump

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by chirstinah168 on April 3rd 2012, 6:14 am

It works as I've tried it

chirstinah168
New Member

Posts : 4
Reputation : 1
Language : english

Back to top Go down

Solved Re: Create gradient without image

Post by Nera. on April 3rd 2012, 10:58 am

What's the code you are using and under which selector Yoshi? On BB3?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 3rd 2012, 4:18 pm

forumbg and forabg nera.

i'm using this:

Code:
background-image: linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -o-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -moz-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -ms-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);

background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.01, rgb(57,108,190)),
  color-stop(0.51, rgb(86,141,228)),
  color-stop(0.76, rgb(112,170,255))
);

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by Nera. on April 4th 2012, 10:58 am

Can you see the light blue gradient on this adress Yoshi?

http://tiki.makingforum.com/forum

It's on:

Code:
.forabg {
  background-image: linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -o-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -moz-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -webkit-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);
background-image: -ms-linear-gradient(bottom, rgb(57,108,190) 1%, rgb(86,141,228) 51%, rgb(112,170,255) 76%);

background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.01, rgb(57,108,190)),
  color-stop(0.51, rgb(86,141,228)),
  color-stop(0.76, rgb(112,170,255))
);
}

It should look like this:



I see it in both:
Firefox 11.0 & Chrome 18.0.1025.142

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 4th 2012, 7:06 pm

I think this is bugging me now .. well I will not keep trying .. I'll hold with a background image.

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by genji watanabe on April 4th 2012, 7:38 pm

try here http://www.css3maker.com/

maybe this help you Very Happy

genji watanabe
Forumember

Male Posts : 231
Reputation : 17
Language : Html, Css, some Js and no Gfx.
Location : Malaysia

http://project-d.forumotion.com/

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 4th 2012, 7:45 pm

Oh genji.. thanks a lot.. your page works very good !!!

Now this is solved Very Happy

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by Sanket on April 4th 2012, 7:48 pm

Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum