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