Difference between revisions of "Dn-css-4"
From EncyclopAtys
FairyFighter (talk | contribs) m (→COLORS) |
FairyFighter (talk | contribs) m (→COLORS) |
||
| Line 15: | Line 15: | ||
before I go any further, I would like to share idea behind this model. | before I go any further, I would like to share idea behind this model. | ||
Try to not see 'dn-' part at all the time. I use it to easly identify 'my' code in this development stage. | Try to not see 'dn-' part at all the time. I use it to easly identify 'my' code in this development stage. | ||
| − | Lets have a look at bit of CSS: | + | Lets have a look at bit of CSS (this one should look familiar ;) ): |
| − | + | <syntaxhighlight> | |
| + | <div style=" | ||
| + | position:relative; left:4px; right: 4px; top:2px; | ||
| + | border:1px solid #{{ColorAtys|group={{{palette}}}}}; | ||
| + | height:25px; | ||
| + | background: #{{ColorAtys|type=bg|group={{{palette}}}}}; | ||
| + | background: linear-gradient(to right, #{{ColorAtys|type=bg|group={{{palette}}}}}, #{{ColorAtys|type=light|group={{{palette}}}}}); | ||
| + | border: thin solid #{{ColorAtys|type=bg|group={{{palette}}}}}; | ||
| + | border-bottom: thin outset #{{ColorAtys|type=dark|group={{{palette}}}}}; | ||
| + | color: #{{ColorAtys|type=fg|group={{{palette}}}}}; | ||
| + | font-weight: bold; | ||
| + | font-size: 1.25em; | ||
| + | text-align: center; | ||
| + | "> | ||
| + | </syntaxhighlight> | ||
---- | ---- | ||
{{:dn-menu-buttons | {{:dn-menu-buttons | ||
Revision as of 00:27, 27 February 2021
COLORS
On first page of this essay I showed few rows from table below. Bare with me as I am Tryker and Marauder... I will concentrate on that combination ;-)
| Template | 1/8 | 2/7 | 3/6 | 4/5 | 5/4 | 6/3 | 7/2 | 8/1 |
|---|---|---|---|---|---|---|---|---|
| Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom | dn-Ryzom |
| Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker | dn-Tryker |
| Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder | dn-Marauder |
If we would to agree with many CSS designers on internet we should need only five colors to create modern clean layout. By no means I will defend that statement nor I will try to dismiss its value, I am proposing here things to open discussion... BUT, if we would consider CSS designers idea we should, or at least try, to restrict amount of colors used. That's why I posted this contraption:
| dn-RT1 | dn-RT2 | dn-RT3 | dn-RT4 | dn-RT5 | dn-RT6 | dn-RT7 | dn-MR3 |
before I go any further, I would like to share idea behind this model.
Try to not see 'dn-' part at all the time. I use it to easly identify 'my' code in this development stage.
Lets have a look at bit of CSS (this one should look familiar ;) ):
<div style="
position:relative; left:4px; right: 4px; top:2px;
border:1px solid #{{ColorAtys|group={{{palette}}}}};
height:25px;
background: #{{ColorAtys|type=bg|group={{{palette}}}}};
background: linear-gradient(to right, #{{ColorAtys|type=bg|group={{{palette}}}}}, #{{ColorAtys|type=light|group={{{palette}}}}});
border: thin solid #{{ColorAtys|type=bg|group={{{palette}}}}};
border-bottom: thin outset #{{ColorAtys|type=dark|group={{{palette}}}}};
color: #{{ColorAtys|type=fg|group={{{palette}}}}};
font-weight: bold;
font-size: 1.25em;
text-align: center;
">
