body { font-family: sans-serif; font-size: 10pt; } h4 { font-variant: small-caps; } h5 { margin-bottom: 0; color: #110044; } p { margin-top: 0; } dl { margin: 0; } table { border-spacing: 0.5em; border: 7px dashed teal; } .table1 { background-image: -moz-linear-gradient(left, #07cdde 20%, #00f200 ); } .table1 tr.thisrow1 { background-image-resolution: 300dpi; background: transparent url(\'bayeux1.jpg\') repeat scroll left top; } .table1 tr.thisrow1 td { height: 28mm; } .table1 tr.thisrow2 { background-image: none; background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 ); 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))); } .table3 { border-collapse: collapse; /* background-gradient: linear #07cdde #00f200 1 0 0.5 1; */ background: -moz-linear-gradient(left, #07cdde 20%, #00f200 ); } tr.thisrow { border: 3px dashed red; background: transparent url(\'bayeux1.jpg\') repeat scroll left top; } .table3 tr.thisrow { border: 3px dashed orange; background: transparent url(\'bgrock.jpg\') repeat scroll left top; } tfoot tr { border: 5px dashed blue; /* background-gradient: linear #c7Fdde #FF0000 1 0 0.5 0; */ background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 ); } .gradient { border:0.1mm solid #220044; background-color: #f0f2ff; background: linear-gradient(top, #c7cdde, #f0f2ff); } .rounded { border:0.1mm solid #220044; background-color: #f0f2ff; background: linear-gradient(top, #c7cdde, #f0f2ff); border-radius: 2mm; background-clip: border-box; } div.text { padding:1em; margin: 1em 0; text-align:justify; } .code { font-family: mono; font-size: 9pt; background-color: #d5d5d5; margin: 1em 1cm; padding: 0 0.3cm; }
Row 1 | This is data | This is data |
This row has | a background-image | of the bayeux tapestry |
Row 3 | This is long data | This is data |
This row has | a gradient set | which spans all 3 cells |
Row 5 | Also data | Also data |
Row 1 | This is data | This is data |
Row 2 | This is data This is data This is data This is data | Also data |
Row 3 | This is long data | This is data |
top right 210 degrees | ||
30% 80% 60 degrees | ||
10px 40px 325 degrees | ||
bottom left 135deg |
bottom right | ||
top | ||
10px 40px | ||
30% 10% |
90 degrees | ||
120 degrees | ||
180 degrees | ||
210 degrees |
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.
Mozilla (Firefox) has developed its own way of producing gradients, which approximates to the CSS3 draft specification:
WebKit (Safari, Chrome etc.) have a separate way of defining gradients using -webkit-gradient
Microsoft (IE) does not support any such method of specifying gradients, but does have a function filter: progid:DXImageTransform.Microsoft.gradient()
When writing HTML for cross-browser compatibility, it is common to see something like this in a stylesheet:
background: #999999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#cccccc\', endColorstr=\'#000000\'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #cccccc, #000000); /* for firefox 3.6+ */
mPDF versions <= 5.0 supported a custom style property background-gradient 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:
mPDF will attempt to parse a CSS stylesheet written for cross-browser compatibility:
More details can be found at:
background: repeating-linear-gradient(red, blue 20px, red 40px);
background: -moz-repeating-linear-gradient(top left -45deg, red, red 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px);
background: repeating-radial-gradient(20px 30px, circle farthest-side, red, yellow, green 10px, yellow 15px, red 20px);
background: repeating-radial-gradient(red, blue 20px, red 40px);
<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));" />
<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));" />
<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%);" />
<img src="tiger2.png" style="image-orientation: -90deg" width="100" />
<img src="tiger2.png" style="image-orientation: 3.14159rad" width="100" />
<img src="tiger300px300dpi.png" style="image-resolution: from-image;" />
<img src="tiger300px300dpi.png" style="image-resolution: 150dpi;" />
<img src="tiger300px96dpi.png" style="image-resolution: from-image;" />
<div height="300px" width="300px" style="background: #FFCCEE url(tiger300px96dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;">
<div height="300px" width="300px" style="background-image: url(tiger300px300dpi.png); background-image-resolution: from-image; border: 0.2mm solid black;">