Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WORKSHOP - CSS3

Jen
September 21, 2015

WORKSHOP - CSS3

Form workshop introducing CSS3: box-shadow, border-radius, transition and animation.

Jen

September 21, 2015
Tweet

Transcript

  1. PROJEKT 1 - DANCE EDUCATIONAL Ny design av webbplats till

    kund HTML + CSS + JAVASCRIPT + PHP www.danceeducational.com
  2. WEBBTJÄNSTER – MASH:IT; En webbtjänst som manipulerar HTML element med

    font & färg HTML + CSS + jQuery + PHP + BOOTSTRAP www.mashit.nu/mash
  3. PROJEKT 2 - HAMNFESTIVALEN Ny webbplats till kund WORDPRESS +

    HTML + CSS + jQuery + PHP + BOOTSTRAP www.hamnfestivalen.se
  4. BORDER-RADIUS border-radius: top-left top-right bottom-right bottom-left | initial|inherit; px |

    em | % Optional Initial: set to default Inherit: same as parent 1 2 4 3
  5. BOX-SHADOW box-shadow: none | h-shadow v-shadow blur spread color |

    inset|initial|inherit; Default Required Position of horizontal shadow Required Position of vertical shadow. Optional The blur distance Optional The size of shadow Required/ Optional Color (default black) Optional Inset: Change from outher to inner shadow Initial: set to default Inherit: same as parent
  6. BOX-SHADOW / BORDER-RADIUS form { border: 1px solid #cccccc; -webkit-box-shadow:

    0px 0px 8px 5px rgba(105, 108, 109, 0.75); box-shadow: 0px 0px 8px 5px rgba(105, 108, 109, 0.75); -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; }
  7. TRANSITION transition-property: width; transition-duration: 2s; transition-timing-function: ease; transition-delay: 2s; property

    TRANSITION BETWEEEN STATES: div { width: 100px; height: 100px; background: mistyrose; -webkit-transition: width 3s linear 2s; transition: width 3s linear 2s; } div:hover { width: 300px; } from start to end Speed curve: linear | ease | ease-in | ease-out | ease-in-out time before transition starts (:hover to start)
  8. ANIMATON animation-name: name; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count:

    infinite; animation-direction: reverse|alternate; div { animation: move 5s linear infinite; } @keyframes move { 0% {-webkit-transform: translateX(0);} 50% {-webkit-transform: translateX(400px);} 100% {-webkit-transform: translateX(0);} } Reversed order or alter between normal and reversed 0%-> 100% | 100% -> 0% int | infinite (default value 1) keyframe name (background) translate() rotate() scale() skewX() skewY()