/* * Examples borrowed from MSDN's "Visual Filters and Transitions Reference" * at http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx */ /* You can assign multiple filters at once. */ p { width:100%; filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); } /* ************************** Procedural Surfaces ************************** */ /* =========================== AlphaImageLoader ============================ */ p { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/workshop/graphics/earglobe.gif', sizingMethod='scale'); } /* ================================ Gradient =============================== */ p { filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#550000FF, endColorstr=#55FFFF00) } /* ***************************** Static Filters **************************** */ /* ================================= Alpha ================================= */ INPUT.aFilter {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);} /* =============================== BasicImage ============================== */ a { filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1) } b { filter: progid:DXImageTransform.Microsoft.BasicImage(invert=1) } i { filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1) } p { filter: progid:DXImageTransform.Microsoft.BasicImage(xray=1) } q { filter: progid:DXImageTransform.Microsoft.BasicImage(mask=1, maskColor=255)} /* ================================== Blur ================================= */ p{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled='false')} /* ================================= Chroma ================================ */ p { filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow'), progid:DXImageTransform.Microsoft.Chroma(color='red') } /* =============================== Compositor ============================== */ /* N/A */ /* =============================== DropShadow ============================== */ p { cursor:hand;height:160px; padding:10px; font:bold 13pt verdana; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true') } /* ================================= Emboss ================================ */ p { filter: progid:DXImageTransform.Microsoft.emboss(enabled='false') } /* ================================ Engrave ================================ */ p { position:absolute; left:270px; filter:progid:DXImageTransform.Microsoft.engrave(enabled='false'); } /* ================================== Glow ================================= */ DIV.aFilter { filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5); width: 150px;} /* =============================== ICMFilter =============================== */ /* NONE */ /* ================================= Light ================================= */ .aFilter { filter:progid:DXImageTransform.Microsoft.Light(); } /* =============================== MaskFilter ============================== */ DIV.aFilter {filter: progid:DXImageTransform.Microsoft.MaskFilter(color=magenta); width: 100px;} /* ================================= Matrix ================================ */ p { filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')} /* =============================== MotionBlur ============================== */ DIV.aFilter { filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=45); } /* ================================= Shadow ================================ */ DIV.aFilter {filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45); width: 150px; color: #FF0000;} /* ================================== Wave ================================= */ DIV.aFilter {FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.WAVE( strength=2, freq=3, lightstrength=20, add=0, phase=90); width: 150px; color: #FF0000;background-color:00ffff} /* ================================== Barn ================================= */ p { height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Barn( duration=2, motion='out', orientation='vertical'); } /* ****************************** Transitions ****************************** */ /* ================================= Blinds ================================ */ body { filter:progid:DXImageTransform.Microsoft.Blinds(direction='down') } /* ============================== CheckerBoard ============================= */ p { filter:progid:DXImageTransform.Microsoft.CheckerBoard( duration=5, direction='left') } /* ================================== Fade ================================= */ p { height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Fade( duration=2) } /* ============================== GradientWipe ============================= */ p { filter:progid:DXImageTransform.Microsoft.gradientWipe( duration=3, gradientsize=0.5) } /* ================================= Inset ================================= */ p { filter:progid:DXImageTransform.Microsoft.Inset( ) } /* ================================== Iris ================================= */ p{filter:progid:DXImageTransform.Microsoft.Iris(duration=3)} /* ================================ Pixelate =============================== */ p { width:100px; background-color: lightblue; filter:progid:DXImageTransform.Microsoft.Pixelate( duration=3, enabled='false'); } /* =============================== RadialWipe ============================== */ a { filter:progid:DXImageTransform.Microsoft.RadialWipe(duration=2); } /* =============================== RandomBars ============================== */ img { filter:progid:DXImageTransform.Microsoft.RandomBars(duration=5);} /* ============================= RandomDissolve ============================ */ u { height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=3); } /* ================================= Slide ================================= */ table { height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Slide( duration=3, bands='8'); } /* ================================= Spiral ================================ */ div { filter:progid:DXImageTransform.Microsoft.Spiral( duration=3, GridSizeX=25, GridSizeY=25); } /* ================================ Stretch ================================ */ b { height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Stretch(duration=3) } /* ================================= Strips ================================ */ i { filter:progid:DXImageTransform.Microsoft.Strips( duration=5, motion='rightdown'); } /* ================================= Wheel ================================= */ hr { filter:progid:DXImageTransform.Microsoft.Wheel( duration=2, spokes=8); } /* ================================= Zigzag ================================ */ object { filter:progid:DXImageTransform.Microsoft.Zigzag( duration=3, GridSizeX=25, GridSizeY=25); } /* Paragraphs are red on IE6 and IE7 and blue on other supported browsers. */ p { color: blue; color: red; background-color: #fff } ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE { display: block } LI { display: list-item } HEAD { display: none } TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption } TH { font-weight: bolder; text-align: center } CAPTION { text-align: center } BODY { padding: 8px; line-height: 1.33 } H1 { font-size: 2em; margin: .67em 0 } H2 { font-size: 1.5em; margin: .83em 0 } H3 { font-size: 1.17em; margin: 1em 0 } H4, P, BLOCKQUOTE, UL, FIELDSET, FORM, OL, DL, DIR, MENU { margin: 1.33em 0 } H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 } H6 { font-size: .67em; margin: 2.33em 0 } H1, H2, H3, H4, H5, H6, B, STRONG { font-weight: bolder } BLOCKQUOTE { margin-left: 40px; margin-right: 40px } I, CITE, EM, VAR, ADDRESS { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } BIG { font-size: 1.17em } SMALL, SUB, SUP { font-size: .83em } SUB { vertical-align: sub } SUP { vertical-align: super } S, STRIKE, DEL { text-decoration: line-through } HR { border: 1px inset } OL, UL, DIR, MENU, DD { margin-left: 40px } OL { list-style-type: decimal } OL UL, UL OL, UL UL, OL OL { margin-top: 0; margin-bottom: 0 } U, INS { text-decoration: underline } CENTER { text-align: center } BR:before { content: "\A" } COLOR_NOHASH { color:987E81 } /* An example of style for HTML 4.0's ABBR/ACRONYM elements */ ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em } A[href] { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } /* Elements that are block-level in HTML4 */ ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME, NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER, DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT, COL, COLGROUP, TD, TH, CAPTION { unicode-bidi: embed } /* End bidi settings */ @media print { /* @page { margin: 10% } */ /* not allowed according to spec */ H1, H2, H3, H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid } BLOCKQUOTE, PRE { page-break-inside: avoid } UL, OL, DL { page-break-before: avoid } } @media speech { H1, H2, H3, H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 } H1 { pitch: x-low; pitch-range: 90 } H2 { pitch: x-low; pitch-range: 80 } H3 { pitch: low; pitch-range: 70 } H4 { pitch: medium; pitch-range: 60 } H5 { pitch: medium; pitch-range: 50 } H6 { pitch: medium; pitch-range: 40 } LI, DT, DD { pitch: medium; richness: 60 } DT { stress: 80 } PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 } EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } DFN { pitch: high; pitch-range: 60; stress: 60 } S, STRIKE { richness: 0 } I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 } B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 } U { richness: 0 } A:link { voice-family: harry, male } A:visited { voice-family: betty, female } A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high } } @import url('nonsense.css') mumbling, blather; @font-face { font-family: Arial; } @page { background: url('sparkley.jpg'); } @page hiya:sparkley { background: url('sparkley.jpg') } FOO > BAR + BAZ { } A[href] BOO[zwop |= 'hello']:blinky { color: #fff; background: +#000000 ! important } .myclass[attr ~= almost] #id:hover(languidly) { font-weight: super(bold / italic) } /* The RHS of the attribute comparison operator in the following cases * will parse to a StringLiteral since it is surrounded by quotes. */ foo[attr = 'bar'] {} foo[attr = "bar"] {} foo[attr ~= 'bar baz'] {} foo[attr |= 'bar-baz'] {} /* The RHS of the attribute comparison operator in the following cases * will parse to an IdentLiteral since it is unquoted. */ foo[attr = bar] {} foo[attr |= bar-baz] {} foo.bar { } foo .bar { } foo .quoted { content: 'contains \'quotes\'' } foo .dquoted { content: "'contains'\\\"double quotes\"" } foo .long { content: 'spans \ multiple \ lines' } foo .extended-unicode { content: 'a1 \61\31 \0000611 \000061 1 \0061\0031' } /* CSS 2.1 allows _ in identifiers */ #a_b {} .a_b {} #xxx { filter:alpha(opacity=50); } p { margin: -3px -3px } p { margin: -3px 3px } @bogus hello { balanced { curly : "brackets" } } @media aural { b { volume: s-loud } } /* not thrown out, but 2 digit color is discarded */ @media print { * { color: black !important; background-color: #ff } } a:visited, :unvisited, a::before { color: blue } /* expression cruft. Make sure parsing before and after ok. */ a1 { a: ok; color: red:; a: ok } /* cruft after : */ a2 { a: ok; width: 0 !import; a: ok } /* !important misspelled */ a3 { a: ok; unicode-range: U+0-FFFF; a: ok } /* ok */ a4 { a: ok; color: #g00; a: ok } /* bad hex digit */ a5 { a: ok; image: url('::'); a: ok } /* malformed URI */ a6 { a: ok; image: url(::); a: ok } /* malformed URI */