Front end darsliklari moduli html, css, javascript
Radial Gradients (defined by their center)
Download 105.45 Kb.
|
FRONT END full notes (7) (2022 05 08 17 42 47 UTC)
- Bu sahifa navigatsiya:
- attribute selector
- 7. CSS – Advanced
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: |
Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling
ma'muriyatiga murojaat qiling