Amelia Marschall-MillerGravity Works Design + DevelopmentADVANCED CSS IN DOTNETNUKE
1.[Advanced Selectors]
Advanced Attribute Selectorsl  rel= match the following attribute value exactlyl  Target links:     –  a[href="http://do...
Advanced Attribute Selectorsl  rel*= match the following value found anywhere in    the attributel  Target external link...
Advanced Attribute Selectorsl  rel$= match the attribute value that ends with thisl  Target file extensions:     –  a[hr...
Advanced Attribute Selectorsl  Note that you can use multiple attribute selectors in    the same selector, which requires...
Advanced Pseudo Selectorsl  input[type=“radio”]:checked { color: red; }l  div:not(#container) { color: blue; }!l  p::fi...
Advanced Child Selectorsl  Target a specific list item:     –  li:nth-child(3) { color: red; } !l  Target every nth item...
2.Box Shadow  Spread
Box Shadow Spreadl  4th Box Shadow property:     –  box-shadow: 0 0 6px 10px #000;!l  Fake multiple bordersl  Negative ...
3.Ellipse Containers
Ellipse Containersl  Set border-radius:50%; for a flexible ellipse.l  Perfect for containers!l  EXAMPLESupport:  4+    ...
4.CSS 3 Cursors
CSS3 Cursorsl  NEW available custom cursor: propertiesl  EXAMPLESupport:        *                           *         * ...
5.Pointer Events
Pointer Events (click behind!)l  pointer-events:none; !l  Allows elements below the set div to be clicked onl  EXAMPLES...
6.Transitions
Transitionsl  transition-property: The CSS property that will be    alteredl  transition-duration: How long the transiti...
Transitionsl  CSS properties that can be transitioned:     –  Background color         –  Opacity     –  Background posit...
Transitionsl  transition-timing-function: Property options:     –  linear: Constant speed     –  ease: Gradual slow down ...
Transitionsl  Put the transition properties on the original elementl  Put the desired change properties on the action el...
Transitionsl  Can transition multiple CSS properties at oncel  Use browser prefixesl  EXAMPLE 1      EXAMPLE 2l  leave...
7.CSS Arrows
CSS Arrowsl  Rotate a square div placed before an element to create    an arrow coming out of itl  .comment .text:before...
8.Background Patterns
Background Patternsl  Adjust the percentage of the color stop    in a linear gradient for thinner stripesl  Use backgrou...
Background Patternsl  Two diagonal repeating gradients    makes a checkerboard patternl  Checkerboard Examplel  backgro...
Background Patternsl  A diagonal gradient with a single color stop    creates a trianglel  Four positioned triangles rep...
Background Patternsl  CSS Pattern Gallery: lea.verou.me/css3patternsSupport (with browser prefixes): 3.6+                ...
9.Beautiful Buttons
Beautiful Buttonsl  EXAMPLEl  Add a slide out detail on :hover!     –  Increase right padding of button     –  Change wi...
10.Prefix Free CSS
Prefix Free CSSl  “-prefix-free lets you use only unprefixed CSS    properties everywhere. It works behind the scenes,   ...
Questions?Amelia Marschall-MillerGravity Works Design + DevelopmentPartner & Creative DirectorGravityWorksDesign.com     @...
Upcoming SlideShare
Loading in …5
×

DotNetNuke World CSS3

1,527 views
1,441 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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,527
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×