Linen
Is it possible to create Apple's linen texture with CSS? Something like background gradient, to avoid the slow speed of an image.
Using the noise feature of CSS can get you a long way to creating a pure CSS texture. Play around with http://www.noisetexturegenerator.com/ to see the possibilities. If you put both opacity and density you can get a striped pattern that somewhat resembles cloth.
A special mention goes to this article, for using css gradients to give your noise texture that little extra something:
http://www.rd2inc.com/blog/2013/01/tips-and-tricks-css3-gradients-and-textures/
Be advised that the noise feature is pretty new and isn't supported in all browsers.
I think gradient is possible. follow the link:Speed Up with CSS3 Gradients
Related
The image below has a kind of faded grey look with what seems to be some slight blurring and works quite well as a generic banner image.
Usually I am provided with these images or just find stock images but I'd be very interested in learning how to apply these effects with Photoshop or CSS. I have a feeling that Photoshop is a more appropriate tool.
The image I'm experimenting with is this:
It isn't the best image but for my testing purposes at least it's a similar shape and size.
I know I can use things like de-saturation or a coloured layer with a colour blend mode for this sort of thing. However, does the first image look like it has a specific effect or is it just a case of trial and error?
I appreciate this is similar to this question.
open your image in photoshop, add a new layer on top of the image, fill the layer with a color of your choice (in this case grey/black) then reduce the opacity of the layer. You will get something similar to what you want. This is a simple trick. It can be done in other ways too with more modifications.
Maybe you could get the effect by using css blur and overlaying the image with a gray layer with opacity.
You could also just create the effect in photoshop and use that
is it possible to create the following shape using pure CSS3 - in a single layer i.e.
<div class="nav-bg">...</div>
I'm currently using the traditional slice the curve apart and add it as a bg-image. I'm just curious and i couldn't find anything on the internet about a CSS only method of creating this.
I also gave this a shot, How do I combine a background-image and CSS3 gradient on the same element?, no bueno.
Raphael.js may help you in creating curve lines and straight lines and many other things w/o using an image.
I am building the basic Set card patterns. I can do colours, numbers and fillings, and I have the diamond and oval shapes. Please see my progress in this fiddle.
The last piece of the puzzle is to build a squiggle class for the "squiggle" shape. How can I do the squiggle shape using CSS?
I'm pretty sure you'll have to resort to SVG for shapes like that.
SVG might also make your life easier for those other shapes too. On my Safari 6.0.2 I see a few small CSS rendering artifacts:
In particular, the spacing of the striped diamond due to how transform works (texture mapping) produces something that doesn't quite look completely uniform. You'll need to scale up this screenshot to see the artifacts at the corners of the diamond.
Basically, CSS is not meant for drawing shapes. SVG is meant for drawing shapes. Therefore since you are trying to draw shapes, there's a much higher chance you'll succeed with SVG.
Good job with the diamonds, though. (Note also SVG ought to work on platforms not supporting CSS3 3D; it is a neat trick to skew/scale square to make a diamond but at the end of the day its more or less a hack)
I need to draw a custom shape and fill it with a solid colour or a pattern. I have already achieved the shape and been able to change the fill colour with a 2d html5 canvas and javascript.
However I abandoned the canvas approach as it's a web app for phones and I found have several canvases on one page ran really slowly on older phones in particular.
Can anyone advise on an alternative approach that would work, keeping in mind speed is important? I have been considering:
Drawing with css, but it seems like a lot of markup and messing around to create a relatively simple shape.
SVG - didn't know this existed until last night. This example http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polygon4 seems a lot like canvas, does it have any performance implications?
Overlay some sort of webkit css mask, like this http://www.webkit.org/blog/181/css-masks/ but with a background colour or pattern. Seems like it might be problematic if the page has a background image not a solid colour.
Apologies for the long winded post, I just don't know the best approach to this after canvas proved to be out of the question. I would love to be pointed in the right direction.
Thanks
Check out Raphaël, it's based on SVG and is supported by the following browsers:
Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
http://raphaeljs.com/
With SVG you can use CSS to style the fill, which makes it really easy to set the fill to either a pattern or a solid color.
Here's an example of patterns in svg.
I want to use a diagonal gradient in my background.
I have read this, and I found that it has just only horizontal gradient and vertical gradient in IE.
Is it possible to make the gradient in IE show in the diagonal like Firefox?
You can do it using CSS, but it's kind of a hacked together solution involving two layers. You can read about the details of it here.
Yes, you have to use a background-image though so there may be a limited element size depending on how much you want a page to cost, and you will need to use a separate image.
HTML5 brings along SVG images though which are scalable and take up little space.