DotNetNuke World CSS3

download DotNetNuke World CSS3

of 34

  • date post

  • Category


  • view

  • download


Embed Size (px)


Most designers and front-end developers know how to use CSS 3 features on their DotNetNuke websites. From rounded corners to media queries, CSS 3 is now widely used, but there are many additional useful CSS features you may not be aware of. We will discuss some lesser-known CSS properties—both decorative and functional—and demonstrate how to best integrate them into your skins, containers, and modules.

Transcript of DotNetNuke World CSS3

  • 1. Amelia Marschall-MillerGravity Works Design + DevelopmentADVANCED CSS IN DOTNETNUKE
  • 2. 1.[Advanced Selectors]
  • 3. Advanced Attribute Selectorsl rel= match the following attribute value exactlyl Target links: a[href=""] { color: red; }!l Target form input types: input[type="text"] { padding: 3px; } ! input[type="radio"] { float: left; }!l Target images: img[align=right] { margin-left:10px; }!
  • 4. Advanced Attribute Selectorsl rel*= match the following value found anywhere in the attributel Target external links only: a[rel*="external"] { color: red; }!l rel^= match the attribute value that starts with thisl Target any link within a domain: a[href^="] { color: red; }!
  • 5. Advanced Attribute Selectorsl rel$= match the attribute value that ends with thisl Target file extensions: a[href$=".pdf"] { background: url(icon-pdf.png) left; }! a[href$=".doc"] { background: url(icon-doc.png) left; }!!
  • 6. Advanced Attribute Selectorsl Note that you can use multiple attribute selectors in the same selector, which requires all of them to match for the selector itself to match. a[href$=".pdf][title^="Important"] { color: red; }!Support: 7+
  • 7. Advanced Pseudo Selectorsl input[type=radio]:checked{color:red;}l div:not(#container){ color:blue; }!l p::first-line{font-size:1.2em;}!l p::first-letter{font-size:2em; }l .container:before {content:url(icon.png);}!!Support: variable
  • 8. Advanced Child Selectorsl Target a specific list item: li:nth-child(3){color:red;}!l Target every nth item: li:nth-child(3n){color:red;}! tr:nth-child(odd) { background-color: grey;}l Target a specific list item from the end: li:nth-last-child(3){color:red;}!Support: 3.5+ 9+
  • 9. 2.Box Shadow Spread
  • 10. Box Shadow Spreadl 4th Box Shadow property: box-shadow: 0 0 6px 10px #000;!l Fake multiple bordersl Negative spread prevents blurry sides: box-shadow: 0 15px 15px -12px #222;!l EXAMPLESSupport: 4+ 9+
  • 11. 3.Ellipse Containers
  • 12. Ellipse Containersl Set border-radius:50%; for a flexible ellipse.l Perfect for containers!l EXAMPLESupport: 4+ 9+ 11+
  • 13. 4.CSS 3 Cursors
  • 14. CSS3 Cursorsl NEW available custom cursor: propertiesl EXAMPLESupport: * * * *Not all options supported
  • 15. 5.Pointer Events
  • 16. Pointer Events (click behind!)l pointer-events:none; !l Allows elements below the set div to be clicked onl EXAMPLESupport: 3.6+
  • 17. 6.Transitions
  • 18. Transitionsl transition-property: The CSS property that will be alteredl transition-duration: How long the transition will take (2s)l transition-timing-function: Control how the duration is timedl transition-delay: Length of pause between action and transition (2s)
  • 19. Transitionsl CSS properties that can be transitioned: Background color Opacity Background position Margin Border-color Padding Border width Text-shadow Color Box-shadow Font-size Line-height Font-weight Text-indent Height, Width Visibility Left, Right, Top, Bottom Z-index Transform all
  • 20. Transitionsl transition-timing-function: Property options: linear: Constant speed ease: Gradual slow down ease-in: Speed up ease-out: Slow down ease-in-out: Speed up and then slow down cubic-bezier(x1, y1, x2, y2): X and Y values defining the shape of a bezier curve the transition will follow
  • 21. Transitionsl Put the transition properties on the original elementl Put the desired change properties on the action element .object { ! color:#000;! transition-property:color; !! transition-duration:1s; !! transition-timing-function:linear; }! .object:hover { color:#fff; }!
  • 22. Transitionsl Can transition multiple CSS properties at oncel Use browser prefixesl EXAMPLE 1 EXAMPLE 2l / 4+ 10+ 10.5+
  • 23. 7.CSS Arrows
  • 24. CSS Arrowsl Rotate a square div placed before an element to create an arrow coming out of itl .comment .text:before { transform: rotate(45deg); }l EXAMPLEl Alternate technique:!Support (CSS Transform): 9+
  • 25. 8.Background Patterns
  • 26. Background Patternsl Adjust the percentage of the color stop in a linear gradient for thinner stripesl Use background-size to repeat gradientl Rotate issue: 0deg: WC3 Recommendation: repeat top-bottom Prefixed browser implementation: repeat left-rightl background: -webkit-linear-gradient(0deg, #999 25%, #ddd 25%); background: -moz-linear-gradient(0deg, #999 25%, #ddd 25%); background: linear-gradient(90deg, #999 25%, #ddd 25%); background-size: 30px 30px;!l Stripe Example
  • 27. Background Patternsl Two diagonal repeating gradients makes a checkerboard patternl Checkerboard Examplel background-color: #EEEEEE; background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-size: 60px 60px;!
  • 28. Background Patternsl A diagonal gradient with a single color stop creates a trianglel Four positioned triangles repeated creates a zig zagl Zig Zag Examplel background-color: #FFC; background: linear-gradient(135deg, #15A86D 25%, transparent 25%), linear-gradient(225deg, #15A86D 25%, transparent 25%), linear-gradient(315deg, #15A86D 25%, transparent 25%), linear-gradient(