Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

DotNetNuke World CSS3

1,806 views

Published on

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.

Published in: Technology
  • Be the first to comment

DotNetNuke World CSS3

  1. 1. Amelia Marschall-MillerGravity Works Design + DevelopmentADVANCED CSS IN DOTNETNUKE
  2. 2. 1.[Advanced Selectors]
  3. 3. Advanced Attribute Selectorsl  rel= match the following attribute value exactlyl  Target links: –  a[href="http://dotnetnuke.com"] { 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. 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^=”http://wikipedia.com"] { color: red; }!
  5. 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. 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. 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. 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. 9. 2.Box Shadow Spread
  10. 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. 11. 3.Ellipse Containers
  12. 12. Ellipse Containersl  Set border-radius:50%; for a flexible ellipse.l  Perfect for containers!l  EXAMPLESupport: 4+ 9+ 11+
  13. 13. 4.CSS 3 Cursors
  14. 14. CSS3 Cursorsl  NEW available custom cursor: propertiesl  EXAMPLESupport: * * * *Not all options supported
  15. 15. 5.Pointer Events
  16. 16. Pointer Events (click behind!)l  pointer-events:none; !l  Allows elements below the set div to be clicked onl  EXAMPLESupport: 3.6+
  17. 17. 6.Transitions
  18. 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. 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. 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. 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. 22. Transitionsl  Can transition multiple CSS properties at oncel  Use browser prefixesl  EXAMPLE 1 EXAMPLE 2l  leaverou.github.com/animatablel  cubic-bezier.com / roblaplaca.com/examples/bezierBuilderSupport: 4+ 10+ 10.5+
  23. 23. 7.CSS Arrows
  24. 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: http://cssarrowplease.com!Support (CSS Transform): 9+
  25. 25. 8.Background Patterns
  26. 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. 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. 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(45deg, #15A86D 25%, transparent 25%); 
 background-position: -40px 0, -40px 0, 0 0, 0 0; 
 background-size: 80px 80px; !
  29. 29. Background Patternsl  CSS Pattern Gallery: lea.verou.me/css3patternsSupport (with browser prefixes): 3.6+ 5.1+ 11.1+Support (without browser prefixes): 16 10
  30. 30. 9.Beautiful Buttons
  31. 31. Beautiful Buttonsl  EXAMPLEl  Add a slide out detail on :hover! –  Increase right padding of button –  Change width of the extra text span from 0px to 100px –  Animate: transition: all 0.3s linear;!
  32. 32. 10.Prefix Free CSS
  33. 33. Prefix Free CSSl  “-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.”l  leaverou.github.com/prefixfreeSupport: 3.5+ 4+ 9+ 10+
  34. 34. Questions?Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.com @MimiAmelia

×