forked from mstancombe/HTML-Renderer
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path07.Additional features.htm
More file actions
170 lines (156 loc) · 5.98 KB
/
07.Additional features.htm
File metadata and controls
170 lines (156 loc) · 5.98 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<title>Additional features</title>
<link rel="Stylesheet" href="StyleSheet" />
<style>
<!--
.g1, .g2, .g3, .g4, .g5 {
background-color: red;
background-gradient: yellow;
padding: 22px;
}
.g1 { background-gradient-angle: 0; }
.g2 { background-gradient-angle: 45; }
.g3 { background-gradient-angle: 90; }
.g4 { background-gradient-angle: 135; }
.g5 { background-gradient-angle: 180; }
.c1, .c2, .c3, .c4, .c5 {
background-color: olive;
border: 0px;
color: white;
vertical-align: middle;
}
.c1 { border-radius: 0px; }
.c2 { border-radius: 10px; }
.c3 { border-radius: 0px 10px 10px 0px; }
.c4 { border-radius: 18px; }
.c5 {
border-radius: 10px;
border: outset #BBBB00 2px;
}
table { border-style: outset; }
td, th { border-style: inset; }
td { text-align: center; }
-->
</style>
</head>
<body>
<h1>
Additional features
</h1>
<blockquote>
<p>
There are some additional features that you may already discovered about the renderer
core engine.</p>
<h2>
Graphic features</h2>
<p>
I have always wanted the W3C to add this features to the CSS spec (and so far, not
there yet :)</p>
<ul>
<li><b>Gradients on backgrounds</b></li>
<li><b>Rounded corners</b></li>
</ul>
<p>
And I think many many web designers would agree. Is it so hard or what?.</p>
<h3>
Background Gradients</h3>
<p>
It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
<ol>
<li><code>background-gradient: (#Color)</code> - Second color of the gradient background,
the first one is given by <code>background-color</code>. Not inherited.</li>
<li><code>background-gradient-angle: (number)</code> - Angle (in degrees, clockwise) of
the gradient. Not inherited. Initial value:90</li>
</ol>
<b>Some examples</b>
<!-- Gradients table -->
<table width="300px">
<tr>
<td class="g1">
</td>
<td class="g2">
</td>
<td class="g3">
</td>
<td class="g4">
</td>
<td class="g5">
</td>
</tr>
<tr>
<td>
0 degrees
</td>
<td>
45 degrees
</td>
<td>
90 degrees
</td>
<td>
135 degrees
</td>
<td>
180 degrees
</td>
</tr>
</table>
<h3>
Rounded corners</h3>
<p>
As you may already know, CSS is based on a <a href="http://www.w3.org/TR/CSS21/box.html">
Box Model</a>, where every box has it's own set of properties. Since we are
talking abound <b>boxes</b>, why not to make them with rounded corners, almost every
website you visit nowadays makes use of rounded corners, where a not very nice trick
with images and tables must be used.</p>
<p>
In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
<ul>
<li><code>border-top-right-radius: (length)</code> Indicates the radius of the top-right corner.
Not ineritted</li>
<li><code>border-bottom-right-radius: (length)</code> Indicates the radius of the bottom-right corner.
Not ineritted</li>
<li><code>border-bottom-left-radius: (length)</code> Indicates the radius of the bottom-left corner.
Not ineritted</li>
<li><code>border-top-left-radius: (length)</code> Indicates the radius of the top-left corner.
Not ineritted</li>
<li><code>border-radius: (length){1,4}</code> Shorthand for the other corner properties.
Not ineritted</li>
</ul>
<!-- Corners table -->
<b>Some examples</b>
<table width="320px" cellspacing="10">
<tr>
<td width="1" style="border: 0px">
<p>
</p>
<p>
</p>
</td>
<td class="c1">
c1
</td>
<td class="c2">
c2
</td>
<td class="c3">
c3
</td>
<td class="c4">
c4
</td>
<td class="c5">
c5
</td>
</tr>
</table>
<pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
.c1 { border-radius: 0px }
.c2 { border-radius: 10px }
.c3 { border-radius: 0px 10px 10px 0px }
.c4 { border-radius: 18px }
.c5 { border-radius: 10px; border: outset #bb0 2px; }</pre>
</blockquote>
</body>
</html>