! HTML/CSS Cheat Sheet's Comments

Fimie

This is some really helpful information, thank you so much for sharing! This will make my life so much easier :D

This user is not visible to guests.

Flint072

Premium feature, but this snippet should work.

\\ Sidebar Colour \\ .sidebar { background-color: #HEXCODE; }

Vulpine_raccoon

Question, with a background, is there anyway to make the text a different color? I want it to be easier to read

Arctya

Hello, can you please tell me how to adjust the size of an icon using CSS?

adearee

how do i make text big and colorful

ziggityzappz

hey! is there any way to use the collapse code on a image? like clicking the image will show the text? :D

mootshoo

is it possible for you to help me with this? https://toyhou.se/~forums/16.htmlcss-graphics/400693.help-with-css heres the post i made with more information

This user is not visible to guests.

NebulaNumbat

Hello! Unfortunatly you can't on toyhou.se, but you can try some other ways!
If the code where you'll put the image a solid color you can insteadput a gradient with that color!
for exemple:

(The background is set to white, so it'll appear white in any site theme)

Now i put a white to transparent gradient on top of it:

So here's a step-by-step:

First: The image needs to be on a solid color background.

Second: Create a div with the dimentions you want and the image as a background
1. This trick only works with background-images
2.this div cannot have padding, it can have a margin however

    <div style="background-image: url('https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); height: 200px; width: 200px;"></div>

Third: create a new div inside of it, with width: 100%; height: 100%; with the gradient you want as a background
Remember one of the colors of the background must have a transparency of 0!
I use this site: CSS Gradient It's really good!

 <div style="background-image: url('https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); height: 200px; width: 200px; ">
 
  <div style="background: linear-gradient(10deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); width: 100%; height: 100%;">
  </div>
    
</div>

class="card p-1" style="user-select: all">

Then you can put any content inside of it!

 <div style="background-image: url('https://images.unsplash.com/photo-1512641406448-6574e777bec6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'); height: 200px; width: 200px; ">
  <div style="background: linear-gradient(10deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); width: 100%; height: 100%;">
     Put your content here!
  </div>
</div>

Write you content here!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The effect you described you be somethign like this:

And this is the gradient I used:

background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 100%);

Hope this helps!

quinn_

thank you!! this is super helpful in figuring out how html here works, i'm making my own html thing now!!!

Lilmonix

woah thank you, this has been super helpful
one question though, how can i change the color of those icon things? ive got <i class=" fas fa-star"></i> but i cant figure out how to change its color

NebulaNumbat

I'm glad its helping!

These icons work the same way as text, so you can use bootstrap colors: like this:

<i class=" fas fa-star text-warning"></i>

For this:

Or by style, like this:

<i class=" fas fa-star" style="color: #a16bd6"></i>

For this:

Lilmonix

thank you, that's super useful ^^ I appreciate the help :]

huas3lf

i was wondering why none of this was working for me - I needed this " not this “ LMAAOO

but oh my god this helps so much

zerolunaa

Do you take questions? Recently I used a base for my character that had options for links, but no matter what I put, it keeps being referred back to this random toyhouse profile called /link.. I've been trying to figure it out for 2 days now, it looks like the command in your cheat sheet but despite that it doesnt work :(

Bazookie

Do u take questions id like to ask something abt the collapse section, this is also very helpful btw will use in the future : )

NebulaNumbat

Of course! I'll help how i can :3

Bazookie

Thank you ! Is there a way i could use one of those icons as a button for collapse ive seen it done ive just got no idea how you'd code that

NebulaNumbat

You can put an Font Awsome Icon insede the <a> tag, like this:

<a data-toggle="collapse" href="#ID" role="button" aria-expanded="false" aria-controls="ID">
     <i class="fal fa-sun"></i>    
</a>

You can format the icon any way you want, by default it will be the standard link color

Exemple:

<a data-toggle="collapse" href="#ID" role="button" aria-expanded="false" aria-controls="ID">
   <i class="fal fa-triangle fa-flip-vertical text-danger"></i>    
</a>

<div class=" collapse " id="ID">
   <p>Hello!</p> 
</div>

Hello!

Hope it helps! I'll also put an explanation on the sheet

Bazookie

THANK YOU SO MUCH IT HELPS ALOT !! :DS

NebulaNumbat

No problem, Im happy to help ^^

JamesTDG

Heh, this has been more informative than the college class I took in web development

NebulaNumbat

Im glad this helps!