diff --git a/index.html b/index.html index e124a86..19498c1 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ CSS Pattern: Fancy backgrounds with CSS gradients - + @@ -16,17 +16,18 @@ - + - - +

CSS Pattern

powered by CSS gradients

+

the biggest collection of background Patterns

+

Explore 145 CSS-only patterns made with CSS gradients and optimized with CSS variables.
I also have a collection of animated CSS Patterns

@@ -47,7 +48,6 @@

CSS Pattern

conic-gradient(from 60deg at calc(200%/3) 50%,var(--c1) 60deg,var(--c3) var(--_g)), conic-gradient(from -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0); background-size: calc(var(--s)*1.732) var(--s); - /* sqrt(3) = 1.732 */ } @@ -63,13 +63,12 @@

CSS Pattern

calc(.5*var(--s)) calc(.5*var(--s)*0.577), repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg); background-size: var(--s) calc(var(--s)*0.577); - /* 0.577 = tan(30deg)*/ }
+
+
+
+

Don't know which Pattern to use?
Let me pick one for you!

+ Get a nice CSS Pattern +
+
+
+
+

What about a nice CSS Loader?

+ + Get more CSS loaders +
+
+
+
+

I also share cool CSS Tips
It takes one minute to read a tip

+ Get a random CSS Tip +
+
+
+

You are not looking for a CSS pattern?
Maybe you want a CSS Shape?

+ Go to CSS Shape +
+
- +
+
+

You reached the 100th Pattern 🥳
Keep scrolling or surprise yourself

+ Get a random CSS Pattern +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

I also have a collection of CSS Generators

+ Go to CSS Generators +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Do you want to have some fun?
Solve a CSS Challenge

+ Go to CSS Challenges +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

You reached the end but it's not the end!
This collection will keep growing

+ Watch on Github + Follow me on Twitter +
+
+ by Temani Afif Twitter Buy Me A Coffee + window.dataLayer = window.dataLayer || []; diff --git a/style.css b/style.css index db0f1dc..8e22b55 100644 --- a/style.css +++ b/style.css @@ -49,7 +49,6 @@ h1 { color: #505050; white-space: nowrap; } - h1 span { font-size: 70px; vertical-align: middle; @@ -147,7 +146,7 @@ a.tweet { color: #fff; box-shadow: 0 0 0 50px #08769b; clip-path: inset(0 -100%); - text-decoration:none ; + text-decoration:none; } #bmc-wbtn { position: fixed; @@ -165,4 +164,4 @@ a.tweet { #bmc-wbtn img { height: 40px; width: 40px; -} +} \ No newline at end of file