28-06-23 Tabs update in light of forced height/overflow properties. View here or here.
09-05-23 "Transform" properties were in dire need of an update after the new properties were released sometime last year
04-05-23 Reformatted navigation; removed box-sizing guide and vmin & vmax because who even uses those
04-05-23 Added a section on variables
04-05-23 Added new animation: rippleAnimation
So, you want to code, but you have no coding background? Fear not! This guide is meant to hold your hand through the process. I wrote this guide to be as accessible to the layman as possible without omitting key details. On the other hand, if you have some coding background but don't know how to do certain things, you are free to skip to the other sections.
Hopefully, you can glean some useful information from this guide. Just remember that you also need to practice if you want any of the information to stick. This guide won't be of much help to you if you don't do some hands-on learning in the process. Experience is the most reliable teacher, yadda yadda.
HOWEVER--if you're absolutely stuck, feel free to shoot me a DM, or ask Iwaku's experienced coders using this thread.
What is BBCode?
BBCode–short for Bulletin Board Code–is a markup language that allows users to format forum messages. It doesn't allow unwanted code injections–like scripts that can be used to hack websites–making it much safer than HTML. The code then gets parsed by the application (phpBB, MyBB, vBulletin, etc.) to translate into HTML, which is why BBCode varies from website to website.
Disclaimer
There is a lot of info, and though I tried to double check everything, I still may have made some typos or small mistakes. If you spot some kind of inaccuracy in my guide, please let me know! I'm also open to suggestions on how I can improve this tutorial.
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
Direction - to top | to right | to bottom | to left | degrees
Color-stop - color-names | hex | rgba
e.g. background: linear-gradient(to left, yellow, red);
RADIAL-GRADIENT creates a circular gradient as a background
background: radial-gradient(shape size at x-position y-position, start-color, last-color size);
Shape Size - circle | ellipse
Position - %
Color - color-names | hex | rgba
e.g. background: radial-gradient(circle at 50% 50%, yellow, red 70%);
CONIC-GRADIENT creates a conic gradient as a background
background: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
e.g. background: conic-gradient(from 90deg at 60% 45%, red, green);
e.g. background: conic-gradient(red 45deg yellow90deg green 210deg);
REPEATING-GRADIENT repeats the gradient
background: repeating-linear-gradient([to diirection], color [degree], color [degree], ...);
background: repeating-radial-gradient(shape size at position, start-color, ..., last-color);
background: repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);
PART 6. INLINE, BLOCK, & INLINE BLOCK
INLINE displays an element as an inline element. Any height and width properties will have no effect. Does not respect top and bottom margins.
display: inline;
BLOCK starts on a new line and takes up the full width available. Will occupy the 100% of the with of its parent element.
display: block;
INLINE-BLOCK displays an element as an inline-level block container. Will not start a new line. Height and width values can be set.
display: inline-block;
PART 7. CONCEALMENT & OPACITY
DISPLAY: NONE completely hides the element. Does not leave behind whitespace.
display: none;
VISIBILITY will hide the element if set to hidden, but leaves behind whitespace
visibility: visible | hidden;
OPACITY defines the opacity/transparency of an element, with 0 being fully transparent and 1 being fully opaque.
opacity: value;
PART 8. SCROLL
OVERFLOW-X specifies what happens if content overflows an element box horizontally
overflow-x: scroll | hidden;
e.g. overflow-x: scroll;
OVERFLOW-Y specifies what happens if content overflows an element box vertically
overflow-y: scroll | hidden;
e.g. overflow-y: scroll;
OVERFLOW sets overflow property for both the x and y axes.
PART 9. WRAPPING UP
FLOAT makes an element float to a specific area of the page, causing inline elements to wrap around it
float: left | right;
e.g. float: left;
CLEAR undo the float effect for a specific element
clear: left | right | both;
e.g. clear: both;
PART 10. REPOSITIONING ELEMENTS
TOP pushes/pulls an element from the top. Defined with lengths or %.
top: value
e.g. top: -5px;
RIGHT pushes/pulls an element from the right. Defined with lengths or %.
right: value
e.g. right: 10px;
BOTTOM pushes/pulls an element from the bottom. Defined with lengths or %.
bottom: value
e.g. bottom: -15px;
LEFT pushes/pulls an element from the left. Defined with lengths or %.
left: value
e.g. left: 7px;
PART 11. LAYER ORDER
Z-INDEX specifies the layer order of an element. Defined in positive or negative integers.
z-index: value
e.g. z-index: 1;
PART 12. TRANSLATE, SCALE, ROTATE, SKEW
TRANSLATE moves the element along the x and y axes. Defined with lengths.
translate: x y z
e.g. translate: 25px 25px 5px;
SCALE stretches, inverts, or flips an element. Defined with numbers.
scale: x y z
e.g. scale: -1;
e.g. scale: -1 -1 1;
ROTATE rotates an element. Defined with degrees.
rotate: axis angle
e.g. rotate: 10deg;
TRANSFORM: SKEW distorts an element along the x and y axes. Defined with degrees.
transform: skew(_deg,_deg)
e.g. transform: skew(10deg,10deg);
PART 13. ANIMATION
ANIMATION assigns an animation to an element and specifies its duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state.
animation: name duration timing-function delay iteration-count direction fill-mode play-state
e.g. animation: rotateSpinner 2s linear 0s infinite reverse forwards running;
+ ANIMATION-NAME tells the browser which animation to use for the target element
+ ANIMATION-DURATION defines the duration of the animation. Specified in 's' or seconds.
animation-duration: _s;
e.g. animation-duration: 5s;
+ ANIMATION-TIMING-FUNCTION specifies the speed of the animation.
animation-timing-function: linear | ease-in | ease-out | ease-in-out | ease;
e.g. animation-timing-function: ease;
+ ANIMATION-DELAY defines how long of a wait there should be before the animation begins. Specified in 's' or seconds.
animation-delay: _s;
e.g. animation-delay: 5s;
+ ANIMATION-ITERATION-COUNT can be specified in numbers (1,2,3...) or infinite. Defines how many times the animation should be played
animation-iteration-count: value;
e.g. animation-iteration-count: infinite;
+ ANIMATION-DIRECTION specifies how the animation is played.
animation-direction: normal | reverse | alternate | alternate-reverse;
e.g. animation-direction: reverse;
+ ANIMATION-FILL-MODE specifies the style of the element when the animation is not playing. forwards will retain the the last keyframe, backwards will retain the first keyframe, while both will extend the animation properties forwards and backwards.
animation-fill-mode: forwards | backwards | both
+ ANIMATION-PLAY-STATE specifies whether the animation is playing or paused
animation-play-state: paused | running
PART 14. CURSORS
CURSOR modifies or adds an image as the cursor. See full list here
cursor: cursor-name;
e.g. cursor: crosshair;
cursor: url(), auto;
PART 15. COLUMNS
COLUMNS displays content in columns
columns: column-count min-width;
e.g. columns: 3 250px;
COLUMN-GAP adds gap between columns. Specified in lengths.
column-gap: value;
e.g. column-gap: 3 5px;
COLUMN-RULE sets width, style, and color to column borders. Uses the same styles as border (Can be found in Box > Borders)
column-rule: width style color;
e.g. column-rule: 5px double green;
PART 16. FLEXBOX
DISPLAY creates the container
display: flex;
FLEX specifies the grow, shrink, and basis of a flexbox
flex: grow shrink basis;
e.g. flex: 1 1 150px;
e.g. flex: 1;
+ FLEX-GROW specifies how much extra space the item takes compared to other items
flex-grow: number;
+ FLEX-SHRINK specifies how much the item shrinks compared to other items
flex-shrink: number;
+ FLEX-BASIS specifies the base width of the item
flex-basis: width;
ORDER specifies the orders in which items are arranged. Specified with integers.
order: value;
e.g. order: 2;
FLEX-DIRECTION specifies whether the flexbox displays in a row or column
flex-direction: row | column;
e.g. flex-direction: column;
MIN-WIDTH specifies the minimum width of an element. Can be defined with lengths.
min-width: value;
e.g. min-width: 250px;
JUSTIFY-CONTENT specifies the position of the item along the main axis
Feel free to skip this part of the guide if you are already well-versed with the RTE.
Set Up
I prefer viewing the raw code. It's easier to edit codes this way and there are fewer chances for error. You don't have to do this, but I highly recommend it.
You'll know that the raw code viewer has been toggled when all other options are grayed out.
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.
There's no need to do all this manually! You can spare yourself the headache and use an external resource/color picker, and inject the value it spits out 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. Which is perfect for web design!
Below is a table of 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.
Now, 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 retains 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.
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--well, nothing, basically.
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.
> 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. We can therefore 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: 2x the root font size.[/div]
Output:
This is 2rem: 2x the root font size.
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 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 2x the parent font size.[/div]
Output:
Hello world, this is 2x 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. Be aware that not all of them will work on Iwaku, 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: Arvo;]This is Arvo[/div]
Output:
This is Arvo
We can also 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 bold.[/div]
Output:
This is the default.
This is 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 bold.[div][div= font-weight: lighter;]This is lighter.[/div]
Output:
This is the default.
This is 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 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 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.
You may be wondering what the difference is. Well, 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() and calc() 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 it 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. 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.
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, which you can tweak in any way you desire. 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 let's add some 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. 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.
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, so to speak.
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.
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 distorted. 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. 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.
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.
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) - Photoshop Version
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.
There are two ways you can go about this. Either you create your own scrollbar with photo editing software, or you create it with pure code.
This is how you'd add a scrollbar image to your code:
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, just to make it look nicer.
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.
Note that you may have to play around with the values if you're planning on making any of the above examples bigger.
> Custom Scrollbar (Advanced) - Pure CSS Version
If you'd like to create your scrollbar using pure CSS, this is one of the ways you could do it:
We would be implementing the same logic, essentially: making a dummy scrollbar and layering it on top of the real scrollbar.
Let's open our first div and specify our width. In this example, I will be using a width of 200px.
[div=
width: 200px;][/div]
This div will have two children: our content and our scrollbar respectively.
Let's go ahead and specify the first child. I'm going to use a height of 200px. Let's tack on the background, font-color, and the overflow property while we're at it.
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.
We're going to omit display: inline-block for this one. We're not going to need it!
Next up is the scrollbar. A width of 17px seems just right for the scrollbar. The height of our scrollbar must be the same as the height of our real scrollbar. In this case, it would be 200px. Let's also add a background so we can see our output:
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.
Using FontAwesome Icons, let's make the arrows. These will go inside our scrollbar div.
Let's also specify the color and size of these icons. In my example, I'm going to use #fff and 15px respectively.
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.
It looks a bit off right now though. So let's center the text with text-align: center;
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.
We would also want the down arrow to be all the way to the bottom. We can easily achieve this with display: flex and margin-top: auto;
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 all that's left to do is to make our dummy scrollbar float to the right, and displace it exactly 200 pixels upwards so that it covers the real scrollbar entirely.
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.
Use pointer-events so that we can click through the dummy 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.
Try viewing this on mobile and you'll notice that the scrollbar will occasionally obscure the text behind it. To solve this issue, simply add padding to the box that contains the text. 17px, the width of our scrollbar, is the bare minimum value that you should set for your right padding.
This is not exactly ideal from a design perspective, but it's the best workaround we have.
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.
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.
Iwaku automatically adds a position: relative !important to your code. We cannot override this, as it is already technically an override. It makes sense why Iwaku would have this feature, but that does mean 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, which work in conjunction with position: relative.
In a real world scenario (aka outside the bounds of Iwaku), we are supposed to use position: relative and the other properties (top, right, bottom, left) 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: