SlideShare a Scribd company logo

DotNetNuke World CSS3

•
•
G
gravityworksdd

The document provides an overview of advanced CSS techniques, including: - Advanced CSS selectors like attribute selectors to target specific links, forms, and images. - Box shadow spread to create the effect of multiple borders. - Using border-radius to create flexible ellipse containers. - CSS3 cursor properties, pointer events, transitions, and CSS arrows. - Background patterns using gradients, and beautiful button styles using hover interactions and transitions. - The Prefix Free CSS library to write CSS properties without vendor prefixes. Support levels and browser compatibility are provided for each technique. The document aims to teach advanced styling options in CSS.

Related slideshows

Simplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and NibSimplify your CSS with Stylus and Nib
Simplify your CSS with Stylus and Nib
 
Css3
Css3Css3
Css3
 
Precise Android Text Drawing
Precise Android Text DrawingPrecise Android Text Drawing
Precise Android Text Drawing
 
1 of 34
Download to read offline
Amelia Marschall-Miller Gravity Works Design + Development ADVANCED CSS IN DOTNETNUKE
1. [Advanced Selectors]
Advanced Attribute Selectors l  rel= match the following attribute value exactly l  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; }!
Advanced Attribute Selectors l  rel*= match the following value found anywhere in the attribute l  Target external links only: –  a[rel*="external"] { color: red; }! l  rel^= match the attribute value that starts with this l  Target any link within a domain: –  a[href^=”http://wikipedia.com"] { color: red; }!
Advanced Attribute Selectors l  rel$= match the attribute value that ends with this l  Target file extensions: –  a[href$=".pdf"] { 
 background: url(icon-pdf.png) left; }! –  a[href$=".doc"] { 
 background: url(icon-doc.png) left; }! !
Advanced Attribute Selectors l  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+
Advanced Pseudo Selectors l  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
Advanced Child Selectors l  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+
2. Box Shadow Spread
Box Shadow Spread l  4th Box Shadow property: –  box-shadow: 0 0 6px 10px #000;! l  Fake multiple borders l  Negative spread prevents blurry sides: –  box-shadow: 0 15px 15px -12px #222;! l  EXAMPLES Support: 4+ 9+
3. Ellipse Containers
Ellipse Containers l  Set border-radius:50%; for a flexible ellipse. l  Perfect for containers! l  EXAMPLE Support: 4+ 9+ 11+
4. CSS 3 Cursors
CSS3 Cursors l  NEW available custom cursor: properties l  EXAMPLE Support: * * * *Not all options supported
5. Pointer Events
Pointer Events (click behind!) l  pointer-events:none; ! l  Allows elements below the set div to be clicked on l  EXAMPLE Support: 3.6+
6. Transitions
Transitions l  transition-property: The CSS property that will be altered l  transition-duration: How long the transition will take (2s) l  transition-timing-function: Control how the duration is timed l  transition-delay: Length of pause between action and transition (2s)
Transitions l  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”
Transitions l  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
Transitions l  Put the transition properties on the original element l  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; }!
Transitions l  Can transition multiple CSS properties at once l  Use browser prefixes l  EXAMPLE 1 EXAMPLE 2 l  leaverou.github.com/animatable l  cubic-bezier.com / roblaplaca.com/examples/bezierBuilder Support: 4+ 10+ 10.5+
7. CSS Arrows
CSS Arrows l  Rotate a square div placed before an element to create an arrow coming out of it l  .comment .text:before { 
 transform: rotate(45deg); } l  EXAMPLE l  Alternate technique: http://cssarrowplease.com! Support (CSS Transform): 9+
8. Background Patterns
Background Patterns l  Adjust the percentage of the color stop in a linear gradient for thinner stripes l  Use background-size to repeat gradient l  Rotate issue: 0deg: –  WC3 Recommendation: repeat top-bottom –  Prefixed browser implementation: repeat left-right l  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
Background Patterns l  Two diagonal repeating gradients makes a checkerboard pattern l  Checkerboard Example l  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;!
Background Patterns l  A diagonal gradient with a single color stop creates a triangle l  Four positioned triangles repeated creates a zig zag l  Zig Zag Example l  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; !
Background Patterns l  CSS Pattern Gallery: lea.verou.me/css3patterns Support (with browser prefixes): 3.6+ 5.1+ 11.1+ Support (without browser prefixes): 16 10
9. Beautiful Buttons
Beautiful Buttons l  EXAMPLE l  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;!
10. Prefix Free CSS
Prefix Free CSS l  “-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/prefixfree Support: 3.5+ 4+ 9+ 10+
Questions? Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director GravityWorksDesign.com @MimiAmelia

More Related Content

DotNetNuke World CSS3

  • 1. Amelia Marschall-Miller Gravity Works Design + Development ADVANCED CSS IN DOTNETNUKE
  • 3. Advanced Attribute Selectors l  rel= match the following attribute value exactly l  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. Advanced Attribute Selectors l  rel*= match the following value found anywhere in the attribute l  Target external links only: –  a[rel*="external"] { color: red; }! l  rel^= match the attribute value that starts with this l  Target any link within a domain: –  a[href^=”http://wikipedia.com"] { color: red; }!
  • 5. Advanced Attribute Selectors l  rel$= match the attribute value that ends with this l  Target file extensions: –  a[href$=".pdf"] { 
 background: url(icon-pdf.png) left; }! –  a[href$=".doc"] { 
 background: url(icon-doc.png) left; }! !
  • 6. Advanced Attribute Selectors l  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 Selectors l  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 Selectors l  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 Spread l  4th Box Shadow property: –  box-shadow: 0 0 6px 10px #000;! l  Fake multiple borders l  Negative spread prevents blurry sides: –  box-shadow: 0 15px 15px -12px #222;! l  EXAMPLES Support: 4+ 9+
  • 12. Ellipse Containers l  Set border-radius:50%; for a flexible ellipse. l  Perfect for containers! l  EXAMPLE Support: 4+ 9+ 11+
  • 14. CSS3 Cursors l  NEW available custom cursor: properties l  EXAMPLE Support: * * * *Not all options supported
  • 16. Pointer Events (click behind!) l  pointer-events:none; ! l  Allows elements below the set div to be clicked on l  EXAMPLE Support: 3.6+
  • 18. Transitions l  transition-property: The CSS property that will be altered l  transition-duration: How long the transition will take (2s) l  transition-timing-function: Control how the duration is timed l  transition-delay: Length of pause between action and transition (2s)
  • 19. Transitions l  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. Transitions l  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. Transitions l  Put the transition properties on the original element l  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. Transitions l  Can transition multiple CSS properties at once l  Use browser prefixes l  EXAMPLE 1 EXAMPLE 2 l  leaverou.github.com/animatable l  cubic-bezier.com / roblaplaca.com/examples/bezierBuilder Support: 4+ 10+ 10.5+
  • 24. CSS Arrows l  Rotate a square div placed before an element to create an arrow coming out of it l  .comment .text:before { 
 transform: rotate(45deg); } l  EXAMPLE l  Alternate technique: http://cssarrowplease.com! Support (CSS Transform): 9+
  • 26. Background Patterns l  Adjust the percentage of the color stop in a linear gradient for thinner stripes l  Use background-size to repeat gradient l  Rotate issue: 0deg: –  WC3 Recommendation: repeat top-bottom –  Prefixed browser implementation: repeat left-right l  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 Patterns l  Two diagonal repeating gradients makes a checkerboard pattern l  Checkerboard Example l  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 Patterns l  A diagonal gradient with a single color stop creates a triangle l  Four positioned triangles repeated creates a zig zag l  Zig Zag Example l  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. Background Patterns l  CSS Pattern Gallery: lea.verou.me/css3patterns Support (with browser prefixes): 3.6+ 5.1+ 11.1+ Support (without browser prefixes): 16 10
  • 31. Beautiful Buttons l  EXAMPLE l  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;!
  • 33. Prefix Free CSS l  “-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/prefixfree Support: 3.5+ 4+ 9+ 10+
  • 34. Questions? Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director GravityWorksDesign.com @MimiAmelia