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.
Related
I was able to create a neat pointy flow-chart, as shown here: http://jsfiddle.net/R8Gx3/3/
However, the rendering is not consistent across the major browsers (Chrome, Firefox, IE).
Any thoughts on how to achieve this same effect but in a more reliable way?
Obviously I could use images, but I prefer CSS wherever possible since it's easier to edit colors in CSS (rather than create new images).
I can't just use a triangle character since there is a textured background behind the elements, so I need transparency.
I think you'll have better luck placing UTF-8 triangles, two at one end and one at the other, rather than depending on border-hacks.
http://www.fileformat.info/info/unicode/char/25bc/browsertest.htm
http://en.wikipedia.org/wiki/Geometric_Shapes
For modern browsers you could use CSS tranforms (for IE that would be 9 and above)
so you make a box with top/right border and rotate it 45 degrees.
This way you can simplify the html and just apply the arrows with :after and :before (each one being one of the tips)
Demo at http://jsfiddle.net/gaby/FJEFP/1/
So I'm looking at a specific application for a web browser which requires me to express color as a straight alpha channel with a black and white alpha channel as a separate element. (an example of both types
I know many moons ago, IE supported some perverse filter options, but since I'm doing css3 transforms, I need this to work in a modern browser, preferably Chrome.
Basically what I'd like to do is have an element with CSS transforms applied, specifically rotation most likely, then I'd like to take that and copy it to another equivalently sized element which has the black / white transformation applied. An additional bonus would be setting the original element to use straight alpha, but I can live without that for now.
I haven't been able to find any routes with which to start investigating. If you have one, I'd be super grateful. My last resort is to start doing things in WebGL or Canvas and modifying the output there.
Two or three different elements stacked on top of each other using absolute positioning and z-index? This would require you to save two different images which I'm guessing you're trying to avoid.
You can do CSS 3D transforms. Browser support is basically there in newer IE, Chrome, Firefox, iOS and Android.
where can you use them
how to use them
MDN
I've actually figured out the answer... it's CSS Shaders.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
Not yet available, but soon.
The reason not to use Canvas is for simplicity in authoring. (Long story.)
Is there any way to make ie (7,8) display a gradient AND a background-image on the same div?
The only way I got it working (but only almost) was by using two filters, one for the gradient and one using the AlphaImageLoader - but of course, then you can't position the image.
Declaring a background-image and gradient filter doesn't work, because it simply won't render the image - only the gradient.
Is there any (preferably non-js) solution to this?
If not, I'll have to resort to using a background image for the gradient as well, which isn't quite as nice but won't make much of a difference either...
I would say that adding a little unnecessary markup is the lesser of the evils here. Either that, or let IE-users live without the gradient.
Oftentimes getting your design to work is a trade-off between semantics, performance, standards and pixel perfection. Accepting that fact was hard for me, but it's made me a better front-end developer - I can work faster, and I can make decisions about what metric is important in a given case.
I'm trying to create a box with round corners using images. I know how to use CSS3 but I need to use images as I have some custom made corners with shadow and transparency.
The result I need:
I have divided the box into several images:
http://i37.tinypic.com/2w6b14g_th.png
I know there is plenty of info about this topic, but I have been working with this for the last days and from the articles I've read I cannot get exactly what I need. The problem seems to be that I need the background of all images to have a some transparency (both the white part and the shadow part). Anyone has an idea on how to do this using divs?
My personal favorite technique is this one: even more rounded corners. Look at the demo page: http://www.schillmania.com/projects/dialog2/. It does exactly what you want.
Plus, unlike other techniques, you don't have to cut up your background image.
I've been wrestling with rounded corners in this way today. I'm using GIF's which have the corners in the colour of the background. Because these are GIF's the corners could be transparent, but I'd rather not worry about what's 'behind'. But in your situation a GIF would be better than a JPG(is this what you are doing?), as transparency is supported, or a PNG if you don't need to support old browsers. Then you can put the background colour in the style for the DIV is you want too.
HTH
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.