Swatch:swatch sample
From CSS Swatches
class name: .swatch_sample
author: tatwell
added: 8 Sep 2006
This is the swatch intended to be used in displaying any sample stylesheet code on this wiki. (To display html code, please see the modern code swatch.) It is based on the .ipod class designed by tatwell and first introduced on his blog.[1] Please apply this swatch inline to any sample css code your present on this site. You can use the following template:
<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name { STYLE RULES HERE } </div>
To display code with indentation or other more advanced formatting may require the use of <nowiki> tags in order to disable wiki auto-formatting:
<div style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> .swatch_name <nowiki>{ STYLE RULES INDENTED }</nowiki> </div>
This page also marks the first swatch sample page and serves as a model for other pages.
Contents |
[edit] syntax
[edit] declaration block
.swatch_sample { margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:"Lucida Console",Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ _white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */ }
[edit] inline
style="margin-bottom:0px; padding:0 1em; background:#ddeeff; color:#333399; font-family:'Lucida Console',Monaco,monospace; font-size:.9em; font-weight:normal; border:1px solid #333399; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"
[edit] sample
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
