diff options
Diffstat (limited to 'inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php')
-rw-r--r-- | inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php | 498 |
1 files changed, 498 insertions, 0 deletions
diff --git a/inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php b/inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php new file mode 100644 index 00000000..758f8156 --- /dev/null +++ b/inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php | |||
@@ -0,0 +1,498 @@ | |||
1 | <?php | ||
2 | |||
3 | |||
4 | include("../mpdf.php"); | ||
5 | |||
6 | $mpdf=new mPDF(''); | ||
7 | |||
8 | //============================================================== | ||
9 | $html = ' | ||
10 | <style> | ||
11 | body { | ||
12 | font-family: sans-serif; | ||
13 | font-size: 10pt; | ||
14 | } | ||
15 | h4 { | ||
16 | font-variant: small-caps; | ||
17 | } | ||
18 | h5 { | ||
19 | margin-bottom: 0; | ||
20 | color: #110044; | ||
21 | } | ||
22 | p { margin-top: 0; } | ||
23 | dl { | ||
24 | margin: 0; | ||
25 | } | ||
26 | table { | ||
27 | border-spacing: 0.5em; | ||
28 | border: 7px dashed teal; | ||
29 | } | ||
30 | .table1 { | ||
31 | background-image: -moz-linear-gradient(left, #07cdde 20%, #00f200 ); | ||
32 | } | ||
33 | .table1 tr.thisrow1 { | ||
34 | background-image-resolution: 300dpi; | ||
35 | background: transparent url(\'bayeux1.jpg\') repeat scroll left top; | ||
36 | } | ||
37 | .table1 tr.thisrow1 td { | ||
38 | height: 28mm; | ||
39 | } | ||
40 | .table1 tr.thisrow2 { | ||
41 | background-image: none; | ||
42 | background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 ); | ||
43 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0.29, rgb(90,83,12)), color-stop(0.65, rgb(117,117,39)), color-stop(0.83, rgb(153,153,67))); | ||
44 | } | ||
45 | .table3 { | ||
46 | border-collapse: collapse; | ||
47 | /* background-gradient: linear #07cdde #00f200 1 0 0.5 1; */ | ||
48 | background: -moz-linear-gradient(left, #07cdde 20%, #00f200 ); | ||
49 | } | ||
50 | tr.thisrow { | ||
51 | border: 3px dashed red; | ||
52 | background: transparent url(\'bayeux1.jpg\') repeat scroll left top; | ||
53 | } | ||
54 | .table3 tr.thisrow { | ||
55 | border: 3px dashed orange; | ||
56 | background: transparent url(\'bgrock.jpg\') repeat scroll left top; | ||
57 | } | ||
58 | tfoot tr { | ||
59 | border: 5px dashed blue; | ||
60 | /* background-gradient: linear #c7Fdde #FF0000 1 0 0.5 0; */ | ||
61 | background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 ); | ||
62 | } | ||
63 | .gradient { | ||
64 | border:0.1mm solid #220044; | ||
65 | background-color: #f0f2ff; | ||
66 | background: linear-gradient(top, #c7cdde, #f0f2ff); | ||
67 | } | ||
68 | .rounded { | ||
69 | border:0.1mm solid #220044; | ||
70 | background-color: #f0f2ff; | ||
71 | background: linear-gradient(top, #c7cdde, #f0f2ff); | ||
72 | border-radius: 2mm; | ||
73 | background-clip: border-box; | ||
74 | } | ||
75 | div.text { | ||
76 | padding:1em; | ||
77 | margin: 1em 0; | ||
78 | text-align:justify; | ||
79 | } | ||
80 | .code { | ||
81 | font-family: mono; | ||
82 | font-size: 9pt; | ||
83 | background-color: #d5d5d5; | ||
84 | margin: 1em 1cm; | ||
85 | padding: 0 0.3cm; | ||
86 | } | ||
87 | </style> | ||
88 | <body style="background: -moz-repeating-radial-gradient(rgba(255,0,0,0.1), rgba(0,0,255,0.1) 40px, rgba(255,0,0,0.1) 80px)"> | ||
89 | |||
90 | <div style="position:fixed; top: 0; right: 0"><img src="tux.svg" width="110" /></div> | ||
91 | |||
92 | <h1></a>mPDF</h1> | ||
93 | <h2>New features in mPDF Version 5.1</h2> | ||
94 | |||
95 | <div class="rounded text"> | ||
96 | <ul> | ||
97 | <li>CSS background (images, colours or gradients) on <TR> and <TABLE></li> | ||
98 | <li>CSS border on <TR> (only in border-collapsed mode)</li> | ||
99 | <li>support for Mozilla and CSS3 gradient syntax: | ||
100 | <ul> | ||
101 | <li>-moz-linear-gradient, linear-gradient</li> | ||
102 | <li>-moz-radial-gradient, radial-gradient</li> | ||
103 | <li>-moz-repeating-linear-gradient, linear-repeating-gradient</li> | ||
104 | <li>-moz-repeating-radial-gradient, radial-repeating-gradient</li> | ||
105 | </ul> | ||
106 | </li> | ||
107 | <li>expanded support for gradients (including in SVG images): | ||
108 | <ul> | ||
109 | <li>multiple colour \'stops\'</li> | ||
110 | <li>opacity (transparency)</li> | ||
111 | <li>angle and/or position can be specified</li> | ||
112 | </ul> | ||
113 | </li> | ||
114 | <li>gradient can be used as an image mask (custom mPDF styles: gradient-mask)</li> | ||
115 | <li>CSS3 image-orientation supported for <IMG> (similar to existing custom mPDF attribute: rotate)</li> | ||
116 | <li>CSS3 image-resolution supported for <IMG></li> | ||
117 | <li>background-image-resolution (custom mPDF CSS-type style) to define resolution of background images</li> | ||
118 | <li>improved support for SVG images</li> | ||
119 | <li>SVG and WMF images supported in background-image</li> | ||
120 | <li>file attachments (embedded in PDF file) → → → → → <annotation file="tiger.jpg" content="This is a file attachment (embedded file) | ||
121 | Double-click to open attached file | ||
122 | Right-click to save file on your computer" icon="Paperclip" title="Attached File: tiger.jpg" pos-x="150" /></li> | ||
123 | </ul> | ||
124 | </div> | ||
125 | |||
126 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Tables: borders, background images & gradients</div> | ||
127 | |||
128 | <div class="rounded text">Background images or gradients can be set on whole tables or table rows (as well as individual table cells)</div> | ||
129 | |||
130 | <table class="table1"> | ||
131 | <tbody><tr><td>Row 1</td><td>This is data</td><td>This is data</td></tr> | ||
132 | <tr class="thisrow1"><td>This row has</td><td>a background-image</td><td>of the bayeux tapestry</td></tr> | ||
133 | <tr><td><p>Row 3</p></td><td><p>This is long data</p></td><td>This is data</td></tr> | ||
134 | <tr class="thisrow2"><td>This row has</td><td>a gradient set</td><td>which spans all 3 cells</td></tr> | ||
135 | <tr><td>Row 5</td><td>Also data</td><td>Also data</td></tr> | ||
136 | </tbody></table> | ||
137 | |||
138 | |||
139 | <div class="rounded text">Border can be set on table rows (only when border-collapse is set to collapse)</div> | ||
140 | |||
141 | <table class="table3" border="1"> | ||
142 | <tbody><tr><td>Row 1</td><td>This is data</td><td>This is data</td></tr> | ||
143 | <tr class="thisrow"><td>Row 2</td><td>This is data<br />This is data<br />This is data<br />This is data</td><td>Also data</td></tr> | ||
144 | <tr><td><p>Row 3</p></td><td><p>This is long data</p></td><td>This is data</td></tr> | ||
145 | </tbody></table> | ||
146 | |||
147 | |||
148 | <!-- ============================================================== --> | ||
149 | |||
150 | |||
151 | <div style="margin-top: 2em; height: 2mm; background-image: -moz-linear-gradient(45deg, red, blue);"> </div> | ||
152 | |||
153 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Mozilla and CSS3 gradient syntax</div> | ||
154 | |||
155 | <div style="height: 2mm; background-image: -moz-linear-gradient(45deg, red, blue);"> </div> | ||
156 | <h2>Linear gradients</h2> | ||
157 | <h4> Angle set AND points e.g. -moz-linear-gradient(34% 84% 30deg, red, orange, yellow...</h4> | ||
158 | <table style="border-collapse: collapse; repeat scroll left top; border: none;"> | ||
159 | <tr> | ||
160 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(top right 210deg, red, orange, yellow, green, blue, indigo, violet);">top right 210 degrees </td> | ||
161 | <td> </td> | ||
162 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(top right 210deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
163 | </tr> | ||
164 | <tr> | ||
165 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(30% 80% 60deg, red, orange, yellow, green, blue, indigo, violet);">30% 80% 60 degrees </td> | ||
166 | <td> </td> | ||
167 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(30% 80% 60deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
168 | </tr> | ||
169 | <tr> | ||
170 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(10px 40px 325deg, red, orange, yellow, green, blue, indigo, violet);">10px 40px 325 degrees </td> | ||
171 | <td> </td> | ||
172 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(10px 40px 325deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
173 | </tr> | ||
174 | <tr> | ||
175 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(bottom left 135deg, red, orange, yellow, green, blue, indigo, violet);">bottom left 135deg </td> | ||
176 | <td> </td> | ||
177 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(bottom left 135deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
178 | </tr> | ||
179 | </table> | ||
180 | |||
181 | |||
182 | <h4> Points set only e.g. -moz-linear-gradient(bottom left, red, orange, yellow...</h4> | ||
183 | |||
184 | <table style="border-collapse: collapse; repeat scroll left top; border: none;"> | ||
185 | <tr> | ||
186 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);">bottom right</td> | ||
187 | <td> </td> | ||
188 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
189 | </tr> | ||
190 | <tr> | ||
191 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);">top</td> | ||
192 | <td> </td> | ||
193 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
194 | </tr> | ||
195 | <tr> | ||
196 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(10px 40px, red, orange, yellow, green, blue, indigo, violet);">10px 40px</td> | ||
197 | <td> </td> | ||
198 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(10px 40px, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
199 | </tr> | ||
200 | <tr> | ||
201 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(30% 10%, red, orange, yellow, green, blue, indigo, violet);">30% 10%</td> | ||
202 | <td> </td> | ||
203 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(30% 10%, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
204 | </tr> | ||
205 | </table> | ||
206 | |||
207 | <pagebreak /> | ||
208 | |||
209 | <h4> Angle set but no points e.g. -moz-linear-gradient(30deg, red, orange, yellow...</h4> | ||
210 | |||
211 | <table style="border-collapse: collapse; repeat scroll left top; border: none;"> | ||
212 | <tr> | ||
213 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);">90 degrees </td> | ||
214 | <td> </td> | ||
215 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
216 | </tr> | ||
217 | <tr> | ||
218 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(120deg, red, orange, yellow, green, blue, indigo, violet);">120 degrees </td> | ||
219 | <td> </td> | ||
220 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(120deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
221 | </tr> | ||
222 | <tr> | ||
223 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);">180 degrees </td> | ||
224 | <td> </td> | ||
225 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
226 | </tr> | ||
227 | <tr> | ||
228 | <td style="height: 25mm; width: 135mm; background-image: -moz-linear-gradient(210deg, red, orange, yellow, green, blue, indigo, violet);">210 degrees </td> | ||
229 | <td> </td> | ||
230 | <td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(210deg, red, orange, yellow, green, blue, indigo, violet);"> </td> | ||
231 | </tr> | ||
232 | </table> | ||
233 | |||
234 | |||
235 | |||
236 | <div class="rounded text"> | ||
237 | <p>Linear and radial gradients are not specified in the CSS2 specification. The CSS3 draft specification gives a way of outputting gradients, but currently this is not supported by any browser.</p> | ||
238 | <p>Mozilla (Firefox) has developed its own way of producing gradients, which approximates to the CSS3 draft specification: </p> | ||
239 | <ul> | ||
240 | <li><i>-moz-linear-gradient</i> </li> | ||
241 | <li><i>-moz-repeating-linear-gradient</i></li> | ||
242 | <li><i>-moz-radial-gradient</i> and </li> | ||
243 | <li><i>-moz-repeating-radial-gradient</i></li> | ||
244 | </ul> | ||
245 | <p>WebKit (Safari, Chrome etc.) have a separate way of defining gradients using <i>-webkit-gradient</i></p> | ||
246 | <p>Microsoft (IE) does not support any such method of specifying gradients, but does have a function <i>filter: progid:DXImageTransform.Microsoft.gradient()</i> </p> | ||
247 | <p>When writing HTML for cross-browser compatibility, it is common to see something like this in a stylesheet:</p> | ||
248 | <p class="code"> | ||
249 | background: #999999; /* for non-css3 browsers */<br /> | ||
250 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\'); /* for IE */<br /> | ||
251 | background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000)); /* for webkit browsers */<br /> | ||
252 | background: -moz-linear-gradient(top, #cccccc, #000000); /* for firefox 3.6+ */<br /> | ||
253 | </p> | ||
254 | |||
255 | |||
256 | |||
257 | <p>mPDF versions <= 5.0 supported a custom style property <i>background-gradient</i> which accepted both linear and radial gradients. These continue to be supported (and both old and new forms can be used together); note the differences:</p> | ||
258 | <ul> | ||
259 | <li>mPDF background-gradients are output underneath background-images, and both can be specified; whereas the new CSS3/Mozilla-type gradients are defined as a type of background-image</li> | ||
260 | <li>CSS3/Mozilla gradients support multiple colour-stops, opacity, repeating-gradients, and a greater number of options for defining the gradient axis (linear gradients) or shape and extent (radial gradients)</li> | ||
261 | </ul> | ||
262 | |||
263 | <p>mPDF will attempt to parse a CSS stylesheet written for cross-browser compatibility:</p> | ||
264 | <ul> | ||
265 | <li>parse and support <i>-moz</i> type gradients</li> | ||
266 | <li>parse and support CSS3 gradient syntax</li> | ||
267 | <li>ignore <i>-webkit</i> syntax gradients</li> | ||
268 | </ul> | ||
269 | |||
270 | |||
271 | <p>More details can be found at:</p> | ||
272 | <ul> | ||
273 | <li>Mozilla linear - <a href="https://developer.mozilla.org/en/CSS/-moz-linear-gradient">https://developer.mozilla.org/en/CSS/-moz-linear-gradient</a></li> | ||
274 | <li>Mozilla radial - <a href="https://developer.mozilla.org/en/CSS/-moz-radial-gradient">https://developer.mozilla.org/en/CSS/-moz-radial-gradient</a></li> | ||
275 | <li>Mozilla gradients use - <a href="https://developer.mozilla.org/en/Using_gradients">https://developer.mozilla.org/en/Using_gradients</a></li> | ||
276 | <li>CSS3 linear gradients - <a href="http://dev.w3.org/csswg/css3-images/#linear-gradients">http://dev.w3.org/csswg/css3-images/#linear-gradients</a></li> | ||
277 | <li>CSS3 radial gradients - <a href="http://dev.w3.org/csswg/css3-images/#radial-gradients">http://dev.w3.org/csswg/css3-images/#radial-gradients</a></li> | ||
278 | <li>WebKit gradients - <a href="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> | ||
279 | </ul> | ||
280 | </div> | ||
281 | |||
282 | |||
283 | |||
284 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Repeating gradients</div> | ||
285 | |||
286 | <p class="code"> | ||
287 | background: repeating-linear-gradient(red, blue 20px, red 40px); | ||
288 | <br /> <br /> | ||
289 | background: -moz-repeating-linear-gradient(top left -45deg, red, red 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px); | ||
290 | </p> | ||
291 | |||
292 | <div style="float: right; width: 250px; height: 150px; background: -moz-repeating-linear-gradient(top left -45deg, red, red 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px);"> </div> | ||
293 | |||
294 | <div style="float: left; width: 250px; height: 150px; background: repeating-linear-gradient(red, blue 20px, red 40px);"> </div> | ||
295 | <br style="clear: both;" /> | ||
296 | <br /> | ||
297 | <br /> | ||
298 | |||
299 | <p class="code"> | ||
300 | background: repeating-radial-gradient(20px 30px, circle farthest-side, red, yellow, green 10px, yellow 15px, red 20px); | ||
301 | <br /> <br /> | ||
302 | background: repeating-radial-gradient(red, blue 20px, red 40px); | ||
303 | </p> | ||
304 | <div style="float: right; width: 250px; height: 150px; background: repeating-radial-gradient(red, blue 20px, red 40px);"> </div> | ||
305 | |||
306 | <div style="float: left; width: 250px; height: 150px; background: repeating-radial-gradient(20px 30px, circle farthest-side, red, yellow, green 10px, yellow 15px, red 20px);"> </div> | ||
307 | <br style="clear: both;" /> | ||
308 | |||
309 | |||
310 | <pagebreak /> | ||
311 | |||
312 | |||
313 | <h2>Radial gradients</h2> | ||
314 | |||
315 | <div style="float: right; width: 250px; height: 150px; padding: 15px; background: #F56991; color: #E8F3F8; | ||
316 | border-radius: 155px / 100px; | ||
317 | -moz-border-radius: 155px / 100px; | ||
318 | box-shadow: 10px 10px 25px #CCC; | ||
319 | -moz-box-shadow: 5px 5px 25px #CCC; | ||
320 | background-image: -moz-radial-gradient(70% 30%, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);"> </div> | ||
321 | |||
322 | |||
323 | <div style="float: left; width: 150px; height: 150px; padding: 15px; background: #F56991; color: #E8F3F8; | ||
324 | border-radius: 100px; | ||
325 | -moz-border-radius: 100px; | ||
326 | box-shadow: 10px 10px 25px #CCC; | ||
327 | -moz-box-shadow: 5px 5px 25px #CCC; | ||
328 | background-image: -moz-radial-gradient(70% 30%, circle , #ffffff 0%, #E56991 50%, #8A2624 100%);"> </div> | ||
329 | <br style="clear: both;" /> | ||
330 | |||
331 | |||
332 | <div style="float: right; width: 150px; height: 150px; border: 0.2mm solid black; | ||
333 | background: radial-gradient(bottom left, farthest-side, red, blue 50px, pink); | ||
334 | background-image: -moz-radial-gradient(red, yellow, #1E90FF); | ||
335 | background: -webkit-gradient(linear, left bottom, left top, color-stop(0.48, rgb(107,14,86)), color-stop(0.74, rgb(140,41,112)), color-stop(0.87, rgb(168,70,146)));"> </div> | ||
336 | |||
337 | <div style="float: left; width: 150px; height: 150px; border: 0.2mm solid black; background-image: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);"> </div> | ||
338 | <br style="clear: both;" /> | ||
339 | |||
340 | <div style="float: right; width: 300px; height: 150px; border: 0.2mm solid black; background-image: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);"> </div> | ||
341 | |||
342 | <div style="float: left; width: 300px; height: 150px; border: 0.2mm solid black; background-image: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);"> </div> | ||
343 | <br style="clear: both;" /> | ||
344 | |||
345 | <div style="float: right; width: 300px; height: 150px; border: 0.2mm solid black; background-image: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);"> </div> | ||
346 | |||
347 | <div style="float: left; width: 300px; height: 150px; border: 0.2mm solid black; background-image: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);"> </div> | ||
348 | <br style="clear: both;" /> | ||
349 | |||
350 | |||
351 | <p style="background-image: -moz-radial-gradient(center , red, orange, yellow, green, blue, indigo, violet);"> <br /> <br /> <br /> <br /> <br /> <br /> </p> | ||
352 | |||
353 | <p style="background-image: -moz-radial-gradient(center , circle closest-side, blue 0%, red 100%);"> <br /> <br /> <br /> <br /> <br /> </p> | ||
354 | |||
355 | |||
356 | |||
357 | |||
358 | <pagebreak /> | ||
359 | |||
360 | |||
361 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Gradient Image mask</div> | ||
362 | |||
363 | <div class="rounded text">Gradients (linear or radial) can also be used to produce \'masks\' for images. The same syntax is used as for background gradients (e.g. -moz-linear-gradient) but is set using a custom mPDF style: <i>gradient-mask</i>. The rgba() method for defining colours is used: colours are ignored, but the opacity value is used to mask the image.</div> | ||
364 | |||
365 | <p class="code"><img src="windmill.jpg" style="gradient-mask: -moz-radial-gradient(center, ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0));" /> | ||
366 | <br /><br /><img src="windmill.jpg" style="gradient-mask: -moz-radial-gradient(center, ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 70%, rgba(255,255,255,0) 90%, rgba(255,255,255,0));" /> | ||
367 | <br /><br /><img src="windmill.jpg" style="gradient-mask: -moz-linear-gradient(left, rgba(0,0,0,0) , rgba(0,0,0,1) 50% , rgba(0,0,0,0) 100%);" /> | ||
368 | </p> | ||
369 | |||
370 | <img src="windmill.jpg" style="gradient-mask: -moz-radial-gradient(center, ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 30%, rgba(255,255,255,0) 90%, rgba(255,255,255,0));" /> | ||
371 | <img src="windmill.jpg" style="gradient-mask: -moz-radial-gradient(center, ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 70%, rgba(255,255,255,0) 90%, rgba(255,255,255,0));" /> | ||
372 | <img src="windmill.jpg" style="gradient-mask: -moz-linear-gradient(left, rgba(0,0,0,0) , rgba(0,0,0,1) 50% , rgba(0,0,0,0) 100%);" /> | ||
373 | |||
374 | |||
375 | <br /> | ||
376 | |||
377 | |||
378 | |||
379 | |||
380 | <pagebreak /> | ||
381 | |||
382 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Image orientation</div> | ||
383 | |||
384 | <div class="rounded text">Images can be rotated using a custom mPDF HTML attribute: rotate. mPDF now also supports the draft CSS3 property of image-orientation. Rotation can be expressed in degrees, radians or grad units; it is corrected if necessary to an orthogonal rotation i.e. 90, 180 or 270 degrees. NB This does not work on background-images.</div> | ||
385 | <p class="code"><img src="tiger2.png" style="image-orientation: -90deg" width="100" /> | ||
386 | <br /> | ||
387 | <img src="tiger2.png" style="image-orientation: 3.14159rad" width="100" /> | ||
388 | </p> | ||
389 | |||
390 | <img src="tiger2.png" width="100" /> | ||
391 | <img src="tiger2.png" style="image-orientation: 75deg;" width="100" /> | ||
392 | <img src="tiger2.png" style="image-orientation: 180deg; image-resolution: 300dpi; " width="100" /> | ||
393 | <img src="tiger2.png" style="image-orientation: -90deg" width="100" /> | ||
394 | |||
395 | |||
396 | <br /> | ||
397 | |||
398 | <br /> | ||
399 | <br /> | ||
400 | <br /> | ||
401 | |||
402 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Image resolution</div> | ||
403 | |||
404 | |||
405 | <div class="rounded text">Image files (which do not have an output width or height specified) are displayed in mPDF at the default resolution set by the variable $mpdf->img_dpi. This can be overridden using the draft CSS3 property \'image-resolution\', which can be applied to <IMG> or background-images. | ||
406 | <br /> | ||
407 | The next 3 image files are identical (300px x 300px) but they have been saved with a different specified resolution: the first at 96dpi, the second at 300dpi. | ||
408 | <br /> | ||
409 | NB When used in combination with \'from-image\', a specified resolution is only used if the image does not have an intrinsic resolution. Only JPG, PNG and BMP files store a specified DPI resolution in the file.</div> | ||
410 | |||
411 | <p class="code"><img src="tiger300px300dpi.png" style="image-resolution: from-image;" /> | ||
412 | <br /><img src="tiger300px300dpi.png" style="image-resolution: 150dpi;" /> | ||
413 | <br /><img src="tiger300px96dpi.png" style="image-resolution: from-image;" /></p> | ||
414 | |||
415 | <img src="tiger300px300dpi.png" style="image-resolution: from-image;" /> | ||
416 | <img src="tiger300px300dpi.png" style="image-resolution: 150dpi;" /> | ||
417 | <img src="tiger300px96dpi.png" style="image-resolution: from-image;" /> | ||
418 | <br /> <br /> | ||
419 | |||
420 | |||
421 | |||
422 | <pagebreak /> | ||
423 | |||
424 | <div class="rounded text">Image resolution can also be applied to a background-image. This can be used as an alternative to the custom mPDF style property - \'background-image-resize\'</div> | ||
425 | |||
426 | <p class="code"><div height="300px" width="300px" style="background: #FFCCEE url(tiger300px96dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;"></p> | ||
427 | <div height="300px" width="300px" style="background: #FFCCEE url(tiger300px96dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;">Hallo<br />world | ||
428 | </div> | ||
429 | |||
430 | <br /> | ||
431 | |||
432 | <p class="code"><div height="300px" width="300px" style="background-image: url(tiger300px300dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;"></p> | ||
433 | <div height="300px" width="300px" style="background-image: url(tiger300px300dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;"> | ||
434 | </div> | ||
435 | |||
436 | |||
437 | |||
438 | <br /> | ||
439 | |||
440 | |||
441 | <pagebreak /> | ||
442 | |||
443 | |||
444 | |||
445 | <div style="font-family: Arial; font-size: 18pt; color: rgb(49,124,209)">Mixed effects</div> | ||
446 | |||
447 | |||
448 | <div style="padding: 15px; background: url(flowers-pattern.jpg) repeat right; border-radius: 90px;background-color: #00f200 ; "> | ||
449 | <div style="padding: 15px; background: -moz-linear-gradient(top right, red, orange, yellow, green, blue, indigo, violet); border-radius: 75px; "> | ||
450 | <div style="padding: 15px; background-gradient: linear #07cdde #00f200 0 0 0.5 1; border-radius: 60px; "> | ||
451 | <div style="padding: 15px; background: url(flowers-pattern.jpg) repeat right; border-radius: 45px; background-image-resolution: 180dpi; "> | ||
452 | <div style="padding: 15px; background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); border-radius: 30px; "> | ||
453 | <div style="padding: 15px; background: url(alpha3.png) repeat top left; border-radius: 15px; background-image-resolution: 180dpi; "> | ||
454 | Hallo World | ||
455 | </div> | ||
456 | <div style="padding: 15px; background: url(alpha3.png) repeat top left; border-radius: 15px; background-image-resolution: 360dpi; "> | ||
457 | Hallo World | ||
458 | </div> | ||
459 | </div> | ||
460 | </div> | ||
461 | </div> | ||
462 | </div> | ||
463 | </div> | ||
464 | |||
465 | <br /> | ||
466 | |||
467 | <div style="background-color:#FF0000 ; width:180px; background-image: -moz-radial-gradient(center, ellipse closest-side, rgba(255,255,255,1), rgba(255,255,255,1) 70%, rgba(255,255,255,0) 90%, rgba(255,255,255,0));"> | ||
468 | <img src="tux.svg" width="180" /> | ||
469 | </div> | ||
470 | |||
471 | '; | ||
472 | |||
473 | //============================================================== | ||
474 | if ($_REQUEST['html']) { echo $html; exit; } | ||
475 | if ($_REQUEST['source']) { | ||
476 | $file = __FILE__; | ||
477 | header("Content-Type: text/plain"); | ||
478 | header("Content-Length: ". filesize($file)); | ||
479 | header("Content-Disposition: attachment; filename='".$file."'"); | ||
480 | readfile($file); | ||
481 | exit; | ||
482 | } | ||
483 | //============================================================== | ||
484 | $mpdf->WriteHTML($html); | ||
485 | |||
486 | //============================================================== | ||
487 | //============================================================== | ||
488 | // OUTPUT | ||
489 | $mpdf->Output(); exit; | ||
490 | |||
491 | |||
492 | //============================================================== | ||
493 | //============================================================== | ||
494 | //============================================================== | ||
495 | //============================================================== | ||
496 | |||
497 | |||
498 | ?> \ No newline at end of file | ||