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)
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
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
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
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 am drawing three circles in my flex application, using actionscript. But these circles are now pure 2D images, which is not looking good. How can I make it look like 3D using some shadows or shades inside the shape.
Cheers,PK
If you want some 3D-ish effects, you should look into the usage of the bevelFilter. I have found some links that show you how you can use this filter:
http://www.republicofcode.com/tutorials/flash/as3filters/
http://wonderfl.net/c/6AxW
http://www.flashactionscripttutorials.com/?p=projects&actionscript-functie=applyFilter
If you want genuine 3D-objects, you should use a 3D-library (I would recommend Away3D).