dotnetnuke world css3
DESCRIPTION
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
ADVANCED CSS IN DOTNETNUKE
Amelia Marschall-Miller Gravity Works Design + Development
1.
[Advanced 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; }!
7+
Support:
Advanced Attribute 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)”;}!
!
variable
Support:
Advanced Pseudo 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; } !
9+
Support:
Advanced Child Selectors
3.5+
2.
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
Box Shadow Spread
Support:
4+ 9+
3.
Ellipse Containers
l Set border-radius:50%; for a flexible ellipse.
l Perfect for containers!
l EXAMPLE
Ellipse Containers
4+ 9+ 11+
Support:
4.
CSS 3 Cursors
l NEW available custom cursor: properties
l EXAMPLE
CSS3 Cursors
*
*Not all options supported
Support:
* *
5.
Pointer Events
l pointer-events:none; !l Allows elements below the set div to be clicked on
l EXAMPLE
Pointer Events (click behind!)
Support:
3.6+
6.
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
Transitions
– Opacity – Margin – Padding – Text-shadow – Box-shadow – Line-height – Text-indent – Visibility – Z-index – “all”
l CSS properties that can be transitioned: – Background color – Background position – Border-color – Border width – Color – Font-size – Font-weight – Height, Width – Left, Right, Top, Bottom – Transform
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
Transitions
4+ 10+ 10.5+
Support:
7.
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!
CSS Arrows
9+
Support (CSS Transform):
8.
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
10
Support (with browser prefixes):
Background Patterns
3.6+ 5.1+ 11.1+
16
Support (without browser prefixes):
9.
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;!
Beautiful Buttons
10.
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
Prefix Free CSS
3.5+ 9+ 10+
Support:
4+
Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director
GravityWorksDesign.com
@MimiAmelia
Questions?