DotNetNuke World CSS3

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

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 of DotNetNuke World CSS3

Page 1: DotNetNuke World CSS3

ADVANCED CSS IN DOTNETNUKE

Amelia Marschall-Miller Gravity Works Design + Development

Page 2: DotNetNuke World CSS3

1.

[Advanced Selectors]

Page 3: DotNetNuke World CSS3

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

Page 4: DotNetNuke World CSS3

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

Page 5: DotNetNuke World CSS3

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

Page 6: DotNetNuke World CSS3

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

Page 7: DotNetNuke World CSS3

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

Page 8: DotNetNuke World CSS3

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+

Page 9: DotNetNuke World CSS3

2.

Box Shadow Spread

Page 10: DotNetNuke World CSS3

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+

Page 11: DotNetNuke World CSS3

3.

Ellipse Containers

Page 12: DotNetNuke World CSS3

l  Set border-radius:50%; for a flexible ellipse.

l  Perfect for containers!

l  EXAMPLE

Ellipse Containers

4+ 9+ 11+

Support:

Page 13: DotNetNuke World CSS3

4.

CSS 3 Cursors

Page 14: DotNetNuke World CSS3

l  NEW available custom cursor: properties

l  EXAMPLE

CSS3 Cursors

*

*Not all options supported

Support:

* *

Page 15: DotNetNuke World CSS3

5.

Pointer Events

Page 16: DotNetNuke World CSS3

l  pointer-events:none; !l  Allows elements below the set div to be clicked on

l  EXAMPLE

Pointer Events (click behind!)

Support:

3.6+

Page 17: DotNetNuke World CSS3

6.

Transitions

Page 18: DotNetNuke World CSS3

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

Page 19: DotNetNuke World CSS3

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

Page 20: DotNetNuke World CSS3

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

Page 21: DotNetNuke World CSS3

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

Page 22: DotNetNuke World CSS3

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:

Page 23: DotNetNuke World CSS3

7.

CSS Arrows

Page 24: DotNetNuke World CSS3

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):

Page 25: DotNetNuke World CSS3

8.

Background Patterns

Page 26: DotNetNuke World CSS3

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

Page 27: DotNetNuke World CSS3

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

Page 28: DotNetNuke World CSS3

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

Page 29: DotNetNuke World CSS3

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):

Page 30: DotNetNuke World CSS3

9.

Beautiful Buttons

Page 31: DotNetNuke World CSS3

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

Page 32: DotNetNuke World CSS3

10.

Prefix Free CSS

Page 33: DotNetNuke World CSS3

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+

Page 34: DotNetNuke World CSS3

Amelia Marschall-Miller Gravity Works Design + Development Partner & Creative Director

GravityWorksDesign.com

@MimiAmelia

Questions?