- Posting Speed
- Multiple posts per week
- One post per week
- Slow As Molasses
- Writing Levels
- Adept
- Advanced
- Adaptable
- Preferred Character Gender
- Primarily Prefer Male
- Genres
- Slice-of-Life, Gothic, Horror, Fantasy
DIVTIONARY 2.0
A list of CSS properties available on Iwaku.
For any questions in regards to CSS coding, please head to the BBCode Help Thread.
Hello! I have been asked to take over the original Divtionary made by @Nemopedia. If you have any suggestions on what to add or improve, 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.
Useful Resources
- Iwaku BBCode list- W3schools CSS References
- CSS Reference
- CSS Tricks
- HTML Color Picker
- Accessible Colors
- Tint and Shade Generator
- Random Palette Generator
- Transparent Textures
- Lorem Ipsum Text Generator
- Noise Generator
Basics
BBCODE MODE: the rich text editor setting that allows you to write bbcode without hiccups. You can activate it by clicking this little symbol in the corner:
If you try to write BBcode in the normal text editor mode, you'll end facing a lot of issues like spacing between lines and the automatic creation of opening and ending tags.
DIV: the container, or element, that you are working in. In order to create an element, you must begin with
[div=]
and end it with ][/div]
.TAGS: an opening tag will look like
[FONT=]
, [COLOR=]
, [SIZE=]
, etc. Ending tags are repetitions of the opening tag with a forward slash in front of it, such as [/FONT]
. Each tag has a different effect, like [FONT=][/FONT]
changes the font of any text between the tags. For example, to use Dancing Script, you would use [FONT=Dancing Script]Hello[/FONT]
to get 'Hello.'NOTES: you can use
/*example text here*/
to leave yourself little notes inside a code that will not affect the code itself. This is handy for keeping track of which elements correspond to what section of the code. Alternatively, you can add font-size: 0px;
to an element, making any text typed into the element invisible except within the code itself. The latter is particularly handy as certain sites require text within an element in order for that element to show.PX: sets the size of an element using the absolute value of pixels.
%: sets the size of an element using the relative value of percentage.
MOBILE-FRIENDLINESS: how well the code can be seen on mobile compared to on a PC. Using percents instead of pixels for sizing elements helps make codes more mobile-friendly since the sizing will be more relative to the viewing screen, but you can also make mobile-friendly codes with pixels by making sure you are working within a width limit of 450px. If you have any element that pushes past that, it will get caught off on mobile. Height does not matter.
MARGIN: the space around an element's border. In other words, it controls the space outside an element. See more under the Dimensions section.
PADDING: the space between an element's border and the element's content. In other words, it controls the space inside of an element. See more under the Dimensions section.
HEIGHT: the height of the element. See more under the Dimensions section.
WIDTH: the width of the element. See more under the Dimensions section.
POSITION: determines how an element is positioned in a document. Use this in conjunction with top, left, right, and bottom properties to determine the element's final location. See more under the Dimensions section.
BACKGROUND: the background of the element. It can be a solid color, a gradient, or an image. See more under the Colors & Images section.
OPACITY: the transparency of an element. See more under the Colors & Images section.
BORDER: the edges of an element. The style (solid, dotted, etc), thickness, and color of a border can all be altered. See more under the Borders section.
BOX-SHADOW: adds a shadow around an element. See more under the Borders section.
BORDER-RADIUS: the roundness (or lack thereof) of the element's edges. See more under the Borders section.
DISPLAY: determines how an element will appear. Generally, this is used to align elements horizontally. See more under the Alignment section.
COLUMNS: sets elements side-by-side in columns. See more under the Alignment section.
FLOAT: sets an element to a specified side, useful for text-wrapping. See more under the Alignment section.
Z-INDEX: determines how elements are layered over each other. Giving an element a higher z-index value will bring it forward past the other elements. See more under the Layering section.
FONT AWESOME ICONS: various icons that can be used on Iwaku through a specific code. These icons can be treated similarly to regular text. See more under the Text section.
TEXT-SHADOW: adds a shadow to your text. See more under the Text section.
OVERFLOW: determines what will happen to the content that goes outside of the element's dimensions. In other words, whether the content in the element will scroll or get cut off. See more under the Scrolls section.
BACKGROUND-ATTACHMENT: determines whether a background image will scroll with the page or stay fixed. See more under the Scrolls section.
CURSOR: in this context, this allows you to change the website's default cursor when hovering over a code, even to a custom image. See more under the Mouse Interactions section.
POINTER-EVENTS: determines whether the cursor can interact with an element or not. See more under the Mouse Interactions section.
TRANSFORM: allows you to rotate an element. See more under the Rotation & Animation section.
ANIMATION: allows you to add animations to elements, such as fading in or out. See more under the Rotation & Animation section.
MEDIA PLAYER: allows you to attach videos and music to an element. See more under the Media Player section.
ACCORDION: creates a collapsable drop-down menu. See more under the Accordions section.
TABS: create tabs that one can switch between to divide content. See more under the Tabs section.
SLIDER: creates slides that swipe horizontally when clicked. See more under the Sliders section.
Index
- Dimensions
- Colors & Images
- Borders
- Alignment
- Layering
- Text
- Scrolls
- Mouse Interactions
- Rotation & Animation
- Media Player
- Accordions
- Tabs
- Sliders