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.
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+
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+
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+