ADVANCED CSS IN DOTNETNUKE Amelia Marschall-Miller Gravity Works Design + Development
DotNetNuke World CSS3
Nov 28, 2014
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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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?
Related Documents
