Includes Cheat Sheet
Please do not post in this thread.
This is meant to be read from top to bottom, but you are free to skip to sections that you feel are most relevant to you. I have also included external resources in this post (after internal navigation).
PADDING sets the distance between the element and the border
padding: value;
e.g. padding: 10px;
+ PADDING TRBL (Top Right Bottom Left) sets the padding of specific sides
padding: TRBL;
padding-top value;
padding-right: value;
padding-bottom: value;
padding-left: value;
e.g. padding: 3px 10px 4px 4px;
e.g. padding-top: 10px;
OUTLINE specifies the outline of a box. Has the same styling values as border.
outline: width style color;
e.g. outline: 3px solid blue;
+ OUTLINE (Width Style Color) sets width, style, and color individually
outline-width: TRBL;
outline-style value;
outline-color: value;
e.g. outline-width: 3px 2px 1px 5px;
OUTLINE-OFFSET displaces the outline away from or closer to the element.
outline-offset: value;
e.g. outline-offset: 3px;
BOX-SHADOW adds shadow to the element. Specifies the horizontal and vertical offset, the blur, the spread, and the color of the shadow.
box-shadow: h-offset v-offset blur spread color;
e.g. box-shadow: 3px 3px 3px blue;
PART 3. BACKGROUND
BACKGROUND-COLOR sets the background color of an element
background-color: color-name | rgba | hex;
e.g. background-color: black;
e.g. background-color: #000000;
e.g. background-color: rgba(0,0,0,1);
BACKGROUND-IMAGE sets an image as the background of an element
background: url(url here);
BACKGROUND-SIZE sets the dimensions of the background image
background-size: x, y | cover | contain;
e.g. background-size: 400px 200px;
e.g. background-size: 100% 50%;
e.g. background-size: cover;
BACKGROUND-POSITION is used in conjunction with the background: url function, which is responsible for setting the image. The x specifies the horizontal position whereas the y specifies the vertical position of the background image used.
background-position: x y;
e.g. background-position: 0% 0%;
e.g. background-position: 50px 50px;
BACKGROUND-REPEAT sets if/how a background image should be repeated
The first thing you'll want to know is the div code:
[div][/div]
It's what we're mainly going to use in this thread. Without it, we can't really do much. The first [div] is the opening tag, whereas the last [/div] is the closing tag. These two come in a pair, always. The opening div specifies a section and how it is styled, while the closing tag specifies where that section ends.
Of course, nothing will happen when it is used on its own. This is where the CSS properties come in. The syntax will look as follows:
[div= property: value;][/div]
We will open the div tag by appending the equal (=) sign. The equal (=) sign will then be followed by the property and its value, which are separated by a colon (:). Together, the property: value; makes what's called a declaration.
For example:
[div= width: 100px;][/div]
The above code specifies the width of an area, which in this case is 100 pixels. If we try to render this as it is, nothing will show up. To fix this, we either add some content or specify the height. Let's do the latter.
[div=
width: 100px; height: 100px;][/div]
As you can see, you can append more than one property to the opening div tag. Just remember to separate each declaration with a semicolon (;)
The Output:
We still can't see our output. Why is that? Well, it's actually there, but we only specified the dimensions, so there's not much else to display. Let's add a background color so we can see what's going on.
You can also create a div inside of a div. This is called nesting. Just remember that the inner div (otherwise known as the child) almost always inherits the values set in the outer div (also known as the parent).
Let's go ahead and nest our second div, inside of which we will write "Hello world."
In the example above, the child will have a font color of blue, and inherit the width, height, and background-color of the parent div. This is the final output:
Hello world.
Whatever the parent has, the child will inherit, unless we specifically style the child element. Let's add a background-color to our nested tag to test this.
Before anything else, I want to share a pretty nifty feature. As you know, we're doing what basically amounts to inline CSS, which will inevitably make our codes more and more complicated as we go along. We're going to need to leave notes for ourselves so that we can remember where things are or why we did things a certain way. Fortunately, we can add comments in our code.
To illustrate, let's use our prior code in the following example:
[div=
width: 100px;
height: 100px;
background-color: white;][div=
background-color: gray; /* THIS IS A COMMENT. THIS WILL NOT RENDER */
color: blue;]Hello world.[/div][/div]
You can place a /* comment */ anywhere after the equals sign (=), between the declarations. Just be careful when placing it. Don't delete any of the semicolons or the brackets.
Let's check the output:
Hello world.
Sure enough, our comment does not render on the page. Now, let's move on to properties like promised.
So, assuming you read the previous module on Syntax and Nesting, you are now aware of the properties background-color and color, but let's dive a little deeper and see all that we can do with them.
background-color, as the name suggests, changes the color of an element's background. For a more streamlined coding process, use background instead of background-color. The output will be the same.
color, on the other hand, is responsible for the font color.
There are different ways to specify the value for both color and background. They are as follows:
color names
rgb or rgba
hex color codes
> Color Names
First on our list is color names. There are a total of 140 color names, all of which you can find on w3schools. Let's see it in action...
Here is the input:
[div= color: Purple;]This is purple.[/div]
Here is the output:
This is purple.
As you can probably tell, this is a very basic way of inputting colors and will not provide you with many options. So let's take a look at the others...
> rgb or rgba
Next is rgb, which looks like this:
rgb(0,0,0)
As can be seen above, each 0 refers to a specific color. It goes red-green-blue in that specific order.
Each one is measured between 0 to 255.
0 means there is no amount of that color present.
255 means there is the max amount of that color present.
This also means that when you set all rgb to its max value 255, it will make white. Set everything to its lowest value 0, and it will make black.
So, let's say we want a vivid red color. How would we achieve this? Or to be more specific, how much of blues and greens do we need? How much of red?
The answer: We need a max of red, so we set red to 255. Blue and green will both stay at 0 as we don't need them.
How do we make a purplish color? Purple is created through a mixture of blue and red. In the following example, let's try adding some color to the following text by adding a little bit of red and blue, but completely omitting green.
[div= color: rgba(128,0,255,1);]This text is purple[/div]
The output:
This text is purple
> Hex Color Codes
And finally, hexadecimal color codes, my favorite. This gives you a broad range of color choices and is preferred by many developers as it is easier to read.
#RRGGBB
or (if the characters within a pair is the same)
#RGB
Hex codes are always preceded by the (#) and implements both letters as well as numbers. It follows the same logic as RGB.
Depending on the placement along the hex code, 00 denotes the lowest value of that specific color. This would equate to 0 in rgb. FF denotes the highest value of that specific color. This would equate to 255 in rgb.
So we know how to represent black in rgb, but how would we go about that in hex code?
Easy. It's #000000 or #000
We can also add alpha by tacking it onto the end of our hex code.
#RRGGBBAA
Here is an example of a hex color code in action (without the alpha):
[div= color: #8000ff;]This text is purple.[/div]
And here is the output:
This text is purple.
Now, nobody that I know actually manipulates the rgb or hex values manually or knows all of them off the top of their head. So you can spare yourself the headache and use an external resource/color picker, and inject the value into your code. If you want my recommendation on external resources, just head back to the table of contents.
# Featured Properties
color: value;
background: value;
# Try It Yourself
Create an element with:
A blue background with 50% opacity (using rgba)
White text saying "Hello World" with 100% opacity (using hex)
A comment inside the code. Remember that the comment must not render.
In this module, we will be discussing CSS Units, which will be used to express length for certain properties.
There are two types of length units: absolute and relative.
Absolute units are fixed. They appear exactly as that size and will not shrink or grow. In our current age of phones and tablets, where each medium has different screen dimensions, absolute units are not usually recommended. They are best used if the dimensions of the output are known. (ex. Printing a 300x300px image on A4 paper, which has a dimension of 3508x2480px)
Relative units, on the other hand, scale relative to the dimensions.
Below is a table of commonly used units, some of which we'll be using throughout this thread. All I want you to focus on for now are the px and the %.
Unit
Name
Type
Notes
px
Pixel
Absolute
1px = 1/96 of 1in
%
Percent
Relative
Relative to the parent element; Makes object occupy __% of the screen.
in
Inches
Absolute
1in = 96px = 2.54cm
cm
Centimeter
Absolute
--
mm
Millimeter
Absolute
--
pt
Point
Absolute
--
em
Element
Relative
Relative to the font size of the element
rem
Root Element
Relative
Relative to the font size of the root element
vw / vh
View Width / View Height
Relative
Relative to a percentage of the viewport's width / height
vmin / vmax
Viewport Minimum / Viewport Maximum
Relative
Size as a percentage of the smallest between the width and height of the browser window
Now to put these units to practice.
Let's first compare two of the most commonly used units on Iwaku: px and %.
Let's set up our px example first.
I personally want a width of 700px, but you can set the value to whatever you want.
[div= width: 700px;][/div]
Let's also add a height of 100px to make a nice rectangle.
[div=
width: 700px; height: 100px;][/div]
So far, so good. Now let's add a red background so we can see our output.
What an absolute unit. Ahem. I couldn't resist. Anyway, let's do our second div box. This time, we will be using a width of 80%. We will be using 100px for our height (the reason for this will be explained later). Let's also give it a blue background so as to differentiate it from the one above.
The first box has an absolute width (px), meaning that the div box maintains its width no matter the browser size.
The second box has a relative width (%), meaning that the div box grows bigger or smaller as we adjust the browser size.
This can be confusing to beginners, but the box grows bigger or smaller relative to its parent, which is the entire scope of Iwaku's post container. The width of Iwaku's post container is 955px, and so our div box takes up a set percentage of that width. In our example above, the percentage set is 80% of 955px.
The reason why I didn't set a percentage height for the second div box is because Iwaku's post container doesn't have a fixed height, so there is nothing for the percentage to refer to. To use percent for height in this case is like telling the box to take up a percentage of nothing, which makes no logical sense.
Alright, so now we know how px and % function when it comes to our dimensions. Let's try them on font size.
[div= font-size: 12px;]This is 12px[/div]
The output:
This is 12px
We can alter the px to make the font as big or as small as we want. Let's make our font size slightly bigger, shall we?
[div= font-size: 20px;]This is 12px[/div]
Output:
This is 20px
For percentage, the font size will be relative to the parent's font size. So, let's use our previous code and nest another div inside of it. Let's also add some text within our tags, so we can see our output.
[div=
font-size: 20px;][div= font-size: 50%;]This is 50% of 20px[/div]
And our output is:
This is 50% of 20px
Fairly straightforward, yeah? Time to move on.
Note: I won't be discussing how in, cm, and mm works, because they are similar in function to px; just that the measurement is obviously different. In any case, we'll be using px for the most part.
If you're a complete beginner, I suggest that you skip ahead to the module on Typography. Go through the other modules first, put them to practice, then read the continuation of this module (the post below) when you feel like you've already got a good handle on things.
With that out of the way, let's move on to our other relative values. Note that this will require some basic computation.
> em and rem
em and rem are relative units that you can use for your font size.
Let's begin with rem. rem is dependent on the root font size; that is, the font size in the HTML code of a website. rem will always depend on the root.
The root font size on Iwaku is 62.5%, meaning that it will be relative to the browser's font size. The default browser font size is 16px.
So, after some computation, we can conclude that Iwaku would have a default font size of 10px.
If browser font size is 16px,
1rem = 62.5% of 16px.
Therefore, 62.5% of 16px is 10px.
If we want our font to be twice the size of our rem, we simply input the following:
[div= font-size: 2rem;]This is 2rem; that is twice the root font size. In my case it would be 2 * 10, which is 20px.[/div]
Output:
This is 2rem; that is twice the root font size. In my case it would be 2 * 10, which is 20px.
Now, try changing your browser's font size (Can be found in settings). As you can see, the font size changes depending on your setting.
Next up is em, which is relative to its parent. In Iwaku's case, the post container has a default font size of 1.4rem.
1rem = 62.5%
As well as
1em = 1.4rem
Which, by default, would be:
1em = (16px * 0.625) * 1.4
Which, when calculated, would be: 1em = 14px
The default parent font size is 14px.
So, should I want to make my font to be twice the size of the parent font size, it will look like this:
[div= font-size: 2em;]Hello world, this is twice the parent font size.[/div]
Output:
Hello world, this is twice the parent font size.
Should I want it to be 3x the parent font size,
[div= font-size: 3em;]Hello world, this is 3x the parent font size.[/div]
And so on and so forth.
Alright. Let's say I don't want the font size to be relative to Iwaku's post container. Instead, I want the em to be relative to a font size of 20px. How do we go about doing this?
First, let's set our parent div with the absolute value 20px.
[div= font-size: 20px;][/div]
Now, let's nest our first em value, which will be 1em.
[div=
font-size: 20px;][div= font-size: 1em;]This is 1em, or 20px.[/div][/div]
For demonstration, let's nest another em value. This time I want it to be 2x the parent font size.
[div=
font-size: 20px;][div=
font-size: 1em;]This is 1em, or 20px.[/div][div= font-size: 2em;]This is 2em, or 40px.[/div][/div]
Let's say I want the next child to have 4x the parent font size. How would we go about doing that?
[div=
font-size: 20px;][div=
font-size: 1em;]This is 1em, or 20px.[/div][div=
font-size: 2em;]This is 2em, or 40px.[/div][div= font-size: 4em;]This is 4em, or 80px.[/div][/div]
Perfect. Let's check our output:
This is 1em, or 20px.
This is 2em, or 40px.
This is 4em, or 80px.
Sure enough, it works exactly as intended. The above should stay the exact same font size regardless of our browser settings.
> View Width & View Height
vh and vw, which stand for view height and view width accordingly, are relative to the viewport (browser). This means that as you change your browser size (whether you are making it bigger or smaller), the element will also be changing its dimensions, making it look good across all devices.
Let's say we want to make a box, and we want that box to take up only 10% of our viewport's width, but we want it to take up 20% of our viewport's height.
Essentially, this code says: "Hey, browser, which has a smaller value right now? The width or the height?" It will take whatever is the smallest value between the two, and our box will be 1% of that value. If we set our code to:
Our box will be 5% of that value, and so on and so forth. vmax operates upon a similar logic, except it takes the highest value between width and height, and sets your box's width and height (if specified) to a percentage of that value.
Aaaand that's all we have for units. Congrats, you made it this far and (hopefully) understood everything there is to know about units!
So, we already covered font-size, but you may be wondering how to change the font-family. It's pretty straightforward. Simply input the desired font, as follows:
[div= font-family: Times New Roman;]This is Times New Roman[/div]
Don't forget to type your content between the tags too.
Output:
This is Times New Roman
You can also input Google Fonts. Note that not all of them work, but you've still got plenty of fonts to choose from. It's good practice to keep loading time in mind (especially since I assume many people access Iwaku from their phones). So try not to go too overboard with Google Fonts in one post/thread.
Let's try using one of my favorite google fonts.
[div= font-family: Oooh Baby;]This is Oooh Baby[/div]
Output:
This is Oooh Baby
This particular font doesn't show up on my phone (although it does on my laptop), but we can do what's called a font-stack. This means we add a back-up font (or multiple) to our main font.
> FONT STACK (Optional)
Simply separate the fonts with a comma (,) You can stack multiple fonts; it doesn't have to be only two. Just remember that it goes in the order of left -> right, with left being the main and the right being the last resort.
[div= font-family: Consolas, monospace;]This is Consolas, but it also might be its generic font family.[/div]
Output:
This is Consolas, but it also might be its generic font family.
So even if my main font isn't supported by my browser, the text is presented with the back-up font instead.
You can use the generic families as the final font in your stack. You can't (usually) go wrong with them. They are as follows:
serif
sans-serif
cursive
fantasy
monospace
> FONT-WEIGHT & FONT-STYLE
So, let's say you have a string of text that you want to make bold. Well, you can either use the mark up [B][/B]. Or you can simply use the font-weight property, which allows you to modify more than just a text's boldness.
Let's input some text with a normal font-weight and one with a bold font-weight, just for comparison's sake.
This is the default.
[div= font-weight: bold;]This is totally bold.[/div]
Output:
This is the default.
This is totally bold.
Okay, but what if I want to do the opposite? You want to make the text lighter. In that case:
This is the default.
[div=
font-weight: bold;]This is totally bold.[div][div= font-weight: lighter;]This is lighter.[/div]
Output:
This is the default.
This is totally bold.
This is lighter.
Okay, but what if I want the font to be just a little bit bold? Let's nest another div tag and set the font weight to a numerical value. This value should be between 100-900, where 400 is the same as normal.
I'm going to set mine to 530.
This is the default.
[div=
font-weight: bold;]This is totally bold.[div][div=
font-weight: lighter;]This is lighter.[/div][div= font-weight: 530;]This is just a little bold.[/div]
Output:
This is the default.
This is totally bold.
This is lighter.
This is just a little bold.
And so on and so forth. There is also the bolder value, but I'm not going to demonstrate that since I think you probably get the point.
Alright, so now that we know how to make our text bolder or lighter, you may be asking: how do we do italics? Well, this is where font-style comes in. Simply input the desired value after the font-style property. Such that:
[div= font-style: italic;]This is italics.[/div][div= font-style: oblique;]This is oblique.[/div]
Output:
This is italics.
This is oblique.
Italics are specific characters created by the type designer themselves. Oblique is just the regular font but slanted. So, let's say you want to italicize a font but font-style: italic won't work. That's probably because the designer didn't make the italics version of that typeface (and for good reason, more often than not). In that case, you can use oblique instead.
> Text-Shadow
Should we want to add some shadow to our text, we could use the text-shadow property. This is the syntax:
text-shadow: h-shadow v-shadow blur-radius color
h-shadow denotes the position of the horizontal shadow.
v-shadow denotes the position of the vertical shadow.
blur-radius denotes the blur-radius of our shadow.
color denotes the color of our shadow.
Let's put this into practice.
[div= text-shadow: 2px 2px 2px blue;]This has a shadow.[/div]
Output:
This has a shadow.
> Using clamp to automatically resize text
With the clamp function, we can make our text automatically resize itself according to browser dimensions. This makes our font very responsive indeed, and is one of my most favorite properties to use.
You may be wondering why we even need our code to be responsive. Well, when you're working with large text for titles, headers, and the likes, they don't look quite right on mobile or other small devices. The text gets split up, sometimes letters that don't fit in one line go to the next. What clamp does is that it allows us to specify a range of sizes that make our text shrink or grow depending on the size of the browser.
To employ clamp, we will be needing the following syntax:
font-size: clamp(min, val, max);
min denotes the minimum value we would allow our font-size to be.
val denotes our preferred value.
max denotes the maximum value we would allow our font-size to be.
Alright, let's say I want my minimum value to be 25px and my maximum value to be 50px. For my preferred value, I'm going to specify 3vw.
[div= font-size: clamp(25px, 3vw, 50px);]Clamp is awesome[/div]
Output:
Clamp is awesome
Try resizing the browser and see what happens.
> More Text Properties
There are so many more properties that we could cover with typography, but I think a lot of it is pretty self-explanatory. You'll find them in this cheat sheet (under typography).
I want to add space on the left side of the box so that it isn't sticking too close to the edge. To do that, I'm going to use the margin-left property. I'm going to estimate and say I need a value of 100px.
Typically, you'd use something like margin-left, margin-right, margin-top, and margin-bottom if you want to move elements closer to or away from each other. For example, let's say we had two div boxes sitting side by side:
If we specify a value of 5px to either the margin-left of the second box, or margin-right of the first box, see what happens:
Now there's a gap between them. Pretty neat, yeah? Now, in a scenario where we're going to need to specify all four directions, we can simply use a shorthand: margin: top right bottom left, but you don't need to worry about this right now, as such scenarios are few and far between when working with Iwaku bbcodes.
That aside, we can also center our element by using margin: auto;, like this:
Alright, now I'm thinking I want a border around our box. We do this by appending the border property.
There is border-width which specifies the thickness of our border. There's border-style which specifies what kind of border will be displayed. And finally, border-color, which specifies the color of our border. Now, we can use them all individually, like this:
And we have our border. Please note that you can change the values. You don't have to use exactly what I use. This is just for demonstration. If you want to take a look at the other border-styles available for use, see this Cheat Sheet.
Now, let's add some text inside this box. The text will be our content.
I don't like that it's sticking close to the edge, so what do we do? We add padding. As in real life, we use padding when we're packing our precious items in boxes. Padding always goes inside the box.
In other words, it controls the space inside an element. This is not to be confused with margin, which controls the space outside of an element.
Next up is border-radius, which enables us to add rounded corners to our elements. border-radius is the shorthand, for which you define the top-left, top-right, bottom-right, and bottom-left values in that order. But you can also choose to define specific corners. I won't bombard you with the properties, but you can view them here under Box.
It's a lot, I know. But you don't have to have all the properties memorized; it'll come naturally to you as you practice coding.
Anyway, back to our border-radius: We can use a length or percentage value. In the following example, I'll be using px.
Feel free to experiment with this in your own test thread.
> Box-shadow
This isn't part of our box model, but I may as well hit this one out of the park since it's kind of relevant. If you ever feel the need to add a shadow to your element, simply append the box-shadow property. This is similar in function to text-shadow, except the latter obviously determines the shadow of text.
This is how the full declaration will look:
box-shadow: h-offset v-offset blur spread color;
h-offset determines the shadow's horizontal offset. A positive value will put the shadow on the right side of the element, while a negative value will put the shadow on the left.
v-offset determines the shadow's vertical offset. A positive value will put the shadow below the element, while a negative value will put the shadow above the element.
blur specifies how blurred the shadow ought to be. Can be omitted.
spread specifies the size of the shadow, with a positive value increasing the size, and a negative value decreasing it. Can be omitted.
Let's say you want your box to have a border, but you don't want it to sit right outside the element. You want to displace it by a few pixels. How would you go about doing this? Well, this is where outline and outline-offset come to the rescue. These properties allow us to do things we can't normally do with a border.
outline is styled the same way as borders. You can individually specify the outline-width, outline-style, and outline-color. Or you can use the shorthand, outline: width style color;. It shares the same styles as the border property.
Let's try it out. For this example, I'm going to use 5 pixels just so we can clearly see the border. I'm also going to implement the double style and a vibrant blue color.
Next, we're going to want to input the outline-offset property. This is in charge of displacing our outline, and is equally as important. Without it, this code is just going to look like a regular border.
We're going to be using a negative value for this one so that our outline is within the element.
If you've been playing around with codes for a while, you may have noticed that inputting padding and borders does not add to your element's width and height. This is because, in Iwaku, the default setting is box-sizing: border-box. This declaration makes your element retain its original dimensions.
Sometimes, the difference may be negligible; but there may be times (very rarely, I presume) where you'd like to reverse this effect. This is where box-sizing: content-box comes into play.
This is an element with box-sizing: content-box. Although I defined a width of 200x200px, I also defined 20px padding on all sides, beefing up our element into 240x240px.
This is an element with box-sizing: border-box. Although I defined a padding of 20px on all sides, the dimensions remain at their original size.
For our next module, let's sink our teeth into the display property. Now, tackling all the values in one go will be overwhelming, so let's put our focus on display: block;, display: inline;, and display: inline-block; in the meantime.
To illustrate our first declaration, display: block;, consider this code:
[div=
background: red;
color: white;]Hello, I have no width.[/div]
As you can tell, I only defined the background and the color. I did not specify a width. Let's see what happens.
Output:
Hello, I have no width.
As you can see, our element takes up the whole line. This is what display: block; does, which also happens to be the default. Now, what if we want two elements side-by-side? Let's duplicate our code, add some width, and see what happens.
[div=
width: 200px;
background: red;
color: white;]Hello, I am block.[/div][div=
width: 200px;
background: blue;
color: white;]Hello, I am block.[/div]
Output:
Hello, I am block.
Hello, I am block.
We cannot put them side-by-side this way. display: block; blocks out an entire line for each element, meaning even if you add another element, it will inevitably go to the next line. What's the solution, you ask? First, let's take a look at inline.
Unlike block, inline takes up only as much space as it needs. It doesn't start a new line. With that in mind, let's try to fix our earlier problem. First, let's remove the width since we won't be needing that anymore, and then let's add our new property.
[div=
background: red;
color: white; display: inline;]Hello, I am inline.[/div][div=
background: blue;
color: white; display: inline;]Hello, I am inline.[/div]
Output:
Hello, I am inline.
Hello, I am inline.
Very nice. But let's say we want to add height to this element:
[div= height: 300px;
background: red;
color: white;
display: inline;]Hello, I am inline.[/div][div= height: 300px;
background: blue;
color: white;
display: inline;]Hello, I am inline.[/div]
Output:
Hello, I am inline.
Hello, I am inline.
You may be wondering why the height isn't rendering by now. Well, the height isn't rendering because height and width properties will have no effect on inline elements. Luckily, we can achieve what we want with display: inline-block; instead.
[div=
height: 300px;
background: red;
color: white; display: inline-block;]Hello, I am inline-block.[/div][div=
height: 300px;
background: blue;
color: white; display: inline-block;]Hello, I am inline-block.[/div]
Output:
Hello, I am inline-block.
Hello, I am inline-block.
Now, our code behaves like an inline and block element simultaneously.
! Remember
Inline elements do not respect top and bottom margins.
Block elements respect all margins.
In this guide, I'm going to teach you how to conceal your element or lower its opacity. I'm going to tackle display: none first, since it's the easiest to understand out of the bunch.
Let's say you have this box, but you want to hide it:
Append display: none; and just like magic, your box won't show up anymore. There is no hint of it even existing on the page. Don't worry, though, your code is definitely still there!
As you can see, visibility: hidden; leaves behind a trace of its existence. The element's form is still there; it's just wearing an invisibility cloak. It's pretty straightforward.
But say you only want to lower the opacity. Well, you can use the alpha for colors, or you can use the opacity property.
Opacity is specified between 0.0 (completely transparent) and 1.0 (completely opaque). It is especially useful when one is working with images and overlays. I haven't covered background images yet (it is in the next module), but I'm going to use it in the following example as I feel it best illustrates what the property can do:
You can also make the element disappear by changing the value to 0. However, like visibility, the element will still take up space. I mean, it's still there after all, it's just transparent!
Now, this is where things start to get exciting. Previously, we covered how to make colored backgrounds, but now we're going to learn how to add images as backgrounds.
Again, we will be using the background property. However, this time, we will be appending url() instead of color. Paste the direct link to the image you want to use within the parentheses. Direct links typically end with file formats (i.e. .jpg, .png, .gif, etc.)
This is the image I'll be using for my background.
Okay, cool. It works as intended. However, you may have noticed that the image doesn't quite fit the page. Now, if that is intentional, then great! But if you'd like your image to fit snugly inside the container, then you may want to use the next property.
> Background-size
background-size allows us to tweak the size of our image.
In the above example, I used background-size: cover; which essentially tells our image to cover the scope of the element while retaining its aspect ratio.
Output:
As you can see, it crops the image to fit in the box.
You are not limited to just cover, however. There are plenty more values. Let's use background-size: x y; next. We will input 50px for our x value (width) and another 50px for our y value (height).
As you can see, the image no longer respects its aspect ratio and looks a little skewed. Also, since we used 50x50 px, our image only takes up 1/4 of our 100x100 element. The background automatically repeats itself if there is an empty space.
Now, let's take a look at background: contain;, which resizes the image in a way that it is fully visible, not cropped.
Again, since our image only takes up as much space as it needs, there is an empty space that is automatically filled with a repeat of our background. This is typically only okay if your background image is a seamless tile or texture. Otherwise, you're probably going to want to avoid it. So, how do we go about doing that?
> Background-repeat
background-repeat: no-repeat saves the day for when you don't want your pesky backgrounds to repeat themselves.
You can also choose to only repeat an image along the x-axis (horizontal) or the y-axis (vertical).
By using background-repeat: repeat-x;, we get:
By using background-repeat: repeat-y;, we get:
There's also background-repeat: space; which allows us to repeat our image without it clipping. Instead, whitespace is distributed among our images.
> Background-position
Let's say we have this image:
It looks fine, but we want to reposition our image so that the model's head is sitting at the center. We can do this by appending background-position: x y;.
There are multiple values we can use for this property, most of which will be covered in the cheat sheet. But for this example, I'm going to use %, as it's the one I always default to.
This will align our image to 50% along the x-axis and 50% along the y-axis.
Output:
> Background-attachment
background-attachment sets the background image to either scroll with the page, or remain fixed in place. By default, the image scrolls with the page, so let's try specifying our attachment as fixed. I'm also going to turn the values for background-size and background-position into absolute values, so that they actually work with attachment.
Next up is background-blend-mode. This is not as beginner-friendly, so feel free to skip if it doesn't interest you. Essentially, what this property allows us to define a blending mode, should we have more than one layer of either colors or images.
In the next example, I'm going to add a second background image, and I will set the blend-mode to overlay.
It will take too long to demonstrate every single value, so if you'd like to test them out yourself, check out the background section in the cheat sheet!
# Shorthand
background: color image position/size repeat origin attachment;
Gradients are pretty nifty as they allow us to display smooth transitions between two or more colors. In this guide, I'm going to teach you how to make a linear-gradient, radial-gradient, and a conic-gradient. Then, later on, we're going to combine backgrounds and gradients.
> Linear Gradient
Let's begin with linear-gradient. This is the syntax we will be using:
Alright, let's begin by inputting our colors, and only our colors. We'll add direction later.
Also, because I can't be arsed to get hex or rgba values, I'll simply be using color-names. You can use hex or rgba, however, especially if you'd like to add some transparency to your gradient.
Now, our gradient's direction goes from left -> right.
We can also position our gradients diagonally. Something like to bottom right would work, but if we want to be more specific, we should use angles instead.
To illustrate, let's use a 45 degree angle for our next example.
And that's linear-gradient in a nutshell. Moving on!
> Radial Gradient
Next, we have radial-gradient. The syntax will look something like this:
background-image: radial-gradient(shape size at x-position y-position, start-color, ..., last-color size);
For shapes, we have the choice between ellipsis (which is the default), or circle.
X-position and y-position determines where our ellipsis or circle is positioned along the x-axis and the y-axis. We use percentages.
size determines how big or small we want our shape to be.
I'd say start-color and last-color are pretty self-explanatory, yeah?
Now let's see the radial-gradient in action. For the next example, I'm going to use a circle shape, and a position of 50% 50%, which should center our shape. Finally, our size will be 30px.
Alright, now let's try adding angle which specifies where the conic gradient starts and ends.
For our next example, let's say that our conic gradient is rotated at 90 degrees.
[div=
width: 100px;
height: 100px; background-image: conic-gradient(from 90deg, red 45deg, yellow 90deg, green 210deg);][/div]
Output:
Next, let's specify our position. This will determine the center of our conic gradient. Once again, x-axis will come first, and then y-axis comes next. We will be specifying them as percentages.
In our following example, our values should move our gradient 40% along the x-axis (toward the left) and 60% along the y-axis (toward the bottom).
[div=
width: 100px;
height: 100px; background-image: conic-gradient(at 40% 60%, red 45deg, yellow 90deg, green 210deg);][/div]
Output:
> Repeating Gradients
I don't know what you could use this for, but we may as well cover it. The syntax will look like this:
So, now that we know how to add background images and gradients individually, let's try putting them together. Gradients could make some pretty interesting overlays, after all, and it's pretty simple to do it.
The overflow property is responsible for how our overflowing content is displayed.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis.
As you can see, if we specify a height for our box, our text will end up spilling out of it. We can make our text scrollable instead by appending the overflow-y: scroll; property. This will make our text scroll along the y-axis (vertically).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis.
You've probably already guessed it by now, but we can also make our text scroll along the x-axis (horizontally). Just change the y to x!
> Hiding the Scrollbar
Scrollbars can look pretty out of place depending on what your design is, so some people on Iwaku like to hide them. You can also partially hide the scrollbars, if you'd like them to appear thinner. With this method, although we're hiding the scrollbar, it still retains its functionality.
In CSS, there's a syntax that coders could use to hide the scrollbar. Unfortunately, it's different for every browser. For example, you can use scrollbar-width: none; for Firefox, but it's going to be different for Chrome, Safari, Opera, etc. We can't simply define all of these either, as we're still using bbcodes at the end of the day, and that makes it impossible to use pseudo elements.
So, instead, we're going to use the workaround. Again, note that this is not the standard way you're actually supposed to approach this, but hey, sometimes we gotta break the rules to get what we want.
First, let's create our container div. For this demonstration, our box will be 200x200 pixels. Let's go ahead and set our background so that you can see what's going on.
Alright. So far, so good. Let's nest our second div inside the one we already have. We're going to return to the first one later once we've set everything up in our child div.
In our child, let's append width: 110%; This will make our child 10% larger than its parent div.
We're also going to append height: inherit;, so that our child inherits the parent div's height. We need to specify this because we're going to add overflow to the child later.
Next, let's add overflow-y: scroll;. Now is also a good time to input our dummy text. I'm not going to be pasting the full thing in the code I'm presenting to you because it eats up a lot of space. It also makes our code look more complicated than it is. Latin, man, I'm telling ya.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Now, let's try to push our scrollbar to the side by adding margin-left: 10%;. Let's give it a balanced look with padding-right: 10%;.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Nice. Our scrollbar is now jutting out of our div box. If you look closely, you'll notice there's some white space between the element and the scrollbar. You can adjust the margin and padding values, should you want the scrollbar to be as close to the edge as possible.
Now, for our final edit, let's input overflow: hidden; to our parent div. This would conceal anything that is overflowing out of our parent.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Try to scroll inside the box!
Now, if you don't want to completely commit to removing the scrollbar, you can always partially hide the scrollbar instead. Simply adjust margin and padding.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
And there you have it!
> Custom Scrollbar (Advanced)
Warning: you may have to read the module on position before reading this section.
Okay, let's figure out how we can customize our scrollbars. Again, there's a simpler way to do this if we were only working with CSS, but BBcode likes to make our lives difficult as always.
I managed to find a way to make a functioning "customized" scrollbar, though. And this is how you do it:
First, create your scrollbar (bearing width and height in mind) through a photo editing app. You can also just create it manually with divs, but personally, I'm a sloth, so in my example I'm going to use a scrollbar that I made with photoshop.
Let's code our first div box, where we input our standard 200x200 dimension and the overflow property. For this example, I'm going to be using one of my background images, because I don't want to assault your eyes any further.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Let's do our second div. We are not going to be nesting this inside our first div. Rather, it will go outside.
I'm going to set my custom scrollbar as the background, and I will define a width of 17px. This is because scrollbars are, by default, 15-17px in width. The height will be 200px to reflect our div box's height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Now, we want these two elements to sit side-by-side. Append display: inline-block to both to do this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
Next, we are going to pull our scrollbar to the left. We will use -17px to do this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
If you try to click the buttons, they won't work. So, to actually make them functional, let's use the pointer-events property. When we set it to none, we will be able to click through the element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi. Duis condimentum ornare ante eget interdum. Integer consequat fringilla placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque vulputate bibendum neque, sed interdum est dapibus a. Suspendisse vestibulum eros non justo aliquet, at ultrices arcu vulputate. Etiam elementum quam leo, quis vehicula elit tristique non.
There you go. A functional custom scrollbar.
Note that you may have to play around with the values if you're planning on making any of the above examples bigger.
The float property is used to position our content. This is most commonly used for floating an image so that text wraps around it.
Let me demonstrate in the example below. Once again, we'll be using the standard div box with a background image; however, this time we'll be appending float: left so as to make our element float to the left. Alternatively, you can use float: right to make the element float to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi.
As you can see, our text wraps around the image. However, we can make the text go to the next line by using the clear property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec enim vehicula, rutrum dui nec, gravida massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vitae lorem porta, dapibus felis non, vestibulum sem. Maecenas et finibus orci. Sed quis placerat massa. Nunc ac ligula at turpis facilisis aliquet. Suspendisse arcu ante, feugiat vitae posuere sit amet, cursus ut mi.
Note that if you used float: left, you must also specify left for your clear property. If you used float: right, specify clear: right. If you have two images floating side by side, use clear: both. Float and clear always mirror each other in this way.
In Iwaku, the default position is relative. We cannot use or override this with any of the other values. Hence, we are not going to discuss position very much; rather, we are going to focus on how to move our elements using the top, right, bottom, and left properties.
Normally, we are supposed to use position: relative and the other properties together. But like I mentioned before, Iwaku's default setting makes defining position: relative in our code unnecessary. Let's go ahead and define our left property.
In my demonstration, I'm going to use -20px for the left property.
By using the negative (-) value, we are essentially pulling our element from the specified side (in this case, left). If we used a positive (+) value instead, we would be pushing our element from the specified side. This value is always relative to the element's original position.
If we used right: 20px instead, it will have the same effect as left: -20px Here's the proof in case you don't believe me:
Now that we know how to reposition our elements, let's see how we can determine their layer order.
First, let's do a little set-up. This time, we will be making three boxes and repositioning them so that they are overlapping each other. By default, the latest coded element will overlap the ones before it.
Now, what I want to do is reverse the layer order. I want the blue box to overlap the red box, and the red box to overlap the green box. z-index will help us achieve this.
z-index lets us define a negative or positive number. The higher the number, the higher it goes in the layer order.
In our case, we have three elements. Our elements have a z-index of 0 by default. Thus, we don't need to specify a z-index for our green box since we want it to be at the very bottom of our hierarchy. Instead, let's specify the order of our other elements: