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.
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
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
Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
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).
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.