Front end darsliklari moduli html, css, javascript


Radial Gradients (defined by their center)


Download 105.45 Kb.
bet5/12
Sana15.02.2023
Hajmi105.45 Kb.
#1200512
1   2   3   4   5   6   7   8   9   ...   12
Bog'liq
FRONT END full notes (7) (2022 05 08 17 42 47 UTC)

Radial Gradients (defined by their center)

  • background: linear-gradient(to bottom, red , yellow); to left, to top to bottom

  • background-image: radial-gradient(red 5%, yellow 15%, green 60%);



  • CSS Selectorlari
    • “,” – and
    • “>” – ex: div > p => all p inside div
    • “+” – ex: div + p => first p after div
    • “~” – div ~ p siblings after the selector
    attribute selector
    • a [data-red]{…} =>

    WBA


    • b [data-red=”true”]{…} =>

    WBA


    • c [data-red^=”12”] => beginning match data-red=”1234”
    • d [data-red$=”34”] => ending match data-red=”1234”
    • e [data-red*=”23”] => anywhere data-red=”1234”
    • Pseudo-classlari va elementlari:
    • Class Selectorlari:
    • :link, :visited, :active, :focus, :hover, :first-child, :last-child, :nth-child(nth), :only-child, :invalid, a:not(.name)
    // value given so invalid
    input:invalid {
    border: 2px solid red;
    }
    The :only-child selector matches every element that is the only child of its parent.
    Set a background color for all elements that are not a
    element:
    :not(p) {
    background: #ff0000;
    }

    Elementlar:
    • ::after, ::before, ::first-letter, ::first-line, ::selection (text selection)…
    p::before {
    content: "Read this -";
    background-color: yellow;
    color: red;
    font-weight: bold;
    }


    7. CSS – Advanced
    • Transitionlar bilan ishlash
    • Transform-elementlar ustida amallar bajarish;
    • Animatsiyalar ishlatilish turlari:
    • From to usulida animatsiya yaratish;
    • Vaqt bo’yicha taqsimlangan animatsiyalar yaratish;


    • transition

    • transition-delay

    • transition-duration

    • transition-property

    • transition-timing-function


    • ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)

    • linear - specifies a transition effect with the same speed from start to end

    • ease-in - specifies a transition effect with a slow start

    • ease-out - specifies a transition effect with a slow end

    • ease-in-out - specifies a transition effect with a slow start and end


    • scale(): Affects the size of the element. This also applies to the font-size, padding, height, and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.

    • skewX() and skewY(): Tilts an element to the left or right, like turning a rectangle into a parallelogram. skew() is a shorthand that combines skewX() and skewY by accepting both values.

    • translate(): Moves an element sideways or up and down. If there’s only one value provided, it works sideways. If two, up and down too

    • rotate(): Rotates the element clockwise from its current position.



    • transform: rotate(360deg); //x y

    • transform: skew(150deg); // //x y

    • transform: scale(1.5); // //x y


    animation ==== https://www.w3schools.com/css/css3_animations.asp
    @keyframes example {
    from {top: 0px; background-color: yellow;}
    to {top: 200px;}
    }
    Animation examples
    https://css-tricks.com/almanac/properties/a/animation/
    @keyframes rotation {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(90deg); }
    }



    Download 105.45 Kb.

    Do'stlaringiz bilan baham:
  • 1   2   3   4   5   6   7   8   9   ...   12




    Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
    ma'muriyatiga murojaat qiling