CSS Help & Resources Page 27

Started by seeker November 16th, 2009 5:38 PM
  • 175331 views
  • 902 replies

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Its usage has been blocked for reasons unrelated to usertitles.
Indeed. The "&32;" usage trick stopped working though when PC was upgraded to vBulletin 3.8.8 some time ago, though. So I wonder if that has anything to do with it.

TheMarkCrafter

roses are red, violets are blue, i used to break rules but now im new.

Male
Kalos
Seen January 14th, 2016
Posted December 30th, 2015
543 posts
12.3 Years
Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)
winter is here.
back at 12/23/15

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Anyone knows how to make Gradient text?

If anybody knows the thing I mean.

I want it to be like

Snivy

But the color scheme thing links between the other colors.

Just like when you gradient in Photoshop, but horizontal.

Thank you ;)
Here's something I found:

Snivy

[css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div]
You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)

TheMarkCrafter

roses are red, violets are blue, i used to break rules but now im new.

Male
Kalos
Seen January 14th, 2016
Posted December 30th, 2015
543 posts
12.3 Years
Here's something I found:

Snivy

[css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div]
You may or may not be able to see it, but if you have Chrome, it should appear fine. Also, you may need to adjust the percentage of the gradient as well depending on where you're putting it.

Hope this helps! :)


Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:
[S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE]


And I meant to add the spaces, because the code won't show.

And thank you for helping :)
winter is here.
back at 12/23/15

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Thanks :) But when I add it to the center and give it the size 5, that's how it shows.

Snivy

And for the code, here:

Spoiler:
[S IZE="5"][css-d iv="background-image: -webkit-gradien t(linear, left center, right center, from(#006400), color-stop(5%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/c ss-div][/S IZE]


And I meant to add the spaces, because the code won't show.

And thank you for helping :)
You'll have to play around with the percentage there. Here's the code again, with the updated text:

[CENTER][SIZE="5"][css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div][/SIZE][/CENTER]
And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop(60%, #98FB98))

TheMarkCrafter

roses are red, violets are blue, i used to break rules but now im new.

Male
Kalos
Seen January 14th, 2016
Posted December 30th, 2015
543 posts
12.3 Years
You'll have to play around with the percentage there. Here's the code again, with the updated text:

[CENTER][SIZE="5"][css-div="background-image: -webkit-gradient(linear, left center, right center, from(#006400), color-stop(80%, #98FB98)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"]Snivy[/css-div][/SIZE][/CENTER]
And here's the part where you would need to play around with (using a number between 1 and 100), as highlighted below:

-webkit-gradient(linear, left center, right center, from(#006400), color-stop(60%, #98FB98))
Oh well, I thought there would be some percentage playing but no.

I must thank the body part called brain for ignoring it..

Anyways thank you!
winter is here.
back at 12/23/15

Legendary Silke

You like dragons?

Seen December 23rd, 2021
Posted April 22nd, 2020
5,925 posts
12.5 Years
I wonder whether this place can be used for a "rate my CSS-based signature" post. If yes, what do you think of my signature? I'm also thinking of going from hard-coded background colours to a base background colour, gradients, and the text background colours to be actually semi-transparent. (no need to show me the code since I know what I need to do already - just chime in on the idea)

Either way, sometimes, don't you wish everyone supported everything equally well? Pretty much every major browser engine have their strengths (think Webkit/Blink and effects in general, Trident and text and just rendering things as fast and as correctly as possible, off the top of my head in my actual use) that makes it a bit hard to target something specific. I prefer to just... well, seeing as my siggy looks fine in IE8 of all things...

I just make sure that nothing looks obviously wrong in kind-of-old browsers.

Ghost Lunis

BOO!

Male
The Shadows
Seen February 12th, 2018
Posted October 19th, 2014
2,074 posts
12 Years
Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)
wet dreams are made of this trade shop

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Hello I'm back again with another question.
I tried posting an image in a thread but the image wouldn't show up. Here is how I wrote it.
[IMG]https://www.dropbox.com/s/g7jl5hnzg0dhgsq/20140120_203141.jpg[/IMG]
I haven't used dropbox really before and I tried doing this on my phone. I don't have a clue what could be going wrong. Any help would be greatly appreciated as I would like to post more pictures in the future as well . Thanks a bunch:)
The reason that your link isn't coming out as an image is because it's not a direct link to the image. AFAIK, with Dropbox, only images in the public folder can be directly linked, so you may want to move it over there.

Ghost Lunis

BOO!

Male
The Shadows
Seen February 12th, 2018
Posted October 19th, 2014
2,074 posts
12 Years
The reason that your link isn't coming out as an image is because it's not a direct link to the image. AFAIK, with Dropbox, only images in the public folder can be directly linked, so you may want to move it over there.
You are amazing! Thank you so much.
I will do that and see if it helps :)
wet dreams are made of this trade shop

Ghost Lunis

BOO!

Male
The Shadows
Seen February 12th, 2018
Posted October 19th, 2014
2,074 posts
12 Years
If that fails, just try uploading it to Imgur. It's free and easy to use.
That was going to be my next question of that didn't work. Thank you very much as well.

After doing some research, my dropbox won't have a public folder. Anything after October 4 doesn't need the file supposedly.
Here is what I've come up with...
Spoiler:


Can anyone see that?

Edit: that's still the exact same problem. Stupid dropbox. I'm going to imgur.
wet dreams are made of this trade shop

Ghost Lunis

BOO!

Male
The Shadows
Seen February 12th, 2018
Posted October 19th, 2014
2,074 posts
12 Years
I had no idea the Public folder was removed. Seems, though, they made a workaround:

https://www.dropbox.com/help/167/en
That was what I did:) it still came out messed up. I took your advice and used imgur. I have another problem now though,XD. The picture is freakin gigantic! Know how to fix that by chance?
wet dreams are made of this trade shop

Elements1

Meh

Male
Nevada
Seen March 10th, 2021
Posted August 1st, 2014
272 posts
10.7 Years
Sticky threads can be posted in if it's been longer than a month right? Sorry if I'm breaking a rule :/

Ok so I'm trying to make my scroll bar disappear in this code:

[c=background-color: #808080; height: 500px; width: 250px; color: white; position: absolute; right: 1000px; left: 100px; bottom: 10px; opacity: 0.95; overflow: auto;][CENTER]
blah
blah
blah
blah
blah
blah
blah
blah[/cd]
Any help how to do that?
Air, fire

water, earth!


Completed National Pokedex: 2/20/14 Dusknoir Finial Entry
3DS FC:1263-7361-4137

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Moderator note: sticky threads are permissible to be revived at all times.

I would also change the position from absolute to relative since setting it to absolute causes it to appear anywhere on screen instead of being confined to your signature/post.

Also, just so you know, there's the BB code as well if you need to c/p CSS code. You're better off using that instead of omitting parts haha

Elements1

Meh

Male
Nevada
Seen March 10th, 2021
Posted August 1st, 2014
272 posts
10.7 Years
Just change "overflow: auto" to "overflow: hidden," and it should remove all scrollbars for you. :] Also, sticky threads are revive-able, so don't worry.
That worked, thanks! Though I would like it to scroll without showing the scroll bar similar to the example trade CSS templates. Does that make sense? I know the code in below the template but I'm still a noob and can't tell what exactly does what :P

Here:
[cd= height: 400px; width: 200px; background-color: #808080; position: absolute; top: 900px; bottom: 100px; right: 100px; left: 100px; overflow: hidden; border-style: double; border-color:#C0C0C0; border-width: 5px; color:#C0C0C0; font-size: 30px;]Pokemon[div= height: 350px; width: 200px; overflow: auto; font-size: 12px;]
[IMG]http://www.serebii.net/xy/pokemon/401.png[/IMG]
Krickot
[IMG]http://www.serebii.net/xy/pokemon/389.png[/IMG]
Normal Torterra
[IMG]http://www.serebii.net/Shiny/XY/389.png[/IMG]
Shiny Torterra
[IMG]http://www.serebii.net/xy/pokemon/387.png[/IMG]
Turtwig
[/cd][/div]


I would also change the position from absolute to relative since setting it to absolute causes it to appear anywhere on screen instead of being confined to your signature/post.

Also, just so you know, there's the BB code as well if you need to c/p CSS code. You're better off using that instead of omitting parts haha
xD thanks so much!!!! That is helpful :)
Air, fire

water, earth!


Completed National Pokedex: 2/20/14 Dusknoir Finial Entry
3DS FC:1263-7361-4137

Satan.EXE

King of the Hell

Male
C:\
Seen June 12th, 2015
Posted May 11th, 2015
2,807 posts
11.4 Years
I have a CSS dilemma that I can't figure out, though I get the feeling that a solution is relatively simple and I just don't know/see it yet. I'm making a cool format for my Roleplay posts, with a bunch of DIVs using position:absolute; but it's clipping over things below it. I tried adding a visibility:hidden; clear:both; DIV below it, but to no effect. Is there an easy solution to this problem so I won't have to start from scratch and I can keep my DIVs exactly where I've set them?

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Does changing your position to postion:relative change anything at all?

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Could you perhaps paste your CSS code here inside of the [noparse][/noparse] BB Code tags so that I (and others who wish to chime in) could have a look at it then?

Satan.EXE

King of the Hell

Male
C:\
Seen June 12th, 2015
Posted May 11th, 2015
2,807 posts
11.4 Years
[cd=width:800px; position:absolute; left:200px; margin-left:auto; margin-right:auto;][cd=width:200px; height:200px; position:absolute; background-image:url('http://i.imgur.com/L5PyNGI.png'); background-size:cover; font-size:0px; border:2px groove #4965FF; border-radius:100px 2px;]x[/cd][cd=width:570px; height:60px; position:absolute; top:0px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;][RIGHT]N - N[/RIGHT][CENTER][SIZE="5"][B]コオリヤン[/B][/SIZE][/CENTER]Ice Kingdom[/cd][cd=width:10px; position:absolute; top:220px; left:180px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;][CENTER]X[/CENTER][/cd][cd=width:570px; position:absolute; top:80px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;]x[/cd][/cd][cd=visibility:hidden; clear:both;].[/cd]

Of course, the last DIV before the visibility/clear DIV (excluding my outside width DIV) has to have a bunch of text in it to break past, but still

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
Couple of things to note with your CSS: you want to have the first element of your CSS to always be set to position:relative, because not everybody on PC uses a fluid-width style, in which the position:absoulte tag would absolutely work with. I, on the other hand, use a fixed-width style, and that would mean that having the CSS set to position:absolute, would cause the post to appear outside the margins. Here's your CSS below, and I fixed it to the best of my knowledge.

X
N - N
コオリヤン
Ice Kingdom
X
x
.


Spoiler:
[cd="width:800px; position:relative; left:000px; margin-left:auto; margin-right:auto;"][cd="width:200px; height:200px; position:relative; background-image:url('http://i.imgur.com/L5PyNGI.png'); background-size:cover; font-size:0px; border:2px groove #4965FF; border-radius:100px 2px;"]X[/cd][cd="width:570px; height:60px; position:absolute; top:0px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"][RIGHT]N - N[/RIGHT][CENTER][SIZE="5"][B]コオリヤン[/B][/SIZE][/CENTER]Ice Kingdom[/cd][cd="width:10px; position:relative; top:0px; left:180px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"][CENTER]X[/CENTER][/cd][cd="width:570px; position:absolute; top:80px; right:0px; background-color:#020204; border:2px groove #4965FF; border-radius:50px 2px 50px 2px; padding:5px; font-family:audiowide; font-size:12px; color:#E9E9FF;"]x[/cd][/cd][cd="visibility:hidden; clear:both;"].[/cd]

Starry Windy

Everything will be Daijoubu.

Male
Liberty Garden
Seen April 28th, 2020
Posted April 28th, 2020
9,307 posts
10.4 Years
I'm wondering how to implement the Marquee thing in CSS, like the ones in the Trade Corner's header, if that's possible.

Tsutarja

Age 28
he / him
Florida
Seen 4 Hours Ago
Posted 6 Days Ago
27,325 posts
13.2 Years
The marquee on the Trade Corner splashes is generated by HTML code, I'm afraid.. and HTML code is disabled in signatures.