aboutsummaryrefslogtreecommitdiffhomepage
path: root/inc/3rdparty/libraries/mpdf/examples/example54_new_mPDF_v5-1_features_gradients_and_images.php
diff options
context:
space:
mode:
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.php498
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
4include("../mpdf.php");
5
6$mpdf=new mPDF('');
7
8//==============================================================
9$html = '
10<style>
11body {
12 font-family: sans-serif;
13 font-size: 10pt;
14}
15h4 {
16 font-variant: small-caps;
17}
18h5 {
19 margin-bottom: 0;
20 color: #110044;
21}
22p { margin-top: 0; }
23dl {
24 margin: 0;
25}
26table {
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}
50tr.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}
58tfoot 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}
75div.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 &lt;TR&gt; and &lt;TABLE&gt;</li>
98<li>CSS border on &lt;TR&gt; (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 &lt;IMG&gt; (similar to existing custom mPDF attribute: rotate)</li>
116<li>CSS3 image-resolution supported for &lt;IMG&gt;</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) &rarr; &rarr; &rarr; &rarr; &rarr; <annotation file="tiger.jpg" content="This is a file attachment (embedded file)
121Double-click to open attached file
122Right-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&nbsp;</td>
161<td>&nbsp;</td>
162<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(top right 210deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
166<td>&nbsp;</td>
167<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(30% 80% 60deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
171<td>&nbsp;</td>
172<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(10px 40px 325deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
176<td>&nbsp;</td>
177<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(bottom left 135deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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>&nbsp;</td>
188<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(bottom right, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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>&nbsp;</td>
193<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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>&nbsp;</td>
198<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(10px 40px, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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>&nbsp;</td>
203<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(30% 10%, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
214<td>&nbsp;</td>
215<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
219<td>&nbsp;</td>
220<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(120deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
224<td>&nbsp;</td>
225<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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&nbsp;</td>
229<td>&nbsp;</td>
230<td style="height: 25mm; width: 10mm; background-image: -moz-linear-gradient(210deg, red, orange, yellow, green, blue, indigo, violet);">&nbsp;</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">
249background: #999999; /* for non-css3 browsers */<br />
250filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\'); /* for IE */<br />
251background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000)); /* for webkit browsers */<br />
252background: -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">
287background: repeating-linear-gradient(red, blue 20px, red 40px);
288<br /> <br />
289background: -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);">&nbsp;</div>
293
294<div style="float: left; width: 250px; height: 150px; background: repeating-linear-gradient(red, blue 20px, red 40px);">&nbsp;</div>
295<br style="clear: both;" />
296<br />
297<br />
298
299<p class="code">
300background: repeating-radial-gradient(20px 30px, circle farthest-side, red, yellow, green 10px, yellow 15px, red 20px);
301<br /> <br />
302background: 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);">&nbsp;</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);">&nbsp;</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;
316border-radius: 155px / 100px;
317-moz-border-radius: 155px / 100px;
318box-shadow: 10px 10px 25px #CCC;
319-moz-box-shadow: 5px 5px 25px #CCC;
320background-image: -moz-radial-gradient(70% 30%, ellipse , #ffffff 0%, #F56991 50%, #8A2624 100%);">&nbsp;</div>
321
322
323<div style="float: left; width: 150px; height: 150px; padding: 15px; background: #F56991; color: #E8F3F8;
324border-radius: 100px;
325-moz-border-radius: 100px;
326box-shadow: 10px 10px 25px #CCC;
327-moz-box-shadow: 5px 5px 25px #CCC;
328background-image: -moz-radial-gradient(70% 30%, circle , #ffffff 0%, #E56991 50%, #8A2624 100%);">&nbsp;</div>
329<br style="clear: both;" />
330
331
332<div style="float: right; width: 150px; height: 150px; border: 0.2mm solid black;
333background: radial-gradient(bottom left, farthest-side, red, blue 50px, pink);
334background-image: -moz-radial-gradient(red, yellow, #1E90FF);
335background: -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)));">&nbsp;</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%);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</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);">&nbsp;</div>
348<br style="clear: both;" />
349
350
351<p style="background-image: -moz-radial-gradient(center , red, orange, yellow, green, blue, indigo, violet);">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</p>
352
353<p style="background-image: -moz-radial-gradient(center , circle closest-side, blue 0%, red 100%);">&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;<br />&nbsp;</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">&lt;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));" /&gt;
366<br /><br />&lt;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));" /&gt;
367<br /><br />&lt;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%);" /&gt;
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">&lt;img src="tiger2.png" style="image-orientation: -90deg" width="100" /&gt;
386<br />
387&lt;img src="tiger2.png" style="image-orientation: 3.14159rad" width="100" /&gt;
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 &lt;IMG&gt; or background-images.
406<br />
407The 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 />
409NB 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">&lt;img src="tiger300px300dpi.png" style="image-resolution: from-image;" /&gt;
412<br />&lt;img src="tiger300px300dpi.png" style="image-resolution: 150dpi;" /&gt;
413<br />&lt;img src="tiger300px96dpi.png" style="image-resolution: from-image;" /&gt;</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">&lt;div height="300px" width="300px" style="background: #FFCCEE url(tiger300px96dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;"&gt;</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">&lt;div height="300px" width="300px" style="background-image: url(tiger300px300dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;"&gt;</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; ">
454Hallo World
455</div>
456<div style="padding: 15px; background: url(alpha3.png) repeat top left; border-radius: 15px; background-image-resolution: 360dpi; ">
457Hallo 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//==============================================================
474if ($_REQUEST['html']) { echo $html; exit; }
475if ($_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
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 02:25:50 +0000