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.

1. Amelia Marschall-Miller
Gravity Works Design + Development
ADVANCED CSS IN DOTNETNUKE

2. 1.
[Advanced
Selectors]

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+

11. 3.
Ellipse Containers

12. Ellipse Containers
l Set border-radius:50%; for a flexible ellipse.
l Perfect for containers!
l EXAMPLE
Support:
4+ 9+ 11+

13. 4.
CSS 3 Cursors

14. CSS3 Cursors
l NEW available custom cursor: properties
l EXAMPLE
Support:
* * *
*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 on
l EXAMPLE
Support:
3.6+

17. 6.
Transitions

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+

23. 7.
CSS Arrows

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+

25. 8.
Background
Patterns

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

30. 9.
Beautiful Buttons

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;!

32. 10.
Prefix Free CSS

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