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, 3: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 ?
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 3:21 pm

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

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 3:26 pm

Not for me :$
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 3:46 pm

What Browser Yoshi? It needs to have CSS3.
avatar
Mike
Hyperactive

Male Posts : 4243
Reputation : 468
Language : English, HTML, CSS
Location : Loveland, Colorado

Back to top Go down

Solved Re: Create gradient without image

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

Google Chrome.. how you saw in my profile :S
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 5: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, 2:58 am

@YoshiGM wrote:Not for me :$

Hi Yoshi,

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

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 25th 2012, 2: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:
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 3: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?
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 28th 2012, 10:53 am

Yes,.. i set optimized CSS?: No

and don't work yet :S
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on March 29th 2012, 5:05 pm

Bump
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 11:07 am

Bump Hello
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 2nd 2012, 5:26 pm

bump
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Create gradient without image

Post by chirstinah168 on April 2nd 2012, 11:14 pm

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, 3:58 am

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

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

Post by YoshiGM on April 3rd 2012, 9:18 am

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))
);
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 3: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
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2014
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Create gradient without image

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

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

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 12:38 pm

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

maybe this help you Very Happy
avatar
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, 12:45 pm

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

Now this is solved Very Happy
avatar
YoshiGM
Forumember

Male Posts : 668
Reputation : 93
Language : Spanish, English & Italian (16%)
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, 12:48 pm

Topic Solved & Locked
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
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