TUTORIAL CODING HELL

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia
THE COMPLETE, UPDATED GUIDE CAN BE FOUND HERE


aouR7hv.png


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).

INTERNAL NAVIGATION
- Introduction | How to use this guide
- Cheat Sheet | Commonly used properties
- RTE & Set Up | How to use the Rich Text Editor
- Syntax | How to use [div][/div] and create a simple box
- Commenting | How to add comments
- Colors | How to add colors
- CSS Units | How to use px and %
- CSS Units (part II) | How to use other relative units
- Typography | How to style text, how to code text that automatically resizes
- Box Model | How to use margin, padding, border, border-radius, and box-shadow
- Outline-Offset | How to offset a border
- Box-sizing | How to change the box-sizing
- Block, Inline, and Inline-Block | How to place boxes side-by-side
- Display: Hidden, Visibility: None, and Opacity: 0 | How to hide boxes/change opacity
- Background Images | How to add background images
- Gradients | How to add gradients
- Combining Background Images & Gradients
- Overflow | How to add, hide, or customize scrollbars
- Float & Clear | How to make text wrap around image
- Position | How to move/displace elements
- Z-Index | How to place elements on top or below other elements
- Transform | How to translate, rotate, scale, skew
- Animation | How to animate elements
- Cursors | How to change cursors and use custom cursors
- FontAwesome Icons | How to add icons
- Columns | How to create columns and mobile-friendly boxes
- Flexbox | How to make responsive (mobile-friendly) boxes
- MP3 Players | How to create a functional audio player, how to use pointer-events
- Customized Accordions | How to customize accordions
- Customized Sliders | How to customize sliders
- Customized Tabs | How to customize tabs
- Common Mistakes | Common coding mistakes

Want me to write a coding guide on something specific that hasn't been covered? PM me.

EXTERNAL RESOURCES
/* CHEAT SHEETS */
- Iwaku BBCode Cheat Sheet
- CSS Cheat Sheet
- Font Awesome Cheat Sheet

/* COLORS, IMAGES, FONTS */
- Color Picker
- Free Photos & Videos
- Google Fonts

/* GENERATORS */
- Lorem Ipsum (Placeholder Text) Generator
- Placeholder Image Generator
- Seamless Pattern Generator
- Color Palette Generator

/* TUTORIALS */
- w3schools CSS Tutorial

/* OTHER RESOURCES */
- Browser Support Check
- Stack Overflow
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Cheat Sheet


PART 1. DIMENSIONS

WIDTH   sets the width of an element

width: lengths, %;
e.g. width: 100px;


HEIGHT   sets the height of an element

height: lengths, %;
e.g. height: 100px;



PART 2. BOX


MARGIN   sets the distance between the element and other elements

margin: value;
e.g. margin: 100px;

+ MARGIN AUTO   centers an element

margin: auto;


+ MARGIN TRBL (Top Right Bottom Left)   sets the margin of specific sides

margin: TRBL;
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

e.g. margin: 3px 10px 5px 4px;
e.g. margin-top: 10px;

BORDER   sets the thickness, style, and color of the edge or boundary of an element

border: width style color;
e.g. border: 1px dotted #000000;

+ BORDER TRBL (Top Right Bottom Left)   sets the border properties of specific sides

border-top: value style color;
border-right: value style color;
border-bottom: value style color;
border-left: value style color;


+ BORDER STYLE TRBL (Top Right Bottom Left)   sets the border properties of specific sides

border-style: style-top style-right style-bottom style-left;
e.g. border-style: dotted | dashed | double | solid | grooved | ridge | inset | outset;


Border styles are limited to the following: solid, dashed, double, ridge, groove, inset, and outset

BORDER-RADIUS   sets the roundness of border corners

border-radius: value;
border-radius: top-left top-right bottom-right bottom-left;
e.g. border-radius: 20px;
e.g. border-radius: 15px 50px 30px 5px;
e.g. border-top-right-radius: 20px;


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

background-repeat: repeat-x | repeat-y | no-repeat;

Repeat-x repeats the image horizontally
Repeat-y repeats the image vertically


BACKGROUND-ATTACHMENT   specifies whether the background scrolls with the page or not

background-attachment: scroll | fixed | local;
e.g. background-attachment: scroll;


BACKGROUND-BLEND-MODE   blends two backgrounds together.

background-blend-mode: multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
e.g. background-blend-mode: overlay;



PART 4. TYPOGRAPHY


COLOR   sets the color of the text

color: name | hex | rgba;
e.g. color: black;
e.g. color: #000000;
e.g. color: rgba(0,0,0,1);


FONT-FAMILY   specifies the font family for a selected text

font-family: family-name;
e.g. font-family: Times;


FONT-SIZE   specifies the font size for a selected text. Can be specified in lengths.

font-size: value;
e.g. font-size: 12px;
e.g. font-size: 4em;


FONT-WEIGHT   specifies how bold or how light the text should be.

font-weight: bold | bolder | lighter | 100-900;
e.g. font-weight: 500;
e.g. font-weight: lighter;


FONT-STYLE   slants the text

font-style: italic | oblique;
e.g. font-style: italic;


LINE-HEIGHT   specifies the distance or height between lines of text. Can be specified in numbers, lengths, or %.

line-height: value;
e.g. line-height: 2em;


LETTER-SPACING   increases or decreases the space between characters. Can be specified in lengths.

letter-spacing value;
e.g. letter-spacing: 2px;
e.g. letter-spacing: -2px;


WORD-SPACING  increases or decreases the space between words in a text. Can be specified in lengths.

word-spacing: value;
e.g. word-spacing: 10px;
e.g. word-spacing: -10px;


TEXT-ALIGN   aligns the element

text-align: left | right | center | justify;


TEXT-INDENT   adds indentation to the first line in a text block. Can be specified in lengths or %.

text-indent: value;
e.g. text-indent: 20px;


TEXT-TRANSFORM   controls the capitalization of the text

text-transform: uppercase | lowercase | capitalize;


TEXT-DECORATION   adds line decoration to the text

text-decoration: overline | underline | line-through | underline overline;

+ TEXT-DECORATION-COLOR   sets the color of the text decoration

text-decoration-color: color-name | hex | rgba;


+ TEXT-DECORATION-STYLE   sets the style of the text decoration

text-decoration-style: solid | double | dotted | dashed | wavy;

TEXT SHADOW   adds shadow to the text. Specifies the horizontal offset, vertical offset, blur-radius, and color of the shadow.

text-shadow: h-shadow v-shadow blur-radius color;
e.g. text-shadow: 2px 3px 3px #000000;


TEXT OVERFLOW   specifies how overflowed content should be displayed on the screen

text-overflow: clipped|ellipsis;

Clipped - overflowed content is clipped from view
Ellipsis - overflowed content is represented by an ellipsis



PART 5. GRADIENTS


LINEAR-GRADIENT  smoothly transitions from one color to another color in a linear fashion

background: linear-gradient(direction, color-stop1, color-stop2);

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. TRANSFORM


TRANSFORM: TRANSLATE   moves the element along the x and y axes. Defined with lengths.

transform: translate(x,y)
e.g. transform: translate(25px,25px);


TRANSFORM: SCALE   stretches, inverts, or flips an element. Defined with numbers.

transform: scale(x,y)
e.g. transform: scale(-1,-1);
e.g. transform: scaley(-1);


TRANSFORM: ROTATE   rotates an element. Defined with degrees.

transform: rotate(_deg)
e.g. transform: 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, and direction.

animation: name duration timing-function delay iteration-count direction
e.g. animation: rotateSpinner 2s linear 0s infinite reverse;

+ ANIMATION-NAME   tells the browser which animation to use for the target element

animation-name: fb_mpn_fade_out | fb_mpn_landing_page_slide_up | fb_bounce_in_from_left | fb_bounce_out_from_left | fb_mpn_bounce_in | fb_mpn_bounce_out | rotateSpinner;

+ 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;


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

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
e.g. justify-content: center;


ALIGN-ITEMS  specifies the position of the item along the cross axis

align-items: stretch | center | flex-start | flex-end | baseline;
e.g. align-items: flex-end;


ALIGN-SELF  aligns flex items individually along a column

align-self: flex-start | center | flex-end;
e.g. align-self: flex-end;


MARGIN  aligns flex items individually along a row

margin-left: auto;
margin-right: auto;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Syntax & Nesting


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.

[div=
width: 100px;
height: 100px;
background-color: white;][/div]




There we go!

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."

[div=
width: 100px;
height: 100px;
background-color: white;][div=
color: blue;]Hello world.[/div
][/div]


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.

[div=
width: 100px;
height: 100px;
background-color: white;][div=
background-color: gray;
color: blue;]Hello world.[/div][/div]


Do you think the gray will go over the white background? Let's check the output...

Hello world.


Yup, it does! Now that we know the basics, let's dive into properties.
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Commenting


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.
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Colors

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.

[div=
width: 100px;
height: 100px;
background: rgb(255,0,0);][/div]


Let's check the output:



But let's say we want to make our background semi-transparent. This is where alpha comes in.

rgba(0,0,0,0)


As you can see, we added a (which stands for alpha) and another 0 within the parentheses to represent it.

Alpha is measured between 0 to 1.

0 means the element is transparent.
1 means the element is opaque.

Now, let's alter our existing code to add opacity. How do we make it so that the opacity is set to 50%?

The answer: We set the alpha to 0.5. As such:

[div=
width: 100px;
height: 100px;
background: rgba(255,0,0,0.5);][/div]


The output:



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.

Hello World

 
Last edited:
  • Love
Reactions: darkflames13

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

CSS Units


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.

[div=
width: 700px;
height: 100px;
background: red;][/div]


The 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.

[div=
width: 80%;
height: 100px;

background: blue;][/div]


The output:



Try resizing your browser and see what happens.

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.

If you are already well-practiced, read on.
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

CSS Units (Ctd.)


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.

pNEaXDw.png
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.

To demonstrate:

[div=
width: 10vw;
height: 20vh;

background: red;][/div]


Output:



And voila! As we make our browser smaller, the box also gets smaller. And vice versa. It’s pretty straightforward.


> Vmin & VMax


First, let’s tackle vmin.

Quickly check your viewport’s dimensions. This will only take you a second.

On your end, which has the smaller value? The width or the height?

Let’s input this code:

[div=
width: 1vmin;
height: 1vmin;

background: red;][/div]


Output:



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:

[div=
width: 5vmin;
height: 5vmin;

background: red;][/div]


Output:



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!


# Featured Properties

width: value;
height: value;
font-size: value;


 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Typography


> Font-Family and Google Fonts


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).


# Featured Properties

font-family: value;
font-weight: value;
font-style: value;
text-shadow: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Box Model


nPsvohl.png

Our codes will display as a box when we're working with them, and within that box are a few properties we need to take note of.

The margin is the space around our element.

It goes outside of our element's border.

The space between the content and the border is called the padding.

Let's create our own box so that we can understand the nuances better.

[div=
width: 200px;
height: 200px;
background: red;][/div]

Output:


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.

[div=
width: 200px;
height: 200px;
background: red;
margin-left: 100px;][/div]

Output:


What if I changed the value to a negative pixel? I wonder what would happen.

[div=
width: 200px;
height: 200px;
background: red;
margin-left: -20px;][/div]

Output:


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:

[div=
width: 200px;
height: 200px;
background: red;
margin: auto;][/div]

Output:


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:

[div=
width: 200px;
height: 200px;
background: red;
margin: auto;
border-width: 3px;
border-style: solid;
border-color: blue;
][/div]


Or we can simply utilize the following shorthand:

border: width style color;

Let's implement the shorthand into our code instead.

[div=
width: 200px;
height: 200px;
background: red;
margin: auto;
border: 3px solid blue;][/div]

Output:


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.

[div=
width: 200px;
height: 200px;
background: red;
margin: auto;
border: 3px solid blue;]Content here.[/div]

Output:

Content here.


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.

[div=
width: 200px;
height: 200px;
background: red;
margin: auto;
border: 3px solid blue;
padding: 10px;]Content here.[/div]

Output:

Content here.


Padding also comes with the following shorthand:

padding: top right bottom left;


> Border-radius

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.

[div=
width: 200px;
height: 200px;
background: red;
border-radius: 20px;][/div]

Output:


As you can see, the corners of our box have been rounded. We can also change our box into a circle using border-radius: 100%;

[div=
width: 200px;
height: 200px;
background: red;
border-radius: 100%;][/div]

Output:


We can also specify individual values for each corner, using this shorthand: border-radius: TL TR BR BL;

[div=
width: 200px;
height: 200px;
background: red;
border-radius: 5px 10px 20px 50px;][/div]

Output:


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.
  • color specifies the shadow's color.

[div=
width: 200px;
height: 200px;
background: red;
box-shadow: 5px 5px blue;][/div]

Output:




And there we go! We might have to call the cops; that box is looking pretty shady now.


# Featured Properties

margin: value;
border: value;
border-radius: value;
padding: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Outline & Outline-Offset


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.

[div=
width: 200px;
height: 200px;
background: red;
outline: 5px double blue;][/div]


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.

[div=
width: 200px;
height: 200px;
background: red;
outline: 5px double blue;
outline-offset: -10px;
][/div]

Output:



Use a positive value if you want to displace your outline outside of your element.

[div=
width: 200px;
height: 200px;
background: red;
outline: 5px double blue;
outline-offset: 10px;
][/div]

Output:



Note that if you displace the outline, it may overlap your content or other elements (as can be observed in our above example).

Also note that outline does not replace border. They are two separate properties, and you can definitely use both for one element.


# Featured Properties

outline: width style color;
outline-offset: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Box-sizing

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.


Under the hood:

[div=
width: 200px;
height: 200px;
background: red;
color: white;
padding: 20px;
box-sizing: content-box;][/div]


All we need to do is append the declaration. It’s that easy!


# Featured Properties

box-sizing: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Block, Inline, and Inline-Block


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.


# Featured Properties

display: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Display: None, Visibility: Hidden, Opacity: 0


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!

[div=
width: 100px;
height: 100px;
background: red;
display: none;][/div]

Output:


Well, you obviously can't see the output, you silly goose.

Alright, next up is visibility: hidden, which works pretty much the same way. But with one caveat.

[div=
width: 100px;
height: 100px;
background: red;
visibility: hidden;][/div]

Output:



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:


Let's say I want half that opacity.

[div=
width: 100px;
height: 200px;
background: url(https://i.imgur.com/9AsQsuf.png);
background-position: 50% 50%;
background-size: cover;
opacity: 0.5;][/div]

Output:


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!

Output:


And that's all there is to it!


# Featured Properties

display: value;
visibility: value;
opacity: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Background Images

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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/ukyMElT.png);][/div]

Output:


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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/ukyMElT.png);
background-size: cover;][/div]

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).

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/ukyMElT.png);
background-size: 50px 50px;][/div]

Output:



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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/ukyMElT.png);
background-size: contain;][/div]

Output:


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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/ukyMElT.png);
background-size: contain;
background-repeat: no-repeat;][/div]

Output:


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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/MEmPYlZ.png);
background-size: cover;
background-position: 50% 50%;][/div]

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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/MEmPYlZ.png);
background-size: 100px;
background-position: 50px 50px;
background-attachment: fixed;][/div]

Output:


Now try scrolling your page. See what happens?


> Background-blend-mode

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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/MEmPYlZ.png), url(https://i.imgur.com/ukyMElT.png);
background-size: cover;
background-blend-mode: overlay;][/div]

Output:



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;


# Featured Properties

background: url();
background-size: x-axis y-axis;
background-repeat: x-axis y-axis;
background-position: x-axis y-axis;
background-attachment: value;
background-blend-mode: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Gradients

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:

background: linear-gradient(direction, color-stop1, color-stop2);.

Remember you can use more than two colors.

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.

[div=
width: 100px;
height: 100px;
background: linear-gradient(red, yellow);][/div]

Output:


As you can see, the direction defaults to top-bottom. Now, let's try specifying our direction.

[div=
width: 100px;
height: 100px;
background: linear-gradient(to right, red, yellow);][/div]

Output:


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.

[div=
width: 100px;
height: 100px;
background: linear-gradient(45deg, red, yellow);][/div]

Output:



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.

[div=
width: 100px;
height: 100px;
background: radial-gradient(circle at 50% 50%, red, yellow 30px);][/div]

Output:



Okay, cool. Let's try adding a third color into the mix just so you can see how it's done:

[div=
width: 100px;
height: 100px;
background: radial-gradient(circle at 50% 50%, red, yellow, orange 30px);][/div]

Output:



Great! We've coded a pimple into existence.


> Conic Gradient

Next up is conic-gradient. I personally never use this, but who knows, maybe you'll make some cool designs with it.

This is the syntax we will be using:

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree]);

  • Degree specifies how much each color is spread around the center point.

First, let's try using only the colors and degrees.

[div=
width: 100px;
height: 100px;
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);][/div]

Output:



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:

background-image: repeating-linear-gradient();
background-image: repeating-radial-gradient();
background-image: repeating-conic-gradient();

This is what a repeating conic gradient would look like:


[div=
width: 100px;
height: 100px;
background-image: repeating-conic-gradient(red 10%, yellow 20%);][/div]

Output:


You could make some pretty trippy pizzas with this.

And that's about it for gradients!


# Shorthand

background: color image position/size repeat origin attachment


# Featured Properties

background: linear-gradient(direction, color-stop1, color-stop2);
background-image: radial-gradient(shape size at x-position y-position, start-color, ..., last-color size);
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree]);
background-image: repeating-linear-gradient();
background-image: repeating-radial-gradient();
background-image: repeating-conic-gradient();
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Combining Background Images & Gradients

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.

This will be our syntax:

background: gradient-type(), url(), position/size repeat origin attachment;

I typically use linear-gradient and radial-gradient, so let's try to use one of them in our example.

This is our original background, without the radial-gradient:


Now let's try adding our radial-gradient:

[div=
width: 200px;
height: 200px;
background: radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0, rgba(0,0,0,0.99) 60%), url(https://i.imgur.com/KAbrs9F.png) 0 100%/cover;][/div]

Output:



And there we have it! I know the syntax is a lot to look at, so don't be reluctant to refer back to the cheat sheet or these guides when you're stuck.


# Featured Properties

background: gradient-type(), url(), position/size repeat origin attachment;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Overflow

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).

[div=
width: 200px;
height: 200px;
overflow-y: scroll;
background: red;]Lorem[/div]

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.

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.

[div=
width: 200px;
height: 200px;
background: red;
][/div]

Output:



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.

[div=
width: 200px;
height: 200px;
background: red;][div=
width: 110%;
height: inherit;
][/div][/div]

Output:



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.

[div=
width: 200px;
height: 200px;
background: red;][div=
width: 110%;
height: inherit;
overflow-y: scroll;]Lorem[/div][/div]

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.


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%;.

[div=
width: 200px;
height: 200px;
background: red;][div=
width: 110%;
height: inherit;
overflow-y: scroll;
margin-left: 10%;
padding-right: 10%;
]Lorem[/div][/div]

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.


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.

[div=
width: 200px;
height: 200px;
background: red;
overflow: hidden;][div=
width: 110%;
height: inherit;
overflow-y: scroll;
margin-left: 10%;
padding-right: 10%;]Lorem[/div][/div]

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.

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.

[div=
width: 200px;
height: 200px;
background: red;
overflow: hidden;][div=
width: 110%;
height: inherit;
overflow-y: scroll;
margin-left: 5%;
padding-right: 5%;
]Lorem[/div][/div]

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.

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.

[div=width: 200px;
height: 200px;
background: url(https://i.imgur.com/5AdYKKN.jpg);
color: black;
overflow-y: scroll;]Lorem[/div]

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.

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.

[div=width: 200px;
height: 200px;
background: url(https://i.imgur.com/5AdYKKN.jpg);
color: black;
overflow-y: scroll;]Lorem[/div][div=
background: url(https://i.imgur.com/l67sbl5.png) 50% 50%/cover;
width: 17px;
height: 200px;
][/div]

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.

Now, we want these two elements to sit side-by-side. Append display: inline-block to both to do this.

[div=width: 200px;
height: 200px;
background: url(https://i.imgur.com/5AdYKKN.jpg);
color: black;
overflow-y: scroll;
display: inline-block]Lorem[/div][div=
background: url(https://i.imgur.com/l67sbl5.png) 50% 50%/cover;
width: 17px;
height: 200px;
display: inline-block;][/div]

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.

Next, we are going to pull our scrollbar to the left. We will use -17px to do this:

[div=width: 200px;
height: 200px;
background: url(https://i.imgur.com/5AdYKKN.jpg);
color: black;
overflow-y: scroll;
display: inline-block]Lorem[/div][div=
background: url(https://i.imgur.com/l67sbl5.png) 50% 50%/cover;
width: 17px;
height: 200px;
display: inline-block;
left: -17px;][/div]

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.

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.

[div=width: 200px;
height: 200px;
background: url(https://i.imgur.com/5AdYKKN.jpg);
color: black;
overflow-y: scroll;
display: inline-block]Lorem[/div][div=
background: url(https://i.imgur.com/l67sbl5.png) 50% 50%/cover;
width: 17px;
height: 200px;
display: inline-block;
left: -17px;
pointer-events: none;][/div]

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.

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.


# Featured Properties

overflow: value;
overflow-x: value;
overflow-y: value;
display: value;
left: value;
pointer-events: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Float & Clear

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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/KAbrs9F.png) 0% 100%/cover;
float: left;][/div]Lorem


Let's also add some dummy text after our div box.

We can add a margin to the right of our image so that it isn't sticking too close to our text.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/KAbrs9F.png) 0% 100%/cover;
float: left;
margin-right: 5px;][/div]Lorem

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.

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.

[div=
width: 100px;
height: 100px;
background: url(https://i.imgur.com/KAbrs9F.png) 0% 100%/cover;
float: left;][/div][div=
clear: left;]Lorem[/div]

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.


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.


# Featured Properties

float: value;
clear: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Position, Top, Right, Bottom, and Left

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.

Let's create an element with a red background.

[div=
width: 100px;
height: 100px;
background: red;
][/div]

Output:


Now, let's try moving our element to the left.

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.

[div=
width: 100px;
height: 100px;
background: red;
left: -20px;][/div]

Output:


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:



We can use top and bottom in the same way.


# Featured Properties

position: value;
top: value;
right: value;
bottom: value;
left: value;
 
Last edited:

Ardent

the storm after the calm
Original poster
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. No Preferences
Genres
80s, Action-Adventure, Alternative History, Angst, Apocalyptic, Comedy, Coming of Age, Cyberpunk, Dark Comedy, Drama, Dystopian, Fantasy, Futuristic, Grimdark, Historical, Horror, LGBTQ+, Modern, Mystery, Noir, Political Intrigue, Post Apocalyptic, Romance, Science Fiction, Space Opera, Steampunk, Survival, Thriller, Tragedy, Urban Fantasy, Wuxia

Z-Index

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.

[div=
width: 100px;
height: 100px;
background: blue;][/div][div=
width: 100px;
height: 100px;
background: red;
top: -20px;
right: -20px;
][/div][div=
width: 100px;
height: 100px;
background: green;
top: -40px;
right: -40px;
][/div]

Output:


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:

[div=
width: 100px;
height: 100px;
background: blue;
z-index: 2;][/div][div=
width: 100px;
height: 100px;
background: red;
top: -20px;
right: -20px;
z-index: 1;][/div][div=
width: 100px;
height: 100px;
background: green;
top: -40px;
right: -40px;][/div]

Output:


Z-index is pretty powerful. We can do a lot of fancy stuff with this!


# Featured Properties

top: value;
right: value;
z-index: value;
 
Last edited: