RESOURCE TUTORIAL CODING HELL | A Monstrous Guide

Status
Not open for further replies.

Ardent

your blood on my teeth
Original poster
FOLKLORE MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
  4. Slow As Molasses
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. No Preferences
Genres
Horror, Dark Fantasy, Modern
NAVIGATION


EXTERNAL RESOURCES


CHANGELOG

28-06-23 Tabs update in light of forced height/overflow properties. View here or here.
09-05-23 "Transform" properties were in dire need of an update after the new properties were released sometime last year
04-05-23 Reformatted navigation; removed box-sizing guide and vmin & vmax because who even uses those
04-05-23 Added a section on variables
04-05-23 Added new animation: rippleAnimation
 
Last edited:

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:

Translate, Scale, Rotate, Skew

In this module, we'll be taking a look at all the things we can do with the translate, scale, rotate, and transform: skew() properties.


> Translate

First is translate, which is another way of moving an element along the x, y and even z-axis. Some argue this is better than position, but I digress. Let's append translate: x y z; into our code. In my example, I'll only be manipulating the x and y axes.

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

Output:




> Scale

Next up is scale, which allows us to scale, stretch, invert, and flip our elements.

To stretch our element, let's set the y-axis with a value of 1.5. And yes, we can simply use numbers as our values for this one. Just remember that the default value is 1. That means we'll be setting our x-axis with the default 1 as we want our width to remain unchanged.

Our syntax will look like this: scale: x y; or scale: x y z if we are manipulating the z-axis as well, allowing for a more three-dimensional look.

[div=
width: 100px;
height: 100px;
background: red;
color: white;
scale: 1 1.5;]Text[/div]

Output:

Text


Now let's try to invert our element along the y-axis. To achieve this, we'll be using the value -1 for our y-axis, while our x-axis will retain the default value of 1.
[div=
width: 100px;
height: 100px;
background: red;
color: white;
scale: 1 -1;]Test[/div]

Output:

Text


Now let's try to flip our element along the x-axis. Once again, we'll be using a -1 value, but this time it will be for our x-axis. Our y-axis will retain the default value of 1.

[div=
width: 100px;
height: 100px;
background: red;
color: white;
scale: -1 1;]Text[/div]

Output:

Text


Naturally, we can also flip our element on both the x and y axes at the same time.

For example:

[div=
width: 100px;
height: 100px;
background: red;
color: white;
scale: -1 -1;]Text[/div]


This can be shortened to simply scale: -1;. The value is automatically applied to both the x and y axes.

Output:

Text



> Rotate

We can also rotate our element using rotate: deg; This time, we'll be using degrees as our value.

In the following example, I'll be rotating my element 10 degrees.

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

Output:




> Skew

Finally, we have transform: skew(x,y); which will distort our element. Once again, we'll be using degrees to define our values.

[div=
width: 100px;
height: 100px;
background: red;
transform: skew(5deg,5deg);]Test[/div]

Output:

Test



# Featured Properties

translate: x y z;
scale: x y z;
rotate: deg;
transform: skew(xdeg,ydeg);
 
Last edited:

Animation

I emerge from the abyss that is the site's code to present to you a cobbled up list of the various animations on Iwaku.

You've probably seen these animations at work. Whenever you save a thread after editing it, for example, an animation plays as the reply box closes. That's where we're getting our animations from. That unfortunately means we don't have a lot of variety. But it's better to have something rather than nothing at all!

Here is a list of currently known animations. This will be updated as I find more of them out in the wild.











To use these animations, we must append the following syntax to our target element:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • name tells the browser which animation to use for the target element
  • duration which can be specified in 's' or seconds, defines the duration of the animation
  • timing-function specifies the speed of the animation, whether it be the same speed all throughout (linear), a slow start (ease-in), a slow end (ease-out), a slow start and a slow end (ease-in-out), slow-fast-slow (ease), etc.
  • delay which can be specified in 's' or seconds, defines how long of a wait there should be before the animation begins
  • iteration-count which can be specified in numbers (1,2,3..) or infinite, defines how many times the animation should be played
  • direction specifies whether the animation is played normally (normal), in reverse (reverse), alternating between normal and reverse (alternate), or alternating between reverse and normal (alternate-reverse)
  • fill-mode specifies the style of the element when the animation is not playing. forwards will retain the the last keyframe, backwards will retain the first keyframe, while both will extend the animation properties forwards and backwards.
  • play-state specifies whether the animation is playing or paused

Let's use the fb_mpn_fade_out animation for our example. Specify the name of the animation you'd like to use and the duration you'd like that animation to play. I'm going to input 2s (2 seconds) for mine:

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s;][/div]

Next, let's add the timing-function. I'm going to be using linear. Nothing too fancy.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear;][/div]

Next, we can specify a delay for our animation. I'm going to omit that since I don't want a delay.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear;][/div]

Next, we can specify our iteration-count, or how many times we'd like our animation to play. I'm going to set it to infinite, but it is possible to set the value to a specific number.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 5;][/div]

Finally, we can specify the direction of our element. I'm going to say reverse for mine.

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 5 reverse;][/div]

Output:


Now let's specify our fill-mode:

[div=
width: 100px;
height: 100px;
background: red;
animation: fb_mpn_fade_out 2s linear 5 reverse forwards;][/div]

Output:


Wait until the animation finishes playing 5 times and compare it with our previous output. Notice anything different with the positioning? That's the effect of fill-mode.

And that's about it! I'm going to omit play-state since I don't want to pause our animation, for obvious reasons.


# Featured Properties

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
 
Last edited:

Cursors

When you hover over the element below, you may notice that your cursor changes:



This is fairly simple to do. Just use the the cursor: value; syntax, and input the name of the desired cursor. In my example below, I'll be using crosshair.

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


You have the option to choose between many different cursors. Here is a list.


> Custom Cursors

You can also use an image as your cursor. However, it won't work if your image is too large. I suggest that you make your image 50x50 or smaller for it to work. This is the syntax:

cursor: url(), auto;

[div=
width: 100px;
height: 100px;
background: red;
cursor: url(https://i.imgur.com/QibQ6y8.png), auto;][/div]

Output:




# Featured Properties

cursor: ();
cursor: url(), auto;
 
Last edited:
  • Like
Reactions: zenith

FontAwesome Icons

So, let's say you want to add some icons to your code, just like this:



First, choose an icon you'd like from this list of free icons. Enclose it in [fa][/fa]:

[fa]fa-comment[/fa]


Output:


You can resize the icon using font-size: value;

[div=
font-size: 2.5em;][fa]fa-comment[/fa][/div]

Output:


You can also change the color. It goes like this:

[div=
font-size: 2.5em;
color: red;][fa]fa-comment[/fa][/div]

Output:


That's it!


# Featured Properties

[fa][/fa]
font-size: value;
 
Last edited:
  • Like
Reactions: zenith

Columns


Columns are currently underused, which is a shame because they're pretty powerful. With this, you can pretty much achieve a responsive layout without having to use flexbox at all. What's more, they're relatively easy to make!

First, let me show you what this property does in its basic form. Let's say you have a huge amount of text that you want to separate into three columns. All you have to do is enclose your text in [div][/div] tags, and define columns: 3 in your opening div, like so:

[div=
columns: 3;
]Lorem[/div]


That's not quite enough to make it responsive though. So why don't we specify a minimum width? In this example, I'll be using a min-width of 100px. We can simply input our minimum width in the same declaration as our column number:

[div=
columns: 3 100px;
]Lorem[/div]


Output:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

Try making your browser smaller. Watch these three columns merge once they hit their minimum width.

But wait, we're not done yet! You can also style these columns. Say you want to add a border between them. This can be done by appending the following syntax:

column-rule: width style color;

And yes, these are the same styling values that you would use for regular borders. Check the Cheat Sheet for more styling options (Box > Border).

Now, I'm thinking I want a red border between my columns. I'm going to append a width of 4 pixels, but you can use other lengths in your code.

[div=
columns: 3 100px;
column-rule: 4px double red;
]Lorem[/div]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

I don't like how close they are to each other, but luckily I can easily solve this issue with column-gap: value. We can use lengths as the value. In my example, I'm going to go with 40 pixels so you can see the distinction.

[div=
columns: 3 100px;
column-rule: 4px double red;
column-gap: 40px;
]Lorem[/div]

Output:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non cursus metus. In quis est vitae turpis interdum tempus. Suspendisse aliquam commodo purus sit amet maximus. Morbi lobortis lectus quis consequat elementum. Vivamus ultricies nibh vel lorem malesuada condimentum. Sed id ultricies erat, et ornare lorem. Suspendisse at felis non metus elementum feugiat at eu leo. Duis lacus mauris, pretium sit amet nisi malesuada, placerat volutpat sapien. Vivamus a tempor purus. Pellentesque vehicula faucibus tortor, sit amet placerat dolor tempor eget. Vivamus in rutrum dolor, ultricies dignissim enim. Maecenas auctor mattis auctor. Etiam tempus tempor enim, non euismod neque convallis eget. Integer sagittis erat urna, vitae cursus lectus accumsan non. Nam ultricies lectus turpis, quis eleifend nisi gravida at.

This may look a little plain at the moment, but columns are actually quite versatile! With the implementation of color, padding, and background, you can make it look spiffy with little effort.

So, let's say you want to make two adjacent boxes, with the first box holding your character picture, and the other box holding your content. Let's add our columns:

[div=
columns: 250px 2;
][/div]

I'm added a min-width of 250px as I find that it's best for mobile responsiveness.

Next, let's input the actual items that will be going into our two columns: namely, our character image box and content box. We're going to need to specify a height for each of them, and we'll have to nest them inside our existing div tags.

[div=
columns: 250px 2;][div=
/* Character Image */
height: 400px;
][/div][div=
/* Content */
height: 400px;
][/div][/div]

Okay, let's input a background for each of our boxes. In the first box, I'll be using the character image as the background, and in the second box, I'll be using a white background.

[div=
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(
https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
][/div][/div]

Output:


I don't like how it takes up the whole post container, so let's go back to our first div tag, in which we specified the width for our columns. Let's input a width and add margin: auto to center our columns.

[div=
width: 700px;
margin: auto;

columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;][/div][/div]

Output:


Now let's add some text and give it a black font color

[div=
width: 700px;
margin: auto;
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
color: black;
]This is content[/div][/div]

Output:

This is content

Add padding so that our text isn't too close to the edge. Let's also input overflow-y, so we can scroll through our content.

[div=
width: 700px;
margin: auto;
columns: 250px 2;][div=
/* Character Image */
height: 400px;
background: url(https://i.imgur.com/LTnVkvn.png) 50% 50%/cover;][/div][div=
/* Content */
height: 400px;
background: white;
color: black;
padding: 20px;
overflow-y: scroll;
]This is content[/div][/div]

Output:

This is content

And that's it! Try resizing your browser.

As always, you can style your columns differently. Feel free to play around with all these codes.


# Featured Properties

columns: column-count min-width;
column-gap: value;
column-rule: width style color;
 
Last edited:

Flexbox

There are many ways to style a flexbox, but I'll keep this one simple so that it'll be easier to follow.

First, I want to illustrate what flexbox actually does. While it is an alternative to displays, floats, and other layout properties, it is a lot better as it makes our design responsive—that is to say, mobile-friendly. Check out these two examples and see how they respond to your browser as you resize it:

With Inline-Block and %:


With Flexbox:


As you can see, flexbox enables us to arrange items easily, and once our viewport shrinks, the second box moves to the next line. Now, the latter isn't anything new and is something you could easily achieve with columns. Personally though? I prefer flexbox as it allows for better control and styling. Now, if you're going for something simple, columns may be your best bet.

So how do we actually make a flexbox? We're going to need two different components: a container and its items. Let's get started with creating our container.

First, we're going to input display: flex; You can add a width for your container, and margin: auto; to center it. However, width and margin are optional. It depends on what design you're going for.

[div=
width: 600px;
margin: auto;
display: flex;
][/div]

Next, let's nest our items. In this example, I'll be using two items. However, you can use as few or as many as you'd like.

Let's give our first nested item a red background and 100px height so we can actually see what we're working with. We're going to do the same for its sibling, except we're going to give that one a blue background.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
][/div][div=
background: blue;
height: 100px;
][/div][/div]

Let's add flex: 1 to our red box and flex: 2 to our blue box.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
flex: 1;
][/div][div=
background: blue;
height: 100px;
flex: 2;
][/div][/div]

flex: 2; is basically making our blue box grow 2x faster than our red box, making it larger. If you make this value 3, it will be 3x as fast. And so on and so forth. If you use a value of 1 for both boxes, however, they will be the same size.

Next, we're going to append min-width: 230px to each of our flexboxes. This stands for minimum width.

[div=
width: 600px;
margin: auto;
display: flex;][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;
][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;
][/div][/div]

Output:


Alright. Personally, I don't like how these boxes are sticking too close together, so let's add a gap, shall we? How about a 10px gap? Let's add it to our container.

[div=
width: 600px;
margin: auto;
display: flex;
gap: 10px;
][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;][/div][/div]

Output:


If you try resizing your browser now, you'll notice that the second box doesn't go to the next line. Not yet, anyway. We need one last thing to make this perfectly mobile-friendly, and that's flex-wrap: wrap;

Let's append it to our container once again.

[div=
width: 600px;
margin: auto;
display: flex;
gap: 10px;
flex-wrap: wrap;
][div=
background: red;
height: 100px;
flex: 1;
min-width: 230px;][/div][div=
background: blue;
height: 100px;
flex: 2;
min-width: 230px;][/div][/div]

Output:


flex-wrap is working with our minimum width. As soon as the screen becomes too small to contain our flexboxes at their minimum width, the second box moves to the next line. I find that a 230px-250px of minimum width or each flexbox is best for mobile-viewing.

Now, we also have the option of using flex-wrap: wrap-reverse instead of flex-wrap: wrap. By using this, we are making our red box move to the next line instead.


Try making your browser smaller!

Now, if that's all you wanted to know, you can stop reading here. It should be enough to help you create responsive designs. However, if you'd like to know more about flexboxes and what we can do with them, read on.


> Grow, Shrink, Basis

Earlier, I refrained from dissecting flex: value as there simply wasn't enough space to discuss it in detail. It definitely warrants its own section as there is a lot to say about them, but don't be overwhelmed. They're easy to understand once you get the hang of them. As always, it just takes practice.

The syntax that I used in the previous article is actually a shorthand, flex: grow shrink basis; Once again, I will be using visual aid to demonstrate how it is used. However, do bear in mind this will make a lot more sense if you view it on a desktop, where you can resize your browser to see the effects taking place.

Alright, with that out of the way, let's begin.

flex-basis defines the starting value of our items. It is the base width of our flexboxes. You can use lengths, like px, to specify its value.

flex-basis: 100px;
flex-basis: 100px;
flex-basis: 100px;

See that extra space on the right?

flex-grow, makes the element grow according to the container size or window size. It defines how much of the extra space should be distributed among the items. We use numbers to specify its value.

If we set it to 0 (the default value), none of the items will take up the extra space. They will remain at their basis, which is 100px in our example.

So, instead, let's try setting our first item to flex-grow: 1; Watch what happens:

flex-grow: 1;
flex-grow: 0;
flex-grow: 0;

As you can see, it took up all the extra space for itself. Make your browser smaller. Now, slowly drag to make it bigger. See how the red box grows? That's flex-grow doing the work.

Alright, let's set the second item to 2 and see what happens.

flex-grow: 1;
flex-grow: 2;
flex-grow: 0;

Try resizing your browser again. As you can see, the blue box grows twice as fast as the red box.

This time, let's try giving all the boxes a value of 1.

flex-grow: 1;
flex-grow: 1;
flex-grow: 1;

If they all have a value of 1, the space will be distributed equally among all the items.

flex-shrink, on the other hand, makes the items shrink according to the window size. I'm going to change the basis to 300px real quick just so I can better demonstrate to you what it does.

The default value for flex-shrink is 1.

flex-shrink: 1
flex-shrink: 1
flex-shrink: 1

Make your browser smaller. You can see that at 1, they will all shrink at an equal rate and can even become smaller than our basis of 300px.

Let's try setting our red box to a shrink value of 0.

flex-shrink: 0
flex-shrink: 1
flex-shrink: 1

If we set an item to 0, it will not shrink. However, the other items still shrink in our example as they still have the same shrink value of 1.

Let's see what happens if we set our green box to 5.

flex-shrink: 0
flex-shrink: 1
flex-shrink: 5


If we set our third item to 5, it will shrink five times faster than our second item, which has a value of 1.

Now, all these three can simply be specified with a shorthand, which is as follows:

flex: grow shrink basis;


> Flex Item Order

We can also change the order that our items present themselves without restructuring our code. To do this, we simply append the order property and input numbers.

A
B
C

Let's try to move these letters around.

[div=
display: flex;
height: 50px;
color: white;][div=
flex-grow: 1;
order: 2;

background: red;]A[/div][div=
flex-grow: 1;
order: 3;

background: blue;]B[/div][div=
flex-grow: 1;
order: 1;

background: green;]C[/div][/div]

Output:

A
B
C

Pretty easy, right?


> Main Axis & Cross Axis + Justify-Content

An important component of flexbox are the axes, namely the main axis and the cross axis. By default, the main axis would be referring to the row, whereas the cross axis would be referring to the column. However, it's not that straightforward, which is probably where a lot of the confusion regarding flexboxes come from.

By default, our boxes would be positioned along a row, like so:

A
B
C

Now, if we want to change where our items are situated within that row, we use justify-content by default. There are many values associated with this property, and they are as follows:

  • flex-start - positions items at the beginning of the container
  • flex-end - positions items at the end of the container
  • center - positions items at the center of the container
  • baseline - positions items at the baseline of the container
  • space-around - items are evenly distributed along the line, with spaces around them
  • space-between - items are evenly distributed along the line, with spaces between them
  • space-evenly - items are distributed so that the spacing before, between, and after two adjacent items is the same

We've already seen flex-start in action, as it is the default, so let's see what flex-end does.

[div=
height: 50px;
display: flex;
justify-content: flex-end;

border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C


And center:
A
B
C


BUT--and this is where it gets confusing--justify-content does not always position items along the x-axis, no sir! It goes hand-in-hand with flex-direction. Now, if you omit flex-direction from your code, it will default to row, thus enabling justify-content to align items in a row.

However, if you specify flex-direction: column, that will flip things around, meaning justify-content does not align items in a row anymore! It aligns things in a column. Capeesh?

Yeah, I know, it's a lot. But a simpler way to remember this is that they both always mirror each other.

TL;DR
  • If flex-direction is default row, justify-content will align items along a row.
  • If flex-direction is column, justify-content will align items along a column.

Okay, so let's try appending flex-direction: column into our code.

I'll be changing some stuff around, so you can better see how things are working.

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Alright, what do you think will happen if I append justify-content: center; Will it align our items horizontally or vertically?

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Yup, it aligns our items along a column to mirror justify-content: column!

But now you must be wondering: well, there must be another property related to this right? Surely this guy has a twin that aligns our items in the opposite arrangement?

You're right. This is where align-items comes in.


> Align-Items

Unlike justify-content which aligns items horizontally by default, align-items aligns our items vertically by default.

When the flex-direction is flipped to column, however, align-items begins affecting horizontal alignment.

Let's check our first example. For now, I'll be using the default direction, which is row.
A
B
C

The default value for align-items is stretch, meaning the items stretch to fit the container along the main axis. However, we can use some of the same values as the ones we used for justify-content. To refresh your memory, they are as follows:
  • flex-start - positions items at the beginning of the container
  • flex-end - positions items at the end of the container
  • center - positions items at the center of the container
  • baseline - positions items at the baseline of the container

To use any of these values, simply append them after align-items: Don't forget to put them in the div holding the container!

This is how flex-start would look like:

[div=
height: 150px;
border: 1px solid yellow;
display: flex;
color: white;
align-items: flex-start;
][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: red;]A[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: blue;]B[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: green;]C[/div][/div]

For the purposes of this demonstration, I will be adding a height of 150px for our container, as well as a yellow border so that you see its dimensions. I allocated 33.33% height and 100px basis for each of our items to make them smaller, enabling you to see them moving around in the box.

Output:

A
B
C

Now, what if we changed the alignment to flex-end?

Output:

A
B
C

And center?

Output:

A
B
C

Now, let's try to change our flex-direction. Once again, I'll be changing some stuff around (namely the flex property) so you can better see how things are working.

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

So, like I said before, by using flex-direction: column, we have flipped our axes around. Now, align-items will now control the cross axis, which is now the x-axis:

[div=
height: 300px;
border: 1px solid yellow;
display: flex;
color: white;
flex-direction: column;
align-items: flex-start;
][div=
flex: 0 1 50px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 50px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 50px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Flex-end will look like this:

A
B
C

Center:

A
B
C



> Individual Item Alignment

So you want to align items individually? One of the properties we can use is align-self. Instead of putting this in our div container, we place it in the div defining our items. Like so:

[div=
height: 150px;
border: 1px solid yellow;
display: flex;
color: white;][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: red;
align-self: flex-start;
]align-self: flex-start;[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: blue;
align-self: center;
]align-self: center;[/div][div=
flex-basis: 100px;
padding: 10px;
height: 33.33%;
background: green;
align-self: flex-end;
]align-self: flex-end;[/div][/div]

Output:

align-self: flex-start;
align-self: center;
align-self: flex-end;


On the other hand, we can't really align items individually with justify-content. However, we can use margin to aid us with this.

Let's say we want C to go all the way to the right. By using margin-left: auto we will be pushing C from the left:

[div=
height: 50px;
display: flex;
border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;
margin-left: auto;
]C[/div][/div]

Output:

A
B
C

Now, if we append the same declaration to B, look what happens:

[div=
height: 50px;
display: flex;
border: 1px solid yellow;
color: white;][div=
flex: 0 1 100px;
padding: 10px;
background: red;]A[/div][div=
flex: 0 1 100px;
padding: 10px;
background: blue;
margin-left: auto;
]B[/div][div=
flex: 0 1 100px;
padding: 10px;
background: green;]C[/div][/div]

Output:

A
B
C

Pretty cool, right?


> Centering Items

Now that we know how to manipulate the main axis and the cross axis, let's talk about centering items in our flex container.

Let's say you want to put some text in the middle.

First, let's make our base. As usual, it's width, height, and a red background.

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

Output:


Let's input our text next. We'll make the color white so we can see it clearly.

We will center our text later.

[div=
width: 200px;
height: 200px;
background: red;
color: white;
]Hello world.[/div]

Output:

Hello world.

Now for the fun part. Once again, we'll be using display: flex

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
]Hello world.[/div]

Output:

Hello world.

Then, use justify-content: center to center our item horizontally. Append align-items: center to center items vertically.

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
]Hello world.[/div]

Output:

Hello world.

You can also center other elements using this process!

[div=
width: 200px;
height: 200px;
background: red;
color: white;
display: flex;
justify-content: center;
align-items: center;
][div=
background: blue;
width: 100px;
height: 100px;
border-radius: 100%;][/div][/div]

Output:


And there you have it. Flex makes everything simple for us.

Now that you know how to flexbox, go and flex your skills!


# Featured Properties

display: flex;
flex: grow shrink basis;
flex-grow: value;
flex-shrink: value;
flex-basis: value;
order: value;
min-width: value;
justify-content: value;
align-items: value;
align-self: value;
margin-left: value;
margin-right: value;
 
Last edited:
  • Useful
Reactions: Loveless and zenith

Variables

CSS Variables allow you to declare custom properties. This is especially useful when you have very complex code. Let's say you have a palette of five colors. Ordinarily, if you'd like to change your entire palette, you'd have to go line by line and swap out the values. Not only is this a massive headache, it's a waste of time.

Variables streamline this process. They allow you to set your values in one place and name them accordingly. These custom properties can then be referenced throughout your code.

This is how it would look like in practice:

Let's say I want to use three colors: red, green, and blue. To declare a custom property, open up a div tag and type a double hyphen (--) followed by the name you'd like your custom property to have. In my case, I'm going to use color1, color2, and color3 respectively.

[div=
--color1: red;
--color2: green;
--color3: blue;
][/div]


All future children of this div tag should be able to inherit the values you have set. All you have to do is reference the custom property name where the value would normally go.

To reference a custom property, use the following syntax: var(--propertyName);

[div=
--color1: red;
--color2: green;
--color3: blue;][div=
color: var(--color1);
]This is color1.[/div][/div]


Output:

This color1.


Let's add one more for demonstration's sake.

[div=
--color1: red;
--color2: green;
--color3: blue;][div=
color: var(--color1);]This is color1.[/div][div=
color: var(--color1);
]This is color1 again.[/div][/div]


Output:

This is color1.
This is color1 again.


Say I suddenly changed my mind and want to swap out red for purple. Instead of changing two lines of code, I'd only have to change one!

[div=
--color1: purple;

--color2: green;
--color3: blue;][div=
color: var(--color1);]This is color1.[/div][div=
color: var(--color1);]This is color1 again.[/div][/div]


Output:

This is color1.
This is color1 again.


As I said before, this feature truly shines once your code starts to get more and more complex. It is also very useful for when you want to share your code with others. This will enable them to conveniently tweak your code according to their preferences.

You can also store pretty much any value you'd like, whether it is a color, a unit, an image, and so on and so forth.
 
Last edited:

Mp3 Player

Iwaku has its own shiny audio player. Unfortunately, it only plays mp3 files sourced from the internet, which limits our options. YouTube, on the other hand, provides us with a variety of music to choose from. Fortunately, we can embed YouTube videos and fiddle around with some coding to create a fully functional mp3 player of our own.

What we need to do, first and foremost, is link our music player. Once again, I'll do it step-by-step. However, I won't be able to show you the results of each step like I've done previously, as Iwaku only allows a limited number of media to be shown in a post.

Let's say I want to use this song for my music player. Copy the content ID, which can be found after the equals (=) sign in the link.

https://www.youtube.com/watch?v=tVCUAXOBF7w


Input the content ID between the [MEDIA=youtube][/MEDIA] tags. It should look like this:

[MEDIA=youtube]tVCUAXOBF7w[/MEDIA]


Now, let's specify a width and height for our music player. How does 30x30 sound?

[div=
width: 30px;
height: 30px;
][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div]


Let's add something to cover it up, like a play and pause button. We'll be using FontAwesome icons for this.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][FA]fa-play-circle[/FA]


Let's put this in a 30x30 container, and let's make our icon bigger and center it while we're at it.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
][FA]fa-play-circle[/FA][/div]


Now we're going to pull our button up so that it sits above the video player. Since our container is 30px, -30px should do it. But let's add an allowance of -6 as well since the media player itself is rectangular.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -36px;
][FA]fa-play-circle[/FA][/div]


Okay, but now we can't click our button. This is easily solved by pointer-events: none; which allows us to click through the element.

[div=
width: 30px;
height: 30px;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -36px;
pointer-events: none;
][FA]fa-play-circle[/FA][/div]


Now let's lower the opacity of our media player. 0.01 ought to do it. We should also remove that space it leaves at the bottom with height: 30px and overflow: none;

[div=
height: 30px;
overflow: none;
][div=
width: 30px;
height: 30px;
opacity: 0.01;
][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -36px;
pointer-events: none;][FA]fa-play-circle[/FA][/div][/div]

Output:



Alternatively, we could add a background for the button. I'm going to use white, so we'll have to add a font color too so that we can actually see our button.

[div=
height: 30px;
overflow: none;][div=
width: 30px;
height: 30px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 30px;
height: 30px;
font-size: 20px;
text-align: center;
top: -36px;
pointer-events: none;
background: white;
color: black;
][FA]fa-play-circle[/FA][/div][/div]

Output:




> Mp3 Player (Bar)

So that one is a popular design you'll see floating around. However, this next one is what I personally like to use.

We'll be using the latest code we did for our previous one, except we'll be removing text-align and we'll be changing the width to 300px.

This time, we'll be creating a 50px width container for our media player.

[div=
height: 30px;
overflow: none;][div=
width: 50px;

opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;

height: 30px;
background: #34987c;][/div][/div]

We do much of the same thing we did last time, except this time we'll be using a width of 300px for our second div, as well as a teal background to match Iwaku.

Next, we will be inputting the display: flex; so that we can better control the various elements we'll be placing in our box.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;
][/div][/div]

Now, we can go ahead and add our icons. This time I'll be adding a pause icon as we have more space to work with. We'll be coloring it white and adding a font-size of 20px.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;
][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][/div][/div]

Next to the icons, we'll be opening another div where we'll be placing our song name. Input a font-size and a color.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
font-size: 12px;
color: white;
]Pixies - Hey[/div][/div][/div]

Let's add some padding to the left and right sides of our icons so that they aren't sticking too close to the edge. Let's add padding to the div holding our text too.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;][div=
font-size: 20px;
color: white;
padding: 0 5px;
][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
padding: 5px;

font-size: 12px;
color: white;]Pixies - Hey[/div][/div][/div]

Let's move the element holding our play button -28 pixels from the top. Add pointer-events so that we can click through the element.

[div=
height: 30px;
overflow: none;][div=
width: 50px;
opacity: 0.01;][MEDIA=youtube]tVCUAXOBF7w[/MEDIA][/div][div=
width: 300px;
height: 30px;
background: #34987c;
display: flex;
top: -28px;
pointer-events: none;
][div=
font-size: 20px;
color: white;
padding: 0 5px;][FA]fa-play-circle[/FA][FA]fa-pause-circle[/FA][/div][div=
padding: 5px;
font-size: 12px;
color: white;]Pixies - Hey[/div][/div][/div]

Output:

Pixies - Hey

Feel free to play around with the width and the height.


# Featured Properties

pointer-events: none;
 
Last edited:
  • Useful
  • Like
Reactions: unanun and zenith

Custom Accordions

Want to use fully customizable accordions? Do you hate the padding and border that's built into the code? With a few easy steps, we can finally be rid of them.

First, let's introduce the accordion tag into our code and specify the width.

[accordion=500]{slide}{/slide}[/accordion]

Output:

Tab 1

Since the slide tag is a slave tag, we can actually use divs inside the brackets. Let's open a div inside the slide and add some background, color, and text. I'll go ahead and add padding and text-align so that it looks even better.

[accordion=500]{slide=[div=
background: red;
padding: 20px;
text-align: center;
color: white;
]This do be the title[/div]}{/slide}[/accordion]

Output:

This do be the title

As you can see, there's whitespace around the background. To remove this, we first apply a max-width of 500px !important. We need !important to override the element's set max-width of 100%.

We then apply a margin of -10px to cut away at the, well, margin.

[accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;

background: red;
padding: 20px;
text-align: center;
color: white;]This do be the title[/div]}{/slide}[/accordion]

Output:

This do be the title

Let's do the same thing for the area inside of our slide. AKA our content area.

[accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
]Lorem[/div]{/slide}[/accordion]

Output:

This do be the title
Lorem


There's still that persistent border, so let's enclose the entire accordion in a div tag with the visibility property. Set this value to hidden.

Obviously, we don't want everything in our accordion to be hidden, just the border. So we're going to override the hidden visibility with visibility: visible to the places we want to be seen.

[div=
visibility: hidden;
][accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;
]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;
]Lorem[/div]{/slide}[/accordion][/div]

Output:

This do be the title
Lorem

Copy-paste the slides to make more of them in one accordion.

[div=
visibility: hidden;][accordion=500]{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;
]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;
]Lorem[/div]{/slide}[/accordion][/div]

Output:

This do be the title
Lorem
This do be the title
Lorem

You can add open after the equals sign of a slide so that it defaults to open.

[div=
visibility: hidden;][accordion=500]{slide=open|[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}{slide=[div=
max-width: 500px !important;
margin: -10px;
background: red;
padding: 20px;
text-align: center;
color: white;
visibility: visible;]This do be the title[/div]}[div=
max-width: 500px !important;
margin: -10px;
padding: 20px;
background: white;
color: black;
visibility: visible;]Lorem[/div]{/slide}[/accordion][/div]


Output:

This do be the title
Lorem
This do be the title
Lorem



# Featured Properties

max-width: value;
!important
 
Last edited:
  • Like
Reactions: zenith

Custom Sliders

Next on the menu is sliders!

Typically, sliders (or carousels) would look like this:

[slider=500x300] <---500x300 are the dimensions I'm using, but you can change it.
{slide}{/slide}
{slide}{/slide}
[/slider]

Output:



Since the arrows are very difficult to see otherwise, I added a temporary backdrop.

What we're going to do in this tutorial is remove the arrows and the carousel controls at the bottom.

Each arrow is 47px in width, so let's remove 94px from our carousel's width. In my case, that's 500 - 94 = 406.

We must then remove 25px from our carousel's height. That's 300 - 25 = 275 in my case.

Now, we open a div tag surrounding our carousel and input the results as its width and height. We're also going to input overflow: hidden so as to hide any excess (aka the arrows and dots)

[div=
overflow: hidden;
width: 406px;
height: 275px;
][slider=500x300]{slide}{/slide}{slide}{/slide}[/slider][/div]

Output:



Alright, we need to do one more thing to hide the arrows. Nest another div inside of the div. This time, let's input a max-width of 500px. Add !important so that it overrides the element's default max-width.

We're also going to specify our left and right margins. margin: 0 -47px should do it. Again 47 because our carousel arrows are 47px in width.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;
][slider=500x300]
{slide}{/slide}{slide}{/slide}[/slider][/div][/div]

Output:



Now, inside our slide, let's input our 406x275 dimensions yet again. I'm going to add a background color for good measure.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;][slider=500x300]
{slide}[div=
width: 406px;
height: 275px;
background: red;
][/div]{/slide}{slide}{/slide}[/slider][/div][/div]

Output:


Repeat the slide codes where needed.

[div=
overflow: hidden;
width: 406px;
height: 275px;][div=
margin: 0 -47px;
max-width: 500px !important;][slider=500x300]
{slide}[div=
width: 406px;
height: 275px;
background: red;][/div]{/slide}{slide}[div=
width: 406px;
height: 275px;
background: blue;
][/div]{/slide}[/slider][/div][/div]

Output:


And done!


# Featured Properties

max-width: value;
!important
 
Last edited:

Custom Tabs

Jump to 28-06-23 update.

The last thing we've got is tabs. The fanciest and, quite possibly, hardest thing on this guide.

Let's begin by taking a look at what the tabs are like by default. I'm going to set a width of 730px, but you can tweak this to a size you'd much prefer.

[TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS]

Note: If this is your first time ever seeing tabs, I suggest that you play around with it first in your own testing thread. You can use the code above if you like. Just remember that {slide}{/slide} is akin to a page, while the {tab}{/tab} is the link to that page.

Output:


Yeah, they don't look like much right now, but they'll start looking interesting real soon. As you can see, we can link between slides using {tab}{/tab}. This will be very handy later.

Anyway, let's begin by cutting away the navigation bar. We don't need it, since we'll be making our own!

To do this, we're going to need to enclose our tabs in a pair of div tags. We will set the same width for them, and margin: auto to center. We're also going to specify overflow: hidden so that anything that spills out will get cut out of view.

I'm also going to add a temporary background so we can see exactly what we're working with.


[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;
][TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS][/div]

Output:


Let's nest another div inside those tags. In it, we're going to specify margin-top: -40px so that we can pull it up until it can't be seen, so essentially cutting away our navigation bar from view.


[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;][TABS=730]
{slide=1}{tab=2}This is link to tab 2{/tab}{/slide}
{slide=2}{/slide}
{slide=3}{/slide}
{slide=4}{/slide}
[/TABS][/div][/div]

Output:


Remember the lesson on flexboxes? Yeah, we're going to use them now. If you haven't seen it, I suggest reading it first before proceeding.

I'm thinking let's do a navigation bar at the top, and two columns below it where we can put our character information. First, let's enclose our first slide in a div and specify display: flex. Don't forget the closing tag! Let's also add the links to the other slides.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;][TABS=730]
{slide=1}[div=
display: flex;
]1 {tab=2}2{/tab} {tab=3}3{/tab} {tab=4}4{/tab}[/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Alright, now let's make individual flexboxes for our navigation links. Input flex: 1 in each of them. I'm also going to make the background color white, and the font color black.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;][div=
flex: 1;
background: white;
]1[/div][div=
flex: 1;
background: white;
]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;
]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;
]{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's add some height to our flexboxes and center our text.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;
][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]1[/div][div=
flex: 1;
background: white;]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;]{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Copy paste the same specifications on all tabs.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;
][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]1[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]{tab=2}2{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
]{tab=3}3{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;
{tab=4}4{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's rename them so they look better.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Now let's add our two columns. Open up a div after the navigation bar and its container. Once again, we will be specifying display: flex; We will also be adding flex-wrap: wrap this time. This will help in making our second flexbox wrap to the second line when we shrink our browser. Again, this was covered in the flexbox tutorial.

UPDATE (29-06-23):
Tabs now automatically force height and overflow properties to your code, so make sure to define a height for your tabs. In an earlier update, I mentioned a fixed value, but that wasn't the best solution. However, after a bit of playing around, it seems that defining a height of 0px causes the height to be dynamic, meaning that it changes relative to the size of the container. This is what we want, especially in this example.


[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's create our two items. One will be flex: 1 and the other will be flex: 2, meaning that the second will take up a bigger amount of space.

Specify a min-width for both so that when our browser shrinks past that minimum width, our second flexbox will work in tandem with flex-wrap: wrap and go to the second line.

Add a background so we can see what we're working with.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: white;
][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


I don't like how they're sticking so close to each other, so let's add a 5px gap between our elements. Add margin-top: 5px to make a gap between the nav bar and the columns.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
][div=
flex: 1;
min-width: 230px;
height: 400px;
background: white;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Let's add a background image to the first big block. If you don't know how to add backgrounds, check this guide!

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(
https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;][/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Now let's add some text. The padding will make it so that it doesn't stick too close to the edge. We don't like that here!

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
padding: 10px;
]Lorem[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Add overflow-y: scroll so our text doesn't spill out when we have too much of them.

[div=
width: 730px;
margin: auto;
background: #1b1b1b;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
background: white;
padding: 10px;
overflow-y: scroll;
]Lorem[/div][/div]{/slide}
{slide=2}{tab=1}1{/tab}2{tab=3}3{/tab}{tab=4}4{/tab}{/slide}
{slide=3}{tab=1}1{/tab}{tab=2}2{/tab}3{tab=4}4{/tab}{/slide}
{slide=4}{tab=1}1{/tab}{tab=2}2{/tab}{tab=3}3{/tab}4{/slide}
[/TABS][/div][/div]

Output:


Copy-paste to other slides. Just mind the navigation links. Let's also remove the base gray background.

[div=
width: 730px;
margin: auto;
overflow: hidden;][div=
margin-top: -40px;
color: black;][TABS=730x0]
{slide=1}[div=
/* NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Basics[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 1 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 1 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 1 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem[/div][/div]{/slide}
{slide=2}[div=
/* TAB 2 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Personality[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 2 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 2 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 2 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 2[/div][/div]{/slide}
{slide=3}[div=
/* TAB 3 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Biography[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=4}Misc{/tab}[/div][/div][div=
/* BODY 3 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 3 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 3 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 3[/div][/div]{/slide}
{slide=4}[div=
/* TAB 4 NAV BAR */
display: flex;
height: 50px;][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=1}Basics{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=2}Personality{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]{tab=3}Biography{/tab}[/div][div=
flex: 1;
background: white;
display: flex;
justify-content: center;
align-items: center;]Misc[/div][/div][div=
/* BODY 4 */
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;][div=
flex: 1;
min-width: 230px;
height: 400px;
/* PICTURE 4 */
background: url(https://i.imgur.com/CelzVfK.png) 50% 50%/cover;][/div][div=
flex: 2;
min-width: 230px;
height: 400px;
/* TEXT BG 4 */
background: white;
padding: 10px;
overflow-y: scroll;]Lorem 4[/div][/div]{/slide}
[/TABS][/div][/div]

Output:


I added comments so you can see where things are, should you want to edit this code.



And that's it for this coding tutorial thread! Hope you learned something new!
 
Last edited:
  • Nice Execution!
Reactions: rissa

Common Mistakes

Code not working? Check for the following:

  • Each declaration must be separated with a semicolon (;). Did you forget a semicolon?
  • The property and the value are separated by a colon (:). Did you forget to input a colon somewhere?
  • Did you input space where you weren't supposed to? For example, it's transform: scale(x,y); not transform: scale ( x , y );.
  • Always remember that div tags go in a pair! Did you forget to close your div tag with a [/div]? Did you forget to input any of the other closing tags?
  • Remember that the syntax follows American English. Did you use a different spelling, like colour instead of color? Did you misspell any of the properties or values by accident?
  • Some properties go hand-in-hand for them to work. Did you forget some of them?
  • Did you input a false value?

When people approach me for help, 80% of the time the code is broken because of a very simple reason. Remember to check for these if something isn’t working right!
 
Last edited:
Last edited:
  • Thank You
Reactions: rissa
Status
Not open for further replies.