leaverou / css3patterns Goto Github PK
View Code? Open in Web Editor NEWThe popular CSS3 patterns gallery, now on Github :)
Home Page: https://leaverou.github.io/css3patterns/
License: MIT License
The popular CSS3 patterns gallery, now on Github :)
Home Page: https://leaverou.github.io/css3patterns/
License: MIT License
For example, I want to draw a gradient line and repeat it according to the specified vertical and horizontal spacing.
Just wanted to leave a note that I used your library to create a web component
Hi Lea,
It's rainy here so I created a new css3pattern: Houndstooth, or "Pied de poule" in french :)
Demo from gist is here: http://jsfiddle.net/abernier/FVWr6/
Feel free to include it into css3patterns if you like it.
Cheers.
— Antoine
Hi!
Anyone have an idea how to create 45deg (or any degree) rotated tablecloth pattern? :)
Best,
Bartek
Just a big thank you for you guys sharing your work for free.
Ced. Webdesigner.
i just found this and it is really cool
hope i can get patterns or textures like leather , or metalic done this same way can anyone help
Just another idea,
Creating CSS patterns often requires to manually compute values (ex: "half the size"...), or have a variable in mind (ex: "my background is white")...
Have you thought of using something like LESS?
The pattern could then be saved as less stylesheet, but it should be displayed as plain CSS on the site (like it is) to allow users to just copy/paste the snippet which is good.
Let me know your thoughts about it ;)
— Antoine
None of the patterns inside of ul#patterns show. They all have display:none
set.
I found the offending line in Developer Tools:
body[style] #patterns > li:not(:target) {
display: none;
}
I'll look for it in the actual code here at GitHub, but I'm sure someone who's actually familiar with the code structure can find it more quickly than me.
Update
When I load http://lea.verou.me/css3patterns/ (no target) location.hash
still returns some truey value. So, the code that starts at about line 62 of css3patterns.js adds the style
property to the body element which is supposed to hide all of the patterns except for the one I've selected. Since there isn't actually a target, the second part of the ternary clause (querySelector
) doesn't actually match a valid element and nothing is shown.
This is weird. location.hash
should be falsy. I suspect it's just me and I think the problem might go away after I clear my cache and close my browser.
Update
Nope. That's wrong. The problem occurs after clearing the cache and restarting the browser. I can duplicate the problem locally after cloning the repository, but I can also confirm that the onhashchange
function code doesn't execute on page load .
This doesn't happen on Firefox and it doesn't happen in an incognito window. So, I guess I've confirmed that it's only me. It must be a browser extension.
Hi,
CSS3patterns is awsome!
Let me share an idea with you: what about relying on gists to allow 3rd-party devs to use css3patterns UI to display/test their own patterns... As you said,
I can't accept all submissions, sorry for that.
but github can :) , and your UI is already neat to display them.
What I suggest is a special URL for gist-hosted patterns, eg: http://leaverou.me/css3patterns/#gist-XXXXX which will display the remote pattern into your UI.
I've created a YQL table which rely on gist API in order to be able to fetch the gist's content client-side, eg:
var yQuery = "USE 'http://gist.github.com/raw/1097256' AS github.gist.content; select * from github.gist.content where gist_id='" + XXXXX + '";
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(yQuery) + "&format=json&diagnostics=true&callback=?", function (data) {
console.log(data);
});
You can test this code here
Cheers.
— Antoine
The url https://leaverou.github.io/css3patterns doesn't show patterns...
It must delete display property on line 119:
Just so other people are aware. Nothing really serious.
bytesizematters fails and causes the site to load after it timed out.
GET http://bytesizematters.com/bytesize.js net::ERR_NAME_NOT_RESOLVED
http://downforeveryoneorjustme.com/bytesizematters.com
This isn't big news I guess:
poop • 4 years ago
The site's down? Oh, no, I loved using byetsizematters :(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.