Is it possible in any way to create box-shadows around a transparent image? For example, a logo has many corners and i want the shadow to be drawn around these corners. When I add some box-shadow, it will draw rect-shaped shadows.
Thanks
It is possible. Click here for more information, an explanation and a demo:
http://demosthenes.info/blog/600/Creating-a-True-Cross-Browser-Drop-Shadow-Effect-With-CSS3-amp-SVG
Unfortunately, box-shadow can generate shadow only around the box of the element, which is always rectangular. There is CSS filter property that can generate shadows around non-transparent areas of the image (see http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison), but its browser support is still limited.
Related
have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)
I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -
html:
<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >
css:
img {
mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);
mask-mode: luminance;
}
that seemed to me that it should work - but it actually had no effect at all :(
First of all you should know this: https://caniuse.com/#search=mask
And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/
As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**
mask-mode is not supported in 90% of the browsers, including webkit based.
Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.
If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..
or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.
But no way to apply the same image as a mask to get rid of the white
Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?
I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.
Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.
Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/
You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.
What you need to do is create a div with a class, then modify the div's shape and had a border on it.
Any way to do this kind of tab design? I can't seem to get my hands on good code online to accomplish it. There's two border-radius for each tab. IS it even possible?
You can use an internal div in each tab and set border for that.set border for your main tab and now you have two border
A quick Google search for "css curved tabs" gives an excellent article from css-tricks.com as the first hit: (Better) CSS Tabs With Round Out Borders. The code is right there to copy and paste, but here is a summary of the css tricks involved:
Use the css :before and :after pseudo-elements to create the tab's rounded elements with curved border-radius styles. (These pseudo-elements with position: absolute essentially provide two extra drawing layers - think of layering a transparency sheet on top of your tab's <li> html element, and drawing your tab's rounded elements on top of that).
Use clever box-shadow settings on the rounded elements to hide the square edges of the underlying <li> element.
Use slight negative margins on the <li> elements to allow the tabs to overlap each other.
This keeps all the css styling on the same element, and is easily configurable with different gradients, color schemes, and styling elements.
It's definitely possible, but a little bit tricky, because the effect has to be simulated somewhat. For example, for the right edge of the middle tab, the top border curve must be defined using border-radius on the middle tab, but the bottom curve must be defined using border-radius on the right tab. The rest of the effect is done by having elements behind the tabs with the appropriate background colors.
There are several ways this could be accomplished with images. You could do background image with a transparent png, for example.
Is it possible in HTML5, CSS3 and (most likely) SVG to create a shadow like the blue precent icon throws?
For example, a site content admin picks a picture for the icon (it can be a PNG with transparent border), and the markup with the rules give it a shadow like on the picture. The ideal variant would be a dynamic shadow that changes if we rotate or scale the icon.
You can get this effect by making several box/text shadows farther and farther away. Realistically, this would be very hard to code yourself, so you should probably use mixins or javascript. See this example: http://codepen.io/awesomephant/pen/mAxHz
This is how my current header looks like. I want to edit it that the part in the picture below has the same color as the div next to it / the border. How can I do this?
Code on jsbin: http://jsbin.com/ezeyib/3/
You can acheive this by oversizing the border thickness and then setting the parents overflow to hidden.
See this example.
http://jsbin.com/ezeyib/5/edit
I mean you need to create a png file using Photoshop or Illustrator to retrieve the expected result.
If you can have a plain background instead of a gradient background, you can create two big blocks (one green and one blue), and on top of those, create a shape with rounded corners which matches the actual look.