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