The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

CSS/HTML color gradient

5 posters

Go down

Solved CSS/HTML color gradient

Post by Mineko Mon 9 Nov - 15:25

Hello, again Very Happy
I would have a question that I have this CSS code below.
Code:
background: rgb (255,255,255);
background: linear gradient (90deg, rgba (255,255,255,1) 0%, rgba (209,209,209,1) 50%, rgba (255,255,255,1) 100%);
How could this be rewritten to use as a border-color?
Or maybe I should use a completely different code to do a gradient? q.q
Mineko
Mineko
Forumember

Female Posts : 57
Reputation : 1
Language : Hungarian
Location : Hungary

https://blackmoonfrpg.hungarianforum.com

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by YoshiGM Mon 9 Nov - 16:08

Hello,
You can use that in any zone of your forum. Simply inspect and then add the properties. For example:

Code:

.module {
background: rgb (255,255,255);
background: linear gradient (90deg, rgba (255,255,255,1) 0%, rgba (209,209,209,1) 50%, rgba (255,255,255,1) 100%);
}

This is for your widgets.
You can also check this for more information: https://css-tricks.com/gradient-borders-in-css/
and of course this: https://help.forumotion.com/t42099-learning-the-basic-css



YoshiGM
YoshiGM
Active Poster

Male Posts : 1562
Reputation : 146
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by Mineko Mon 9 Nov - 16:21

I want to snag the gradient into this.
Code:
<div style = "width: 490px; border-right: 5px double; border-left: 5px double; border-color: # C0C0C0; border-radius: 20px; padding: 10px; margin-top: 10px; line-height: 20px; "> </div>
How?
Mineko
Mineko
Forumember

Female Posts : 57
Reputation : 1
Language : Hungarian
Location : Hungary

https://blackmoonfrpg.hungarianforum.com

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by YoshiGM Mon 9 Nov - 16:24

All CSS attributes that you add after the equal sign be readed by the browser.

Code:
<div style="width: 490px; border-right: 5px double; border-left: 5px double; border-color: # C0C0C0; border-radius: 20px; padding: 10px; margin-top: 10px; line-height: 20px; background: rgb (255,255,255);background: linear gradient (90deg, rgba (255,255,255,1) 0%, rgba (209,209,209,1) 50%, rgba (255,255,255,1) 100%);"> </div>

YoshiGM
YoshiGM
Active Poster

Male Posts : 1562
Reputation : 146
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by Mineko Mon 9 Nov - 17:07

https://i.imgur.com/Jrww6zc.png

Well ... it looks like the forum is protesting now because it doesn't do it. Sad
Mineko
Mineko
Forumember

Female Posts : 57
Reputation : 1
Language : Hungarian
Location : Hungary

https://blackmoonfrpg.hungarianforum.com

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by TheCrow Mon 9 Nov - 17:42

@Mineko,

You want this to be on the borders? Not as a background?


CSS/HTML color gradient Thecro10
Forum of the Forums

Forumotion Rules | Tips & Tricks |
FAQ | Did you forget your password?



*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6916
Reputation : 795
Language : Greek, English

https://www.inforumgr.com

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by Mineko Mon 9 Nov - 18:46

I want it for Border, but that's how the code generator issued it. :/ q.q
Mineko
Mineko
Forumember

Female Posts : 57
Reputation : 1
Language : Hungarian
Location : Hungary

https://blackmoonfrpg.hungarianforum.com

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by tikky Mon 9 Nov - 22:02

Hello @Mineko,

How could this be rewritten to use as a border-color?
Here:
Code:
  border: 5px solid;
  border-image: linear-gradient(90deg, rgba(255,255,255,1), rgba(209,209,209,1), rgba(255,255,255,1)) 1;
  box-sizing: border-box;

and
I want to snag the gradient into this.
Code:
<div style="width: 490px; border: 5px solid;  border-image: linear-gradient(90deg, rgba(255,255,255,1), rgba(209,209,209,1), rgba(255,255,255,1)) 1;  box-sizing: border-box; margin-top: 10px; line-height: 20px;"></div>
tikky
tikky
Forumember

Posts : 922
Reputation : 160
Language : 🇵🇹

https://www.forumotion.com/create-forum/modernbb

BlackScorpion and TonnyKamper like this post

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by Mineko Mon 9 Nov - 22:39

Oh, I love * - *
You solve all my problems <3
Thanks, @pedxz <3

Solved Very Happy
Mineko
Mineko
Forumember

Female Posts : 57
Reputation : 1
Language : Hungarian
Location : Hungary

https://blackmoonfrpg.hungarianforum.com

tikky likes this post

Back to top Go down

Solved Re: CSS/HTML color gradient

Post by SLGray Tue 10 Nov - 0:30

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


CSS/HTML color gradient Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51555
Reputation : 3524
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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