Front end darsliklari moduli html, css, javascript

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