( graphics & fiction ) - | thirteen. one cr chart code.

You're viewing

mirrorcoated
Create a Dreamwidth Account Learn More

Reload page in style: site light

Previous | Memories | Tell Someone | Next

ニコニコ。

spoinks
[mirrorcoated]

15 June 2018 @ 12:43 pm

| thirteen. one cr chart code.

gradient
Inspired by the game I Love Hue.

Notes:
⇨ I haven't added title code to the divs, if you want to, please add this code to the div with the icon:

⇨ If you want an easy way to find HTML gradients, I recommend W3 Schools' Colour Picker!

⇨ When adding a new row, please note that the top: command in the first div should be +2px of whatever the last value was (the default code goes from 0 to 8px, so the next row would be top: 10px;).

CODE:

<raw-code><center><span style="font-family: serif; font-size: 28px; font-style: italic; font-weight: bold; color: #000;">character relations</span><br />
<span style="font-family: monospace; font-size: 11pt; font-weight: bold;"><font color="#ROM-HEX">romantic</font> | <font color="#POS-HEX">positive</font> | <font color="#NEU-HEX">neutral</font> | <font color="#NEG-HEX">negative</font></span>

<div style="width: 410px; height: 500px; overflow: visible; padding: 10px; margin-bottom: 10px; align: top;">

<div style="width: 100px; height: 100px; background-color: #HEX; border-radius: 5px 0 0 0; display: inline-block; float: left; position: relative; margin-right: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); border-radius: 5px 0 0 0; opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; border-radius: 0 5px 0 0;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 5px 0 0;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 2px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 4px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 6px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px; border-radius: 0 0 0 5px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 0 5px;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: 8px; border-radius: 0 0 5px 0;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 5px 0;">
</div>
</div>

</div>

NEW ROW:

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx; border-radius: 0 0 0 5px;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 0 5px;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4;">
</div>
</div>

<div style="width: 100px; height: 100px; background-color: #HEX; display: inline-block; float: left; position: relative; margin-right: 2px; top: XXpx; border-radius: 0 0 5px 0;">
<div style="width: 100px; height: 100px; background: url(ICON URL); opacity: 0.4; border-radius: 0 0 5px 0;">
</div>
</div>

</div>

Tags: !code post, | code: cr chart

Comment

( Post a new comment )