====== CSS Clippings ====== some HTML/CSS clips I found interesting ====Rainbow====


.rainbow-border{
background:white;
color:black;
border-image: linear-gradient(180deg, #f681ae, #f38282, #f7d54d, #6ed46e, #3ed3da, #a48ac9 100%);
    border-image-slice: 100%;
  border-image-slice: 1;
  border-top: 0.1rem solid #FC8EAC;
  border-left: 0.5rem solid #FC8EAC;
  border-right: 0.1rem solid #FC8EAC;
  border-bottom: 0.1rem solid #FC8EAC;
  padding: 0.5rem;
}

this should be a blockquote with a rainbow border pixel shannon

====Nesting==== You can [[https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting#nested_declarations_rule|nest media queries (and much more!) within css]] to clean up yo shit.


al-link {
  right: -18px;
 @media (max-width: 800px) {
    right: 0;
 }
}

==== iridescent ==== [[https://codepen.io/simeydotme/pen/jEbYwRa|From Simon Goellner.]]