Colorball – Template
Jump to navigation
Jump to search
Lou Montana (talk | contribs) m (Add padding for shadow) |
Lou Montana (talk | contribs) m (Add margin* for shadow) |
||
| Line 1: | Line 1: | ||
<includeonly><div style="background-color: {{{1|#025D00}}}; background: radial-gradient(circle at 0.25em 0.25em, #FFF, {{{1|#025D00}}}, #333); border-radius: 50%; box-shadow: 0 0 3px 0 #888; display: inline-block; font-size: {{{2|1}}}em; | <includeonly><div style="background-color: {{{1|#025D00}}}; background: radial-gradient(circle at 0.25em 0.25em, #FFF, {{{1|#025D00}}}, #333); border-radius: 50%; box-shadow: 0 0 3px 0 #888; display: inline-block; font-size: {{{2|1}}}em; margin: 3px; vertical-align: middle; height: 1em; width: 1em"></div></includeonly><noinclude> | ||
Displays a color ball. | Displays a color ball. | ||
| Line 6: | Line 6: | ||
* color: (Optional, default #025D00) HTML colour, can be one of: | * color: (Optional, default #025D00) HTML colour, can be one of: | ||
** HTML colour name - ''red'', ''darkgrey'', etc. | ** HTML colour name - ''red'', ''darkgrey'', etc. | ||
** HTML colour format - '''#RRGGBB''' | ** HTML colour format - '''#RGB''' or '''#RRGGBB''' | ||
** rgb format - '''rgb(255, 0, 0)''' | ** rgb format - '''rgb(255, 0, 0)''' | ||
** rgba format - '''rgba(255, 0, 0, 0.5)''' | ** rgba format - '''rgba(255, 0, 0, 0.5)''' | ||
| Line 26: | Line 26: | ||
| <nowiki>{{colorball|#FF5533|2}}</nowiki> | | <nowiki>{{colorball|#FF5533|2}}</nowiki> | ||
| {{colorball|#FF5533|2}} | | {{colorball|#FF5533|2}} | ||
|- | |||
| <nowiki>{{colorball|#F0F|8}}</nowiki> | |||
| {{colorball|#F0F|8}} | |||
|- | |- | ||
|} | |} | ||
| Line 38: | Line 41: | ||
display: inline-block; | display: inline-block; | ||
font-size: SIZE em; | font-size: SIZE em; | ||
margin: 3px; | |||
vertical-align: middle; | vertical-align: middle; | ||
height: 1em; | height: 1em; | ||
Revision as of 16:49, 10 May 2018
Displays a color ball.
Usage
{{colorball|colour|size}}
- color: (Optional, default #025D00) HTML colour, can be one of:
- HTML colour name - red, darkgrey, etc.
- HTML colour format - #RGB or #RRGGBB
- rgb format - rgb(255, 0, 0)
- rgba format - rgba(255, 0, 0, 0.5)
- hsl format - hsl(120, 100%, 50%)
- hsla format - hsla(120, 60%, 70%, 0.3)
- size (Optional, default 1) size relative to font-size (em)
| Code | Result |
|---|---|
| {{colorball}} | Template:colorball |
| {{colorball|orange}} | Template:colorball |
| {{colorball|#FF5533|2}} | Template:colorball |
| {{colorball|#F0F|8}} | Template:colorball |
Source
<div style="
background-color: COLOUR;
background: radial-gradient(circle at 0.25em 0.25em, #FFF, COLOUR, #333);
border-radius: 50%;
box-shadow: 0 0 3px 0 #888;
display: inline-block;
font-size: SIZE em;
margin: 3px;
vertical-align: middle;
height: 1em;
width: 1em"></div>