Scribd Logo
Upload

Welcome to Scribd!

  • LA Dreamweaver WebDesign 5

    Uploaded by

    Cretu Alex
    4 views22 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views22 pages

    LA Dreamweaver WebDesign 5

    Uploaded by

    Cretu Alex

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 22

    DREAMWEAVER & WEB DESIGN

    SPECIFICITATE, PSEUDOELEMENTE, BACKGROUND, PARRALAX, TRANFORMĂRI, TRANZIȚII


    Conținut
    • Specificitate
    • Pseudo-elemente
    • Background
    • Parralax
    • Transformări
    • Tranziții
    Semantic HTML
    Exercitiul 1
    Display Flexbox
    ▪ Flexbox reprezintă un nou tip de display introdus in CSS3 care
    permite o flexibilitate mult mai mare în aranjarea elementelor într-un
    container.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    https://the-echoplex.net/flexyboxes/
    Flexbox

    http://www.flexboxdefense.com/
    CSS Specificity Calculator

    https://specificity.keegan.st/
    Pseudo-elemente

    p::first-letter Prima litera

    p::first-line Prima linie

    p::selection Zona selectata


    Dropdowns
    .dropdown {
    position: relative;
    display: inline-block;
    <div class="dropdown"> }
    <span>Mouse over me</span>
    <div class="dropdown-content"> .dropdown-content {
    <p>Hello World!</p> display: none;
    </div> position: absolute;
    </div> background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    }

    .dropdown:hover .dropdown-content {
    display: block;
    }
    Background
    Background
    Parallax Scroll - Background-attachment
    Parallax Scroll
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="paralax.css" rel="stylesheet">
    </head>
    <body>
    <p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

    <div class="parallax"></div>

    <div style="height:1000px;background-color:white;font-size:36px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aut
    doloremque nesciunt? Delectus facere in iusto, reiciendis saepe unde velit. Culpa,
    dicta dignissimos dolores exercitationem harum nemo obcaecati recusandae repellat?
    </div>
    </body>
    </html>
    Parallax Scroll
    .parallax {
    background-image: url("img_parallax1.jpg");
    min-height: 800px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }
    Background-uri multiple

    https://github.com/miezuit/html_css_training/tree/master/backgrounds/img
    Background-uri multiple

    body {
    background-image: url("img/rocket.png"), url("img/earth.png"), url("img/space.jpg");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: auto, 20%, cover;
    background-position: 20% 20%, center center, 0% 0%;
    height: 100vh;
    }
    Transformări
    div {
    transform: translate(50px, 100px);
    }

    div {
    transform: rotate(20deg);
    }

    div {
    transform: scale(2);
    }
    Transform-origin
    Transform-origin
    Tranziții
    transition
    transition-delay
    transition-duration
    transition-property
    transition-timing-function
    div { div:hover {
    width: 100px; width: 300px;
    height: 100px; }
    background: red;
    transition: width 2s;
    }
    Exercițiu - Landing Page
    Ce ați învățat?
    • Specificitate
    • Pseudo-elemente
    • Background
    • Parralax
    • Transformări
    • Tranziții

    You might also like