leaverou / css3patterns Goto Github PK

For example, I want to draw a gradient line and repeat it according to the specified vertical and horizontal spacing.

It seems your page is having trouble loading javascript dependencies.

Just wanted to leave a note that I used your library to create a web component

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

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,

the link should be this, right?

Thanks for your great jobs!

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 :(

http://disq.us/p/gbwsz6

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 a big thank you for you guys sharing your work for free.

Ced. Webdesigner.

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

The url https://leaverou.github.io/css3patterns doesn't show patterns...
It must delete display property on line 119:

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