L007. coloured background

on CLOUD 9 || graphics & layouts tutorials
Please Subscribe to read the full chapter

coloured backgrounds

 

 

 

1. Every colour is tagged to a given code. This code can come in two different forms and you can choose to work with whichever you're more comfortable with.

Below are some examples of commonly used colour codes:

Red: #FF0000  or  RGB(255,0,0)

Green: #00FF00  or  RGB(0,255,0)

Blue: #0000FF  or  RGB(0,0,255)

White: #FFFFFF  or  RGB(255,255,255)

Black: #000000  or  RGB(0,0,0)

To get the codes for the colour of your choice, go to the colour picker.

 

 

 

2. Next, you can add background colour to the style of a group/object using your selected colour codes.
 

<div style="background:#D0DA99;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet magna augue, vel pulvinar purus ultrices at.</div>

 

this is the result of the above code:
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet magna augue, vel pulvinar purus ultrices at.


#note: the background colour fills the whole width if the width of the group is unspecified

 

Add the float:left tag if you want the background colour to adapt to the width of the content.
 

<div style="float:left;background:#D0DA99;">Lorem ipsum dolor sit amet</div>

<div style="float:left;background:#D0DA99

Please Subscribe to read the full chapter
Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
LilMinMinniexx
#1
I'm currently learning how the coding works here (since there are quite a lot of code pieces that don't work here.) These are pretty good guides :)
gagnant
#2
Chapter 4: hi?
can I ask you how to make this one "like this story? give it an upvote"
schneizel
#3
i'm not a beginner, but i really need this to learn how to use more textures and stocks, and omf.
thanks for this; i'll be waiting for more!

also, may i request typography? it's always been a matter that i've been struggling with.
Vonchic
#4
Chapter 11: You have, by far, the most helpful tutorials I've seen around! Seriously, I've been reading coding tutorials these days and I still had questions left hanging even after I read those tuts! I think it's because you're not just showing one way to do something but that you're showing what happens if you do this and not that. I'm looking forward to your scrollbar tut as I'm having problems making the scrollbar transparent on top of a background image. I know it will take a long time before we even get to that tutorial but I'm hoping it's one of things you will address! Thank you and have a good day!