Kawiesh

CSS NOTES

May 16th, 2021 (edited)
552
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ----------
  2. @media (orientation:portrait) {
  3. element{
  4. style: value;
  5. }
  6. }
  7.  
  8. https://www.tutorialbrain.com/css_tutorial/css_media_queries/
  9. -----------
  10. border-image: url("source") slice / width / outset repeat;
  11. border-image: linear-gradient(to right bottom, pink, green) 30 / 20px;
  12.  
  13. slice: value of corners (photo editor) no unit
  14. width: border width in pixels
  15. outset: distance of border from element. value in pixels
  16. repeat: sretch, space, repeat or round
  17.  
  18. ------------------
  19. Linear-gradients
  20. For background images & border images.
  21.  
  22. linear-gradient(direction, color1, color2, ...);
  23. linear-gradient(to right bottom, green 10%, blue 50%);
  24. linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  25. ..........
  26. Animations
  27. ..........
  28. element{
  29. animation: kd 1.5s ease-out 0s alternate infinite none running;
  30. }
  31.  
  32. animation: kd 1.5s ease-out 0s alternateinfinite none running;
  33.  
  34. <!--
  35. You can leave out some properties.
  36. Order does not matter unless value has same unit.
  37.  
  38. name: kd;
  39. duration: 1.5s;
  40. timing-function: linear, ease, ease-in, ease-out or ease-in-out;
  41. delay: 0s;
  42. direction: normal, reverse, alternate, alternate-reverse;
  43. iteration-count: infinite;
  44. fill-mode: none;
  45. play-state: paused or running;
  46. -->
  47.  
  48.  
  49. @keyframes kd{
  50. 0%{rules for element.
  51. 50%{rules for element}
  52. 100%{rules for element}
  53.  
  54. }
  55.  
  56. <!--you can also list stages with same rules by seperating it with
  57. A comma. E.g. 0%,100%{rules}-->
  58.  
  59. transformation: trannslate(10%,20%)
  60. transformation: rotate(90deg)
  61. transformation: scale(1.5,2)
  62. transformation: skew(10deg,10deg)
  63. opacity:1
  64.  
  65.  
  66. .....
  67. input[type="range"]{
  68. -webkit-appearance: none;
  69. width: 100%; height: 5px;
  70. background: #d3d3d3; outline: none;
  71. }
  72.  
  73. input[type="range"]::-webkit-slider-thumb{
  74. -webkit-appearance: none; appearance: none;
  75. width: 15px; height: 15px;
  76. border: 2px solid white;
  77. border-radius:15px;
  78. background: green; cursor: pointer;
  79. }
  80.  
  81. input[type="range"]::-moz-range-thumb {
  82. -webkit-appearance: none; appearance: none;
  83. width: 25px; height: 25px;
  84. border-radius:25px;
  85. background: #04AA6D; cursor: pointer;
  86. }
RAW Paste Data