Differences

This shows you the differences between two versions of the page.

--- webdev:clippings [2025/07/14 20:25] – created scumsuck
+++ webdev:clippings [2025/07/14 20:29] (current) – scumsuck
@@ Line 1: / Line 1: @@
+====== CSS Clippings ======
+some HTML/CSS clips I found interesting
 <html>
 <style>
-blockquote .rainbow-border{
+.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;
+}
+</style>
+<pre><code>
+.rainbow-border{
+background:white;
+color:black;
 border-image: linear-gradient(180deg, #f681ae, #f38282, #f7d54d, #6ed46e, #3ed3da, #a48ac9 100%);
     border-image-slice: 100%;
@@ Line 11: / Line 33: @@
   padding: 0.5rem;
 }
-</style>
+</code></pre>
-<blockquote>
+<blockquote class="rainbow-border">
 this should be a blockquote with a rainbow border
 <cite><a href="https://web.pixelshannon.com/make/index.html">pixel shannon</a></cite></blockquote>
-<html>
+</html>