Kawiesh

CSS NOTES

May 16th, 2021 (edited)
778
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.67 KB | None | 0 0
  1. //-------------CSS Counter------------------
  2. :root{
  3. counter-set: count 0;
  4. }
  5.  
  6. .span::before{
  7. counter-increment: count 1;
  8. content: "[" counter(count,decimal-leading-zero*) "]";
  9. }
  10. ----------
  11. counter-set: count 0;
  12. ~start numbering from
  13. ~can be negative or positive
  14. ~not included in numbering
  15.  
  16. *decimal-leading-zero: pad numbers with zero
  17.  
  18.  
  19. counter-increment: count 1;
  20. ~can be negative or positive
  21. ~increase or decrease numbering by given number
  22.  
  23.  
  24. //-------------CSS COMBINATOR SELECTOR------------------
  25. [attr]
  26. Selects all elements with attribute "attr"
  27.  
  28. [attr="value"]
  29. Selects all elements with the attribute "attr",
  30. whose value is exactly "value"
  31.  
  32. [attr~="value"]
  33. Selects all elements with the attribute "attr",
  34. whose value is a whitespace-separated list of words,
  35. one of which is exactly "value". Unlike *=,
  36. this selector will not look for "value" as a word fragment.
  37. Only as a whole word
  38.  
  39. [attr|="value"]
  40. Selects all elements with the attribute "attr",
  41. whose value is exactly "value" or starts with "value-"
  42.  
  43. [attr^="value"]
  44. Selects all elements with the attribute "attr",
  45. whose value starts with "value"
  46.  
  47. [attr$="value"]
  48. Selects all elements with the attribute "attr",
  49. whose value ends with "value"
  50.  
  51. [attr*="value"]
  52. Selects all elements with the attribute "attr",
  53. whose value contains "value" 1 or more times
  54.  
  55. Case insensitive
  56. [attr="value" i]
  57. Selects all elements with the attribute "attr",
  58. whose value is "value", doesn't matter upper or lowercase
  59.  
  60. Case sensitive
  61. [attr="value" s]
  62. Selects all elements with the attribute "attr",
  63. whose value is "value", only lowercase
  64.  
  65. ---
  66. Examples
  67.  
  68. a[href^="https"][href$=".org"]
  69. All a elements with attribute href,
  70. whose values start with "https" and end with ".org"
  71.  
  72. div[lang]
  73. Selects all divs with "lang" attribute
  74.  
  75. div:not([lang])
  76. Selects all divs without "lang" attribute
  77.  
  78. Multiple attributes
  79. Example
  80. div[style*="display: block"][style*="line-height: 0"]
  81.  
  82.  
  83. //-------------CSS SIBLING SELECTOR---------------------
  84. element1 element2
  85. dSelects all element2 elements
  86. whose ancestors are element1 elements
  87.  
  88. element1>element2
  89. Selects all element2 elements
  90. whose (direct) parents element1 elements
  91.  
  92. element1+element2
  93. Selects all element2 elements
  94. that are placed immediately after element1 elements
  95.  
  96. element1~element2
  97. Selects all element2 elements
  98. that are preceded by element1 elements (doesn't have to be immediately)
  99.  
  100.  
  101. //-------------STYLING DETAILS/SUMMARY------------------
  102. <html>
  103. <head>
  104. <style>
  105. :root{
  106. --up: "...";
  107. --down:">>";
  108. }
  109.  
  110. body{
  111. font-family: 'Arial', sans-serif;
  112. }
  113.  
  114. details>summary::-webkit-details-marker{
  115. display: none;
  116. }
  117.  
  118. details{
  119. border: 1px solid gray;
  120. border-radius: 0.2rem;
  121. padding: 0.5rem;
  122. }
  123.  
  124. details[open]{
  125. background: #f3e9b8;
  126. }
  127.  
  128. details>summary{
  129. list-style-type: none;
  130. outline:none;
  131. text-align:left;
  132. }
  133.  
  134. details[open]>summary{
  135. border-bottom: 0.5px solid turquoise;
  136. margin-bottom: 0.5em;
  137. }
  138.  
  139. details>summary::before{
  140. content: var(--down);
  141. position:relative;left:90%;
  142. }
  143.  
  144. details[open]>summary::before{
  145. content: var(--up);
  146. }
  147. </style>
  148. </head>
  149. <body>
  150. <details>
  151. <summary>Hey</summary>
  152. <p>
  153. This is inner info
  154. </p>
  155. </details>
  156. </body>
  157. </html>
  158.  
  159. //--------------------BACKGROUND CLIP------------------------------
  160. body{
  161. font: 50px Arial;
  162. background: yellow url("");
  163. background-size: 50%;
  164. -webkit-text-fill-color: transparent;
  165. -webkit-background-clip: text;
  166. }
  167.  
  168.  
  169. //--------------------MEDIA QUERY------------------------------
  170. @media (orientation:portrait) {
  171. element{
  172. style: value;
  173. }
  174. }
  175.  
  176. https://www.tutorialbrain.com/css_tutorial/css_media_queries/
  177.  
  178. //--------------------Border image------------------------------
  179. border-image: url("source") slice / width / outset repeat;
  180. border-image: linear-gradient(to right bottom, pink, green) 30 / 20px;
  181.  
  182. slice: value of corners (photo editor) no unit
  183. width: border width in pixels
  184. outset: distance of border from element. value in pixels
  185. repeat: sretch, space, repeat or round
  186.  
  187. //--------------------Linear gradients------------------------------
  188. Linear-gradients
  189. For background images & border images.
  190.  
  191. linear-gradient(direction, color1, color2, ...);
  192. linear-gradient(to right bottom, green 10%, blue 50%);
  193. linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
  194.  
  195.  
  196. //--------------------Animations------------------------------
  197. element{
  198. animation: kd 1.5s ease-out 0s alternate infinite none running;
  199. }
  200.  
  201. animation: kd 1.5s ease-out 0s alternateinfinite none running;
  202.  
  203. <!--
  204. You can leave out some properties.
  205. Order does not matter unless value has same unit.
  206.  
  207. name: kd;
  208. duration: 1.5s;
  209. timing-function: linear, ease, ease-in, ease-out or ease-in-out;
  210. delay: 0s;
  211. direction: normal, reverse, alternate, alternate-reverse;
  212. iteration-count: infinite;
  213. fill-mode: none;
  214. play-state: paused or running;
  215. -->
  216.  
  217.  
  218. @keyframes kd{
  219. 0%{rules for element.
  220. 50%{rules for element}
  221. 100%{rules for element}
  222.  
  223. }
  224.  
  225. <!--you can also list stages with same rules by seperating it with
  226. A comma. E.g. 0%,100%{rules}-->
  227.  
  228. transformation: trannslate(10%,20%)
  229. transformation: rotate(90deg)
  230. transformation: scale(1.5,2)
  231. transformation: skew(10deg,10deg)
  232. opacity:1
  233.  
  234.  
  235. //--------------------STYLING INPUT RANGE------------------------------
  236. input[type="range"]{
  237. -webkit-appearance: none;
  238. width: 100%; height: 5px;
  239. background: #d3d3d3; outline: none;
  240. }
  241.  
  242. input[type="range"]::-webkit-slider-thumb{
  243. -webkit-appearance: none; appearance: none;
  244. width: 15px; height: 15px;
  245. border: 2px solid white;
  246. border-radius:15px;
  247. background: green; cursor: pointer;
  248. }
  249.  
  250. input[type="range"]::-moz-range-thumb {
  251. -webkit-appearance: none; appearance: none;
  252. width: 25px; height: 25px;
  253. border-radius:25px;
  254. background: #04AA6D; cursor: pointer;
  255. }
  256.  
  257.  
  258.  
  259. //--------------------CSS GRID------------------------------
  260. HTML
  261. <div class=”wrapper”>  <div class=”item”>1</div>  <div class=”item”>2</div>  <div class=”item”>3</div>  <div class=”item”>4</div>  <div class=”item”>5</div>  <div class=”item”>6</div></div>
  262. CSS
  263.  
  264. CSS
  265. .wrapper {
  266. display: grid;
  267. grid-template-columns: 10rem 10rem 10rem;
  268. grid-template-columns: repeat(3, 10rem);
  269. grid-template-columns: repeat(3, 1fr);
  270. grid-auto-rows: 10rem;
  271. grid-gap: 1rem
  272. grid-auto-flow: dense
  273. }
  274.  
  275. .item5 {
  276. grid-column: span 2;
  277. }
  278.  
  279.  
  280. NOTES
  281. Grid-template-columns
  282. Tell CSS how many columns to create and how wide.
  283. E.g. 3 Columns with a width of 10rem each.
  284.  
  285.  
  286. Grid-auto-rows
  287. Default row height if not explicitly defined via grid-template-rows. max-content, min-content, minmax(min,max);
  288.  
  289.  
  290. Grid gap
  291. Space between items inside a grid container
  292. Shorthand property for spacing between both rows and columns. You can define an explicit value for the columns and rows by using grid-column-gap and grid-row-gap.
  293.  
  294. Repeat(amount,size)
  295. If all cols have same width, you can use repeat function. First parameter is number of cols, second parameter is size of the col (width).
  296.  
  297. fr
  298. Fractional units, or fr, is a CSS grid length unit.
  299. Items will take up as much space as they can while still fitting in number of cols defined.
  300.  
  301.  
  302. Grid-column
  303. Used to define width of individual grid items.
  304. To span item across two columns:
  305. grid-column-start: span 2
  306. grid-column-end: auto
  307. or the shorthand
  308. grid-column: span 2
  309. for specific position use
  310. grid-column: start / end  (TRACKS)
  311. grid-column: 1 / -1 to span across whole grid.
  312. if item doesn't fit in row it will jump onto next row
  313.  
  314. Grid-auto-flow
  315. Dense if you want to fill empty spaces with items that can fit in.
  316.  
  317. ----
  318. grid-template-areas:
  319. "header header"
  320. "content sidebar"
  321. "footer footer";
  322.  
  323.  
  324. Add grid-area to individual elements
  325.  
  326. source: https://www.freecodecamp.org/news/a-beginners-guide-to-css-grid-3889612c4b35/?
Add Comment
Please, Sign In to add comment