WORKSHOP - CSS3

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

Transcript

1. HUR TAR VI
   DET VI LÄRT OSS OCH SKAPAR
   MODERN WEBBUTVECKLING
   à la 2015
   

   View Slide

2. EN KORT PRESENTATION
   
   CSS3 EGENSKAPER
   
   WORKSHOP
   

   View Slide

3. 
   MICHELLE
   
   Informationsarkitektprogrammet (3:e året)
   Webbutveckling & Programmering
   
   ANDROID - C# - PROJEKTLEDNING"
   INFORMATIONSDESIGN - IoTaP
   
   

   View Slide

4. 
   INLÄMNINGSUPPGIFTER
   
   

   View Slide

5. 
   JENNIE
   
   Informationsarkitektprogrammet (3:e året)
   Webbutveckling och UX
   
   KOGNITIONSVETENSKAP "
   GRAFISK DESIGN FÖR WEBBEN "
   - INFORMATIONSDESIGN - IoTaP
   
   

   View Slide

6. 
   INLÄMNINGSUPPGIFTER
   
   

   View Slide

7. VAD GJORDE VI
   MED DET VI LÄRDE OSS I
   INTRODUKTION TILL "
   WEBBUTVECKLING?
   

   View Slide

8. 
   PROJEKT 1 - DANCE EDUCATIONAL
   
   
   Ny design av webbplats
   till kund
   
   HTML + CSS +
   JAVASCRIPT + PHP
   
   www.danceeducational.com
   
   

   View Slide

9. WEBBTJÄNSTER – MASH:IT;
   
   En webbtjänst som
   manipulerar HTML
   element med font & färg
   
   HTML + CSS + jQuery
   + PHP + BOOTSTRAP
   
   www.mashit.nu/mash
   
   

   View Slide

10. PROJEKT 2 - HAMNFESTIVALEN
    Ny webbplats till kund
    
    WORDPRESS + HTML
    + CSS + jQuery + PHP
    + BOOTSTRAP
    
    www.hamnfestivalen.se
    

    View Slide

11. HUR TAR VI
    DET VI LÄRT OSS OCH SKAPAR
    MODERN WEBBUTVECKLING
    à la 2015
    

    View Slide

12. FORMULÄR
    
    

    View Slide

13. View Slide

14. CSS3-EGENSKAPER
    BORDER RADIUS
    BOX-SHADOW
    TRANSITION
    ANIMATION
    

    View Slide

15. BORDER-RADIUS / BOX-SHADOW
    
    

    View Slide

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

    View Slide

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

    View Slide

18. 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;
    }
    

    View Slide

19. 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)
    

    View Slide

20. 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()
    

    View Slide

21. EXEMPEL
    TRANSITON / ANIMATION
    
    

    View Slide

22. View Slide

23. WORKSHOP
    SKAPA FORMULÄR
    STYLA MED CSS
    
    VERKTYG
    www.css3generator.com
    
    

    View Slide