- Invitation Status
- Not accepting invites at this time
- Posting Speed
- One post per week
- Slow As Molasses
- Writing Levels
- Adaptable
- Preferred Character Gender
- No Preferences
Divtionary
A list of CSS properties available on Iwaku.
For any questions in regards to CSS coding, please head to the BBCode help thread.
If you have any suggestions on what to add, to improve, or to write a guide on feel free to drop me a message. Please note that this is just a list of properties that can be used on Iwaku, this is by no means a complete list.
For any questions in regards to CSS coding, please head to the BBCode help thread.
If you have any suggestions on what to add, to improve, or to write a guide on feel free to drop me a message. Please note that this is just a list of properties that can be used on Iwaku, this is by no means a complete list.
Nifty Links
- W3schools CSS references - Css Reference
- CSS Tricks
- Playground
- BBcode help thread
- Iwaku BBCode list
- Font-awesome cheat sheet
- Flexbox Cheatsheet
Index
Base
MARGIN: Determines the distance between the elements or the position on the canvas.
USE: Margin: 00px; or
Margin: auto; (brings the box to the center when used in combination with a width.)
Margin: auto; (brings the box to the center when used in combination with a width.)
NOTES: You can specify which side the margin applies to by adding -top, -right, -left, -bottom behind margin. (e.g: margin-left: 00px;)
Padding: Sets a distance between the element and the border.
USE: Padding: 00px; or
Padding: 00%;
Padding: 00%;
NOTES: Similar to MARGIN the side that is affected by the padding can be specified.
(e.g: Padding-right: 00px;)
Adding the padding in the same tag as the width will make the box wider and possibly have it cut out of view when viewed on smaller screens. Split the padding and the width to prevent that from happening.
(e.g: Padding-right: 00px;)
Adding the padding in the same tag as the width will make the box wider and possibly have it cut out of view when viewed on smaller screens. Split the padding and the width to prevent that from happening.
WIDTH: Sets the width of the element.
USE: Width: 00px; or
Width: 00%;
Width: 00%;
NOTES: When working with several elements stacked on top of each other of various widths it is best to set the width of the parent element (first box) with absolute numbers ('px') and then all following elements within with relative numbers ('%'). This will help with mobile friendliness.
(e.g: 1st div = width: 100px;] [ 2nd div = width: 80%;] The first div is the parent from which the second div (the child) will take 80% of.)
(e.g: 1st div = width: 100px;] [ 2nd div = width: 80%;] The first div is the parent from which the second div (the child) will take 80% of.)
HEIGHT: Sets the height of the element.
USE: Height: 00px; or
Height: 00%;
Height: 00%;
NOTES: See WIDTH
BACKGROUND: Sets the background colour of the element, or places an image as its background.
USE: Background: colour name; or
Background: #colour hex; or
Background: url(image url);
Background: #colour hex; or
Background: url(image url);
NOTES: When setting an image as the background be sure to specify the height of the box. The image won't show up otherwise.
GRADIENT: Continuation on BACKGROUND, but dedicated to setting a gradient.
USE: (Top-Bottom)
Background: linear-gradient(col1 ,col2); or
(Left-Right)
Background: linear-gradient(to right ,col1 ,col2); or
(Diagonal)
Background: linear-gradient(to bottom right, col1 , col2); or
(Multiple colours)
Background: linear-gradient(col1 ,col2 ,col3);
Background: linear-gradient(col1 ,col2); or
(Left-Right)
Background: linear-gradient(to right ,col1 ,col2); or
(Diagonal)
Background: linear-gradient(to bottom right, col1 , col2); or
(Multiple colours)
Background: linear-gradient(col1 ,col2 ,col3);
NOTES: Try some advanced gradient effects as found in this article for more.
OPACITY: Second continuation on BACKGROUND, but dedicated to setting the opacity. Determines how see through an element is.
USE: Opacity: 0.1 - 1; or
Background: rgba(r,b,g,a);
(red,green,blue,alpha)
Background: rgba(r,b,g,a);
(red,green,blue,alpha)
NOTES: Opacity will target the element as a whole, including text. Background: rgba(..) will only target the background of the element and leaves the text alone.
BACKGROUND-REPEAT: Determines how the background image repeats itself over the width and the height of the element, or the lack of it.
USE: Background-repeat: no-repeat; or
Background-repeat: x-repeat; or
Background-repeat: y-repeat;
Background-repeat: x-repeat; or
Background-repeat: y-repeat;
NOTES: Background images default themselves into repeating when nothing is specified and there is still 'room' that needs to be filled up.
X = Horizontal
Y = Vertical
X = Horizontal
Y = Vertical
BACKGROUND-SIZE: Sets the dimensions of the background image.
USE: Background-size: (width)px (height)px; or
Background-size: (width)% (height)%; or
Background-size: cover;
Background-size: (width)% (height)%; or
Background-size: cover;
NOTES: See the article of CSS reference on background-size to see more options and what they do.
BACKGROUND-POSITION: Determines the position of the image within the element.
USE: Background-position: (x)px (y)px; or
Background-position: (x)% (y)%; or
Background-position: center;
Background-position: (x)% (y)%; or
Background-position: center;
BACKGROUND-ATTACHMENT: Determines whether the background image stays fixed or will scroll along.
USE: Background-attachment: scroll; or
Background-attachment: fixed;
Background-attachment: local;
Background-attachment: fixed;
Background-attachment: local;
NOTES: Scroll - the default setting, scrolls along with the page.
Fixed - will not scroll with the page.
Local - scrolls according to the element set.
Doesn't seem to work on Apple devices?
Fixed - will not scroll with the page.
Local - scrolls according to the element set.
Doesn't seem to work on Apple devices?
DISPLAY: Determines how an element will appear.
USE: Display: inline-block; or
Display: flex; or
Display: none;
Display: flex; or
Display: none;
NOTES: Inline-block - the element(s) will appear on the same horizontal line.
Flex - does the same as inline-block, best option for making mobile-friendly templates.
None - the box won't appear at all.
Flexbox cheatsheet
Flex - does the same as inline-block, best option for making mobile-friendly templates.
None - the box won't appear at all.
Flexbox cheatsheet
FLOAT: Sets an element to a specified side.
USE: Float: right; or
Float: left;
Float: left;
NOTES: Usually used in combination with the 'inline-block' property explained in DISPLAY.
FLEX:Determines how elements interact with each other and stack next to each other.
USE: Flex: #;
'#' being any number you want.
'#' being any number you want.
NOTES: Fill in any number as needed for each flex box. The lower the number of the flex-box the lower its priority is over other boxes with a higher number, thus making them smaller. Equal numbers will give the boxes equal priority and thus equal amount of room.
Text
COLOR: Determines the colour of the text.
USE: Color: colour-name; or
Color: #hex;
Color: #hex;
NOTES: I apologise to all British-English users. It triggers me as well.
FONT-FAMILY: Determines the font of the text within the element.
USE: Font-family: fontname;
NOTES: Google fonts don't work within div boxes unless they have been 'summoned' before. This is possible by adding the fonts at the start of the template through its regular bbcode tag.
(e.g: (['font'= font name] font name [/'font'];))
(e.g: (['font'= font name] font name [/'font'];))
FONT-SIZE:Determines the size of the text within the element.
USE: Font-size: 00px; or
Font-size: 00em; or
Font-size: calc(10px+2vw);
- credit to @darkflames13 for finding a standard formula.
Font-size: 00em; or
Font-size: calc(10px+2vw);
- credit to @darkflames13 for finding a standard formula.
NOTES: For more on font-sizes see the article of CSS Reference. The full formula for a font-size that will adjust itself to the screensize is:
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
The formula in the box left is a simplified version of above.
calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
The formula in the box left is a simplified version of above.
FONT-WEIGHT: Makes the font appear bolder or lighter than its default.
USE: Font-weight: bold; or
Font-weight: lighter;
Font-weight: lighter;
NOTES: -
FONT-STYLE: Puts the font into italics.
USE: Font-style: italic;
NOTES: -
FONT-VARIANT: Specifies if the text appears in small-caps or not.
USE: Font-variant: normal;
Font-variant: small-caps;
Font-variant: small-caps;
NOTES: -
TEXT-ALIGN: Determines how the text aligns within the element.
USE: Text-align: left; or
Text-align: right; or
Text-align: center; or
Text-align: justify;
Text-align: right; or
Text-align: center; or
Text-align: justify;
NOTES: The default is left.
TEXT-DECORATION: Adds a line to the text. Can either go underneath, on top, or strike through the text.
USE: Text-decoration: underline; or
Text-decoration: line-through;
Text-decoration: overline;
Text-decoration: line-through;
Text-decoration: overline;
NOTES: The line can be wavy, dotted, or coloured by adding more definitions behind the property.
(e.g: Text-decoration: underline dotted red;)
(e.g: Text-decoration: underline dotted red;)
DIRECTION: Determines the direction the text will go.
USE: (Left-Right)
Direction: ltr; or
(Right-Left)
Direction: rtl;
Direction: ltr; or
(Right-Left)
Direction: rtl;
NOTES: -
TEXT-TRANSFORM: Makes the text appear in either all uppsercase, lowercase, or capitalise the first letter of each word.
USE: Text-transform: uppercase; or
Text-transform: lowercase; or
Text-transform: capitalize;
Text-transform: lowercase; or
Text-transform: capitalize;
NOTES: -
TEXT-SHADOW: Adds a shadow in the text.
USE: Text-shadow: (w)px (h)px (b)px colour;
NOTES: w = width of the shadow.
h = height of the shadow.
b = blur of the shadow. This is optional, but can be used to define the shadow.
colour = the colour of the shadow. Can be the name of the colour or a hex.
h = height of the shadow.
b = blur of the shadow. This is optional, but can be used to define the shadow.
colour = the colour of the shadow. Can be the name of the colour or a hex.
TEXT-INDENT: Add in an extra space at the start of the first word of the text.
USE: Text-indent: 00px;
NOTES: Doesn't repeat itself in new paragraphs. Will need to be repeated.
TEXT-OVERFLOW: Determines what will happen to the text that goes out (overflows) the element.
USE: Text-overflow: clip; or
Text-overflow: ellipsis; or
Text-overflow: user defined;
Text-overflow: ellipsis; or
Text-overflow: user defined;
NOTES: Clip: The text will move out of sight when overflowing.
Ellipsis: The overflowing text will turn into ellipsis ('...')
User defines: The overflowing text will turn into whatever the user defined it to be.
Ellipsis: The overflowing text will turn into ellipsis ('...')
User defines: The overflowing text will turn into whatever the user defined it to be.
LINE-HEIGHT: Determines the height of a line.
USE: Line-height: 00px;
NOTES: Needs a defined 'height' for it to work.
LETTER-SPACING: Sets a space between the letters in a text.
USE: Letter-spacing: 00px; or
Word-spacing: 00px;
Word-spacing: 00px;
NOTES: Can also be used to target words instead of letters individually by replacing the word 'letter' with 'word' (see box to the left).
WRITING-DIRECTION: Sets the reading direction of the text.
USE: Writing-direction: horizontal-tb; or
Writing-direction: vertical-rl; or
Writing-direction: vertical-lr;
Writing-direction: vertical-rl; or
Writing-direction: vertical-lr;
NOTES: Not supported on all browsers.
Horizontal-tb = default setting. Left to right, top to bottom.
Vertical-rl = Read from right to left and from top to bottom.
Vertical-lr = Read from left to right and from top to bottom.
Horizontal-tb = default setting. Left to right, top to bottom.
Vertical-rl = Read from right to left and from top to bottom.
Vertical-lr = Read from left to right and from top to bottom.
WORD-WRAP: Determines what happens to long words at the end of the line.
USE: Word-wrap: break-word;
NOTES: Breaks the word at whatever letter passes the end of the line and goes to the next sentence.
WHITE-SPACE: Determines what happens to the white space in an element.
USE: White-space: normal; or
White-space: nowrap; or
White-space: pre;
White-space: nowrap; or
White-space: pre;
NOTES: Normal - Default setting, text will wrap when necessary.
Nowrap - The text will wrap up on one line and won't go to the next.
Pre - White space is preserved on all browsers and will only wrap on a new line with line breaks.
Nowrap - The text will wrap up on one line and won't go to the next.
Pre - White space is preserved on all browsers and will only wrap on a new line with line breaks.
Box
BORDER: Sets a border style, colour, and thickness around the box.
USE: Border: 00px style colour;
NOTES: 00px = the size of the line.
Style = solid, dotted, wavy, etc...
Colour = either the name of the colour or its hexcode.
The side of where the border appears can be specified by adding the side after 'border'.
(e.g: border-top: to target the top border.)
Style = solid, dotted, wavy, etc...
Colour = either the name of the colour or its hexcode.
The side of where the border appears can be specified by adding the side after 'border'.
(e.g: border-top: to target the top border.)
Box-sizing: Helps the border to be defined separately from the element.
USE: Box-sizing: border-box;
NOTES: All padding, height, and width added after the box-sizing will include the border as well.
BOX-SHADOW: Adds a shadow to the box.
USE: Box-shadow: (w)px (h)px (b)px colour;
NOTES: W = width of the shadow.
H = height of the shadow.
B = blur of the shadow, optional. Helps with the definition of the shadow.
Colour = can be the name of the colour or the hex.
H = height of the shadow.
B = blur of the shadow, optional. Helps with the definition of the shadow.
Colour = can be the name of the colour or the hex.
BORDER-RADIUS: Rounds the corners of the box.
USE: Border-radius: 00px; or
Border-radius: 00%;
Border-radius: 00%;
NOTES: Using relative numbers ('%') helps with mobile-friendliness.
A specific corner can be targeted by adding in the side after 'border'.
(e.g: border-top-right: 00px style colour; will target the top right corner.
A specific corner can be targeted by adding in the side after 'border'.
(e.g: border-top-right: 00px style colour; will target the top right corner.
OVERFLOW: Determines what will happen to the content that goes outside of (overflows) the element.
USE: Overflow: hidden; or
Overflow: scroll; or
Overflow: auto;
Overflow: scroll; or
Overflow: auto;
NOTES: Hidden = hides the overflowing content.
Scroll: adds a scroll for the overflowing content.
Auto: will add in a scroll as needed.
To target either the y-axis (height) or the x-axis (width) specifically add in the letter of the axis behind the overflow.
(e.g: overflow-y: scroll; will make the content of the element scrollable vertically (in height).)
Guide for an invisible scroller.
Scroll: adds a scroll for the overflowing content.
Auto: will add in a scroll as needed.
To target either the y-axis (height) or the x-axis (width) specifically add in the letter of the axis behind the overflow.
(e.g: overflow-y: scroll; will make the content of the element scrollable vertically (in height).)
Guide for an invisible scroller.
Transform: Rotates an element.
USE: Transform: rotate(00deg); or
Transform: scaley(00); or
Transform: scalex(00); or
Transform: skewy(00); or
Transform: skewx(00);
Transform: scaley(00); or
Transform: scalex(00); or
Transform: skewy(00); or
Transform: skewx(00);
NOTES: See W3schools to see what each property does and what they mean.
SHAPE-OUTSIDE: Determines how the content will wrap around the floating element.
USE: Shape-outside: circle(00px 00px); or
Shape-outside: ellipse(00px 00px); or
Shape-outside: inset(00px 00px); or
Shape-outside: polygon(00px 00px); or
Shape-outside: url(image url);
Shape-outside: ellipse(00px 00px); or
Shape-outside: inset(00px 00px); or
Shape-outside: polygon(00px 00px); or
Shape-outside: url(image url);
NOTES: The absolutes ('px') can all be replaced by relatives ('%')
More info about shape-outside on CSS-Tricks.
More info about shape-outside on CSS-Tricks.
CURSOR: Changes the appearance of the cursor within the element.
USE: Cursor name cursor;
NOTES: List of cursors - W3schools.
Z-INDEX: Where Y- stands for the height of the element and X- for the width of the element, Z- stands for the layers of the elements. With the help of the z-index elements can be moved forward, or to the back as needed.
USE: Z-index: #;
'#' being whatever number you want to enter.
'#' being whatever number you want to enter.
NOTES: '1' is the standard, with '0' being the webpage of Iwaku itself. Each div tag counts for a layer and properties like slides and tabs often have added layer(s) as well. It often takes a little guessing and adjusting to get the right number with more complicated codes.
Ordering the layers of the elements from the beginning through tags is often much more effective than using the z-index.
Ordering the layers of the elements from the beginning through tags is often much more effective than using the z-index.
POINTER-EVENTS: Defines whether an element reacts to pointer events (your mouse).
USE: Pointer events: auto; or
Pointer-events: none;
Pointer-events: none;
NOTES: Really nifty for when elements are stacked on top of each other and only the underlying layers need to interact with the mouse, but not appear.
More on pointer-events by CCS Tricks.
More on pointer-events by CCS Tricks.
ANIMATION: CSS animations without the use of HTML or Javascript.
USE: Animation: name, duration, count;
(e.g:animation:fa-spin 5s linear infinite;)
(e.g:animation:fa-spin 5s linear infinite;)
NOTES: Still a very limited feature. Most guides online give more options than are actually available on Iwaku, or most browswer.
- CSS Tricks on CSS animations.
- W3schools on CSS animations.
- CSS Tricks on CSS animations.
- W3schools on CSS animations.
Last edited: