I was wondering how I can get shadow on all sides of a div in IE8. In addition to this I want another div that got shadow on all sides but the top.
I have managed to get the shadow on the right and bottom, but not around all 4 sides.. What does the direction property tell me? I have tried with different directions but with no success..
filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
Not possible to use css shadows with ie (only ie9).
But you can use shadowOn. It's a great Image based jquery plugin and very easy in use to add shadows to html elements.
you can emulate what you want with http://css3pie.com/
that, or just add a partially transparent div behind your object that's slightly larger to act as a fake shadow
You may work around CSS Borders having glow effect here. You may change the colors and some others parameters.
Hope this helps.
Related
I'd like to blend a small canvas element over a large parent background element. I've tried the following without success:
JS:ctx.globalCompositeOperation = "overlay";
I believe globalCompositeOperation only works on elements drawn on each other in canvas.
CSS:background-blend-mode: overlay;
I thought the css background-blend-mode might work, but alas no.
I understand the canvas element is in its own little world and that blending it with other html elements is a shot in the dark - just wanted to confirm I'm not missing anything.
Maybe you can draw the "Parent background element" on the canvas and then blend? That might be a bit costly, but it is one of the few options you have I guess.
As vals pointed out in the comments - the answer to my question is: yes, using mix-blend-mode: css mix-blend-mode
Hi i trying manny time but i can't created this.
I should be as like this below images in pure css without any images
and now i want to used only single div .
Thanks advanced .
you could try to play around with this one:
css3gen
see you can make this in css3 easily you can use the before and after Pseudo Class Selectors for right and left side image curve and in the middle you can play with css3 for shadow box & gradient color etc....and it will come in only one div.
I hope you got it the idea what i am trying to explain you.....
see the demo for better understanding:- http://jsfiddle.net/4Y9D5/37/
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
Can you use the CSS Filter attribute for IE gradients AND implement a background image?
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2c8bcf', endColorstr='#0068b3');*/
As far as I know the background has to be "transparent" or none for the gradient filter to work..
perhaps you could wrap the gradient div with another div and put the background image on the outer one?
Wait! it does appear to work, glad I checked..
Working Example (IE only)
sorry about that I really thought it didn't work with a background, but couldn't find a reliable source - anyway in that fiddle above I changed the gradient to go from transparent to black
I'm not convinced that it can be done. It appears that in the jsfiddle above, the hex values have an extra 2 "0"s in them. if you set the values to actual hex chars, the example does not work. perhaps the background will show through if the gradient is going from transparent to a color only