From 40917ef546be030f63c053a3c77f7cbc1e54b3c0 Mon Sep 17 00:00:00 2001 From: Adam Marsden Date: Thu, 20 Feb 2025 16:33:18 +0000 Subject: [PATCH 1/2] Update readme.md --- readme.md | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index eee28d8..66dc608 100644 --- a/readme.md +++ b/readme.md @@ -1,8 +1,8 @@ # CSS Cheat Sheet -A quick go to guide for CSS goodness. Checkout the [pretty version](http://adam-marsden.co.uk/css-cheat-sheet). +A quick go to guide for CSS goodness. Checkout the [pretty version](https://admm.co/css-cheat-sheet). ## Contributing -If you have a bug to report about the [pretty CSS Cheat Sheet](http://adam-marsden.co.uk/css-cheat-sheet) or something to add onto the CSS Cheat Sheet follow the [contribution guidelines](CONTRIBUTING.md). +If you have a bug to report about the [pretty CSS Cheat Sheet](https://admm.co/css-cheat-sheet) or something to add onto the CSS Cheat Sheet follow the [contribution guidelines](CONTRIBUTING.md). ## CSSCS Nav @@ -15,8 +15,11 @@ If you have a bug to report about the [pretty CSS Cheat Sheet](http://adam-marsd * [List Styling](#list-styling) * [Flexbox](#flexbox) * [CSS Grid](#css-grid) + * [Animations & Transitions](#animations) + * [Modern Layout](#modern-layout) * [Dynamic Content](#dynamic-content) +--- ### Selectors @@ -38,6 +41,8 @@ General Sibling Selector `h1 ~ p {}` Attribute Selector `[attribute="SomeValue"] {}` +--- + ### Pseudo Selectors & Elements Mouse Over Selector `a:hover {}` @@ -76,7 +81,9 @@ Not a Specified Element Selector `:not(p) {}` Before Element `.class::before {}` -After Element `.class::before {}` +After Element `.class::after {}` + +--- ### Text Styling @@ -112,6 +119,8 @@ Text Overflow `text-overflow: clip | ellipsis | string | initial | inherit` Text Shadow `text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit` +--- + ### Position Position `position: static | relative | absolute | fixed | sticky` @@ -124,6 +133,8 @@ Clear Floating Elements `clear: none | left | right | both` Z Index `z-index: 3 | auto | inherit` +--- + ### Background Background Image `background-image: url()` @@ -136,6 +147,14 @@ Background Position `background-position: top | right | bottom | left | center` Background Attachment `background-attachment: scroll | fixed | local | initial | inherit` +Background Blend Mode `background-blend-mode: normal | multiply | screen | overlay | darken | lighten` + +Background Clip `background-clip: border-box | padding-box | content-box | text` + +Backdrop Filter `backdrop-filter: blur(5px) | brightness(60%) | contrast(40%)` + +--- + ### Box properties Box Sizing `box-sizing: border-box | content-box` @@ -150,6 +169,16 @@ Border Style `border-style: none | hidden | dotted | dashed | solid | double | g Border Width `border-width: 10px` +Box Shadow `box-shadow: offset-x offset-y blur-radius spread-radius color` + +Border Radius `border-radius: 10px | 50% | 10px 20px` + +Outline `outline: 1px solid red | outline-offset: 2px` + +Clip Path `clip-path: circle(50%) | polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)` + +--- + ### List Styling List Type `list-style-type: disc | circle | square | none` @@ -158,6 +187,8 @@ List Position `list-style-position: inside | outside` List Image `list-style-image: url()` +--- + ### Flexbox Flex Direction `flex-direction: row | row-reverse | column | column-reverse` @@ -180,6 +211,8 @@ Flex Basis `flex-basis: 3px | auto` Align Self `align-self: auto | flex-start | flex-end | center | baseline | stretch` +--- + ### CSS Grid Grid Template Columns `grid-template-columns: 40px 50px auto 50px 40px` @@ -224,6 +257,34 @@ Justify Self `justify-self: start | end | center | stretch` Align Self `align-self: start | end | center | stretch` +--- + +### Animations & Transitions + +Animation `animation: name duration timing-function delay iteration-count direction fill-mode play-state` + +Keyframes `@keyframes name { from {} to {} }` + +Transition `transition: property duration timing-function delay` + +Transform `transform: translate(x, y) rotate(deg) scale(x, y) skew(x-angle, y-angle)` + +--- + +### Modern Layout + +Container Type `container-type: inline-size | size | normal` + +Container Query `@container (min-width: 400px) { }` + +Subgrid `grid-template-columns: subgrid` + +Aspect Ratio `aspect-ratio: 16 / 9` + +Logical Properties `margin-block: 1rem; padding-inline: 2rem` + +--- + ### Dynamic Content CSS Variable `--variable-name: value` @@ -238,9 +299,11 @@ Counter Dynamic Value `content: counter(name-of-counter)` Attribute Dynamic Value `content: attr(name-of-attribute)` +--- + ## Credits -Built & Maintained by [Adam Marsden](https://twitter.com/AdamMarsdenUK) +Built & Maintained by [Adam Marsden](https://admm.co/) ## License From 19576503f562369048c9c17f08c3eb48c68e2d29 Mon Sep 17 00:00:00 2001 From: Adam Marsden Date: Thu, 20 Feb 2025 16:34:10 +0000 Subject: [PATCH 2/2] Update CONTRIBUTING.md --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9d07fc0..17ecece 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,8 +3,8 @@ This repo is for posting ideas, problems and additions for CSS Cheat Sheet. If you have an addition for the CSS cheat sheet, please use the label "**Addition to CSSCS**" or fork and create a pull request. -If you have an idea or bug to report about the [pretty version of CSS Cheat Sheet](http://adam-marsden.co.uk/css-cheat-sheet) please add the label "**Pretty CSSCS**" to your issue. +If you have an idea or bug to report about the [pretty version of CSS Cheat Sheet](https://admm.co/css-cheat-sheet/) please add the label "**Pretty CSSCS**" to your issue. -All additions to the CSS Cheat Sheet here on GitHub will be reproduced on the [pretty version of CSS Cheat Sheet.](http://adam-marsden.co.uk/css-cheat-sheet) +All additions to the CSS Cheat Sheet here on GitHub will be reproduced on the [pretty version of CSS Cheat Sheet.](https://admm.co/css-cheat-sheet/) If your issue doesn't come under these labels go ahead and post it anyway, it all helps to improve CSS Cheat Sheet.