ଛାଞ୍ଚ:Gradient/testcases
This is the template test case page for the sandbox of ଛାଞ୍ଚ:Gradient. to update the examples. If there are many examples of a complicated template, later ones may break due to limits in MediaWiki, see the HTML comment "NewPP limit report" in the rendered page. You can test how this page looks in the different skins with these links: |
Horizontal ସମ୍ପାଦନା
{{gradient/sandbox|#ffdddd|#ddddff|horizontal}}
Output: background-color: #ffdddd; background-image: -moz-linear-gradient(left, #ffdddd, #ddddff); background-image: -ms-linear-gradient(left, #ffdddd, #ddddff); background-image: -o-linear-gradient(left, #ffdddd, #ddddff); background-image: -webkit-gradient(linear, left top, right top, from(#ffdddd), to(#ddddff)); -pie-background: linear-gradient(left, #ffdddd, #ddddff);
With color-stop ସମ୍ପାଦନା
{{gradient/sandbox|#ffdddd|#ddddff|horizontal|#ddffdd|50%}}
Output: background-color: #ffdddd; background-image: -moz-linear-gradient(left, #ffdddd, #ddffdd 50%, #ddddff); background-image: -ms-linear-gradient(left, #ffdddd, #ddffdd 50%, #ddddff); background-image: -o-linear-gradient(left, #ffdddd, #ddffdd 50%, #ddddff); background-image: -webkit-gradient(linear, left top, right top, from(#ffdddd), to(#ddddff), color-stop(50%, #ddffdd)); -pie-background: linear-gradient(left, #ffdddd, #ddffdd 50%, #ddddff);
Vertical ସମ୍ପାଦନା
{{gradient/sandbox|#ffdddd|#ddddff|vertical}}
Output: background-color: #ffdddd; background-image: -moz-linear-gradient(top, #ffdddd, #ddddff); background-image: -ms-linear-gradient(top, #ffdddd, #ddddff); background-image: -o-linear-gradient(top, #ffdddd, #ddddff); background-image: -webkit-gradient(linear, left top, left bottom, from(#ffdddd), to(#ddddff)); -pie-background: linear-gradient(top, #ffdddd, #ddddff);
Reverse ସମ୍ପାଦନା
{{gradient/sandbox|#ffdddd|#ddddff|right}}
Output: background-color: #ffdddd; background-image: -moz-linear-gradient(right, #ffdddd, #ddddff); background-image: -ms-linear-gradient(right, #ffdddd, #ddddff); background-image: -o-linear-gradient(right, #ffdddd, #ddddff); background-image: -webkit-gradient(linear, right bottom, left bottom, from(#ffdddd), to(#ddddff)); -pie-background: linear-gradient(right, #ffdddd, #ddddff);
{{gradient/sandbox|#ffdddd|#ddddff|bottom}}
Output: background-color: #ffdddd; background-image: -moz-linear-gradient(bottom, #ffdddd, #ddddff); background-image: -ms-linear-gradient(bottom, #ffdddd, #ddddff); background-image: -o-linear-gradient(bottom, #ffdddd, #ddddff); background-image: -webkit-gradient(linear, right bottom, right top, from(#ffdddd), to(#ddddff)); -pie-background: linear-gradient(bottom, #ffdddd, #ddddff);
Needs work, navbox leaks gradient to navbar, but it shows what can be done.