Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //-------------CSS Counter------------------
- :root{
- counter-set: count 0;
- }
- .span::before{
- counter-increment: count 1;
- content: "[" counter(count,decimal-leading-zero*) "]";
- }
- ----------
- counter-set: count 0;
- ~start numbering from
- ~can be negative or positive
- ~not included in numbering
- *decimal-leading-zero: pad numbers with zero
- counter-increment: count 1;
- ~can be negative or positive
- ~increase or decrease numbering by given number
- //-------------CSS COMBINATOR SELECTOR------------------
- [attr]
- Selects all elements with attribute "attr"
- [attr="value"]
- Selects all elements with the attribute "attr",
- whose value is exactly "value"
- [attr~="value"]
- Selects all elements with the attribute "attr",
- whose value is a whitespace-separated list of words,
- one of which is exactly "value". Unlike *=,
- this selector will not look for "value" as a word fragment.
- Only as a whole word
- [attr|="value"]
- Selects all elements with the attribute "attr",
- whose value is exactly "value" or starts with "value-"
- [attr^="value"]
- Selects all elements with the attribute "attr",
- whose value starts with "value"
- [attr$="value"]
- Selects all elements with the attribute "attr",
- whose value ends with "value"
- [attr*="value"]
- Selects all elements with the attribute "attr",
- whose value contains "value" 1 or more times
- Case insensitive
- [attr="value" i]
- Selects all elements with the attribute "attr",
- whose value is "value", doesn't matter upper or lowercase
- Case sensitive
- [attr="value" s]
- Selects all elements with the attribute "attr",
- whose value is "value", only lowercase
- ---
- Examples
- a[href^="https"][href$=".org"]
- All a elements with attribute href,
- whose values start with "https" and end with ".org"
- div[lang]
- Selects all divs with "lang" attribute
- div:not([lang])
- Selects all divs without "lang" attribute
- Multiple attributes
- Example
- div[style*="display: block"][style*="line-height: 0"]
- //-------------CSS SIBLING SELECTOR---------------------
- element1 element2
- dSelects all element2 elements
- whose ancestors are element1 elements
- element1>element2
- Selects all element2 elements
- whose (direct) parents element1 elements
- element1+element2
- Selects all element2 elements
- that are placed immediately after element1 elements
- element1~element2
- Selects all element2 elements
- that are preceded by element1 elements (doesn't have to be immediately)
- //-------------STYLING DETAILS/SUMMARY------------------
- <html>
- <head>
- <style>
- :root{
- --up: "...";
- --down:">>";
- }
- body{
- font-family: 'Arial', sans-serif;
- }
- details>summary::-webkit-details-marker{
- display: none;
- }
- details{
- border: 1px solid gray;
- border-radius: 0.2rem;
- padding: 0.5rem;
- }
- details[open]{
- background: #f3e9b8;
- }
- details>summary{
- list-style-type: none;
- outline:none;
- text-align:left;
- }
- details[open]>summary{
- border-bottom: 0.5px solid turquoise;
- margin-bottom: 0.5em;
- }
- details>summary::before{
- content: var(--down);
- position:relative;left:90%;
- }
- details[open]>summary::before{
- content: var(--up);
- }
- </style>
- </head>
- <body>
- <details>
- <summary>Hey</summary>
- <p>
- This is inner info
- </p>
- </details>
- </body>
- </html>
- //--------------------BACKGROUND CLIP------------------------------
- body{
- font: 50px Arial;
- background: yellow url("");
- background-size: 50%;
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- }
- //--------------------MEDIA QUERY------------------------------
- @media (orientation:portrait) {
- element{
- style: value;
- }
- }
- https://www.tutorialbrain.com/css_tutorial/css_media_queries/
- //--------------------Border image------------------------------
- border-image: url("source") slice / width / outset repeat;
- border-image: linear-gradient(to right bottom, pink, green) 30 / 20px;
- slice: value of corners (photo editor) no unit
- width: border width in pixels
- outset: distance of border from element. value in pixels
- repeat: sretch, space, repeat or round
- //--------------------Linear gradients------------------------------
- Linear-gradients
- For background images & border images.
- linear-gradient(direction, color1, color2, ...);
- linear-gradient(to right bottom, green 10%, blue 50%);
- linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
- //--------------------Animations------------------------------
- element{
- animation: kd 1.5s ease-out 0s alternate infinite none running;
- }
- animation: kd 1.5s ease-out 0s alternateinfinite none running;
- <!--
- You can leave out some properties.
- Order does not matter unless value has same unit.
- name: kd;
- duration: 1.5s;
- timing-function: linear, ease, ease-in, ease-out or ease-in-out;
- delay: 0s;
- direction: normal, reverse, alternate, alternate-reverse;
- iteration-count: infinite;
- fill-mode: none;
- play-state: paused or running;
- -->
- @keyframes kd{
- 0%{rules for element.
- 50%{rules for element}
- 100%{rules for element}
- }
- <!--you can also list stages with same rules by seperating it with
- A comma. E.g. 0%,100%{rules}-->
- transformation: trannslate(10%,20%)
- transformation: rotate(90deg)
- transformation: scale(1.5,2)
- transformation: skew(10deg,10deg)
- opacity:1
- //--------------------STYLING INPUT RANGE------------------------------
- input[type="range"]{
- -webkit-appearance: none;
- width: 100%; height: 5px;
- background: #d3d3d3; outline: none;
- }
- input[type="range"]::-webkit-slider-thumb{
- -webkit-appearance: none; appearance: none;
- width: 15px; height: 15px;
- border: 2px solid white;
- border-radius:15px;
- background: green; cursor: pointer;
- }
- input[type="range"]::-moz-range-thumb {
- -webkit-appearance: none; appearance: none;
- width: 25px; height: 25px;
- border-radius:25px;
- background: #04AA6D; cursor: pointer;
- }
- //--------------------CSS GRID------------------------------
- HTML
- <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>
- CSS
- CSS
- .wrapper {
- display: grid;
- grid-template-columns: 10rem 10rem 10rem;
- grid-template-columns: repeat(3, 10rem);
- grid-template-columns: repeat(3, 1fr);
- grid-auto-rows: 10rem;
- grid-gap: 1rem
- grid-auto-flow: dense
- }
- .item5 {
- grid-column: span 2;
- }
- NOTES
- Grid-template-columns
- Tell CSS how many columns to create and how wide.
- E.g. 3 Columns with a width of 10rem each.
- Grid-auto-rows
- Default row height if not explicitly defined via grid-template-rows. max-content, min-content, minmax(min,max);
- Grid gap
- Space between items inside a grid container
- 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.
- Repeat(amount,size)
- 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).
- fr
- Fractional units, or fr, is a CSS grid length unit.
- Items will take up as much space as they can while still fitting in number of cols defined.
- Grid-column
- Used to define width of individual grid items.
- To span item across two columns:
- grid-column-start: span 2
- grid-column-end: auto
- or the shorthand
- grid-column: span 2
- for specific position use
- grid-column: start / end (TRACKS)
- grid-column: 1 / -1 to span across whole grid.
- if item doesn't fit in row it will jump onto next row
- Grid-auto-flow
- Dense if you want to fill empty spaces with items that can fit in.
- ----
- grid-template-areas:
- "header header"
- "content sidebar"
- "footer footer";
- Add grid-area to individual elements
- source: https://www.freecodecamp.org/news/a-beginners-guide-to-css-grid-3889612c4b35/?
Add Comment
Please, Sign In to add comment