I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
Related
I want to set background on my website like the one one tailwindcss.com. How can I accomplish this?
Tailwind Website
Still wondering how is this implemented.
Having inspected the Tailwind website for you, it appears they use a simple JPG image as the header background. Since it's not SVG, I can't know how it was made.
Another way to do this, a different approach to #Gugalcrom123's, is to use a css gradient.
Method 1. You can use a website such as this:
https://cssgradient.io/ to come up with the gradient and set that as a background. The website also generates you the code you can use to set it as the background, as well as a regular color fallback in case your browser does not support it. This is where Tailwind probably decided to use method 2.
Method 2. You can use GIMP, Photoshop or some similar drawing tool to draw a gradient, and put it as an image. You can also use Filter: blur() on the img in css to blur it with pixels or even use your drawing tool to blur it out! To make the grid, you can do a similar thing, except after drawing the grid, put it behind the gradient layer and set the gradient layer's opacity to something lower than 100%, so the grid shows behind it.
You can blur it using a filter: blur(10px); on CSS... But be careful, it might make your site slow.
Also, have a look at SVG FILTERS here: https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/
I found a way to do this with CSS3, but IE still doesn't support it. I wish to know if there is a way to do it so that it may be compatible with all of the popular browsers.
I understand I can do it with a mask, but if I want to display a user-uploaded image in the background this is not an option or at least I don't know how to achieve that. Can anyone give me an idea about it? Maybe an image processing in the background when the image is uploaded to turn it into circle and make a transparent background, but I don't know how to process that?
You can do this via CSS3 border-radius, but as you mentioned, old IE does not support this property.
But PIE.htc (PIE.js in my example) can pollyfill this in-
hence- http://codepen.io/hwg/pen/IBrow.
This uses standard border-radius, and a copy-and-pasted pie.js,
The border radius is 50% of the height and the width of the image.
I can't speak for performance (see the docs), but I think this does what you want.
You can overlay a PNG image that has a transparent circle in the middle of a square with the background color you need. Then position this over the uploaded image to give it the illusion of being a circle.
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(demo here)
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
x y z
r t s
u v a
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS
Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?
I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.
The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.
There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.
Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.
These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.
blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.
background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.
EDIT:
The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode
If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)
chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders
* note that the flags required for this might change at any time
Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/
(If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)
While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.
Some extra reading resources on blending modes and the css properties:
http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
http://html.adobe.com/webplatform/graphics/blendmodes/
Simple with a bit of SVG:
<svg width="200" height="200" viewBox="10 10 280 280">
<filter id="multiply">
<feBlend mode="multiply"/>
</filter>
<image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>
and some CSS:
#kitten:hover {
filter:url(#multiply);
}
The fiddle: http://jsfiddle.net/7uCQQ/381/
Just for the record, this guy is developing a library to do so. I just came into it while doing a research, haven't tried yet.
https://github.com/Phrogz/context-blender
It is possible with a 24.png - if you know the trick.
In illustrator you can export the graphic as a 24.png, but this never seems to work like multiply.
I've found away.
get your multiplied graphic on its own
place a solid black 100% box behind it, and select both graphics
in the transparency window select 'Make Mask' and then 'Invert Mask'
export as a 24.png file
works just like a multiply when z-index(ed) on top of a picture.
No such ability is available. The only compositing options you get that are even close are:
lighter compositing mode on an HTML5 <canvas> (which is a+b not a*b, and has about the opposite effect to multiply)
min or subtract Compositor filters in IE only.
Neither are really practical.
In general you should not attempt to export Photoshop comps as layers, but render them down to a single opaque image. For rollovers you can make two images (one for normal state, one for hovered) and swap between them using the CSS :hover style to choose a different background image, or—better, as it requires no preloading and reduces HTTP requests—combine both images into one and use background-image/background-position to display the right part of that image in each state as a background image. (“CSS sprites”)
I recently had the need to do exactly what the OP asked so I searched around. I found a great way to replicate the multiply effect by making a transparent PNG in Photoshop.
Create a new document with the same dimensions of your multiply
layer.
Fill the document with black.
Add a vector mask (the icon to the left of layer "fx" at the bottom of the layers window).
Alt/Option + click on the mask itself.
Now copy and paste your multiply layer into the mask.
Cmd/Ctrl + i to invert the layer you just pasted.
Create a new layer below this layer and add the image behind the multiply overlay.
Everything should look pretty close to your desired result. If needed, you can adjust the opacity of the masked layer we created.
When it looks good just toggle the bottom layer's visibility and save the masked layer as a PNG et voila!
All credit goes to Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png
Check this out:
http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html
Using those instructions, I had great success watermarking a black-and-white image (ink drawing in my case, with blacks and greys on a solid white background) onto a dark background (wood in my case). There is hardly any difference with the real Multiply filter of Adobe.
I used the Photoshop instructions to remove the whites from my image, leaving only blacks and greys on a transparent background. Saving this to PNG and putting it on the wood in CSS/HTML still lookedmuch worse thanmultiply, but strongly reducing the brightness of the PNG solved it (the light greys stood out before, making it ugly).
In general I recommend you play around in photoshop, replicating the web situation: a semi-transparent (no special stuff) layer on top of a solid background. Tutorials such as the above may allow you to reproduce multiply or other fancy effects.
Not sure if you will have any luck. As far as I know, it isn't possible even if you tried to integrate some advanced JavaScript with it.
I've tried jquery.pngFix.js and pngfix.js and neither seem to cater for all issues.
Any images that are anchored end up distorted with the former and the latter doesn't like positioned/repeating background images.
Unfortunately the design I'm working on calls for PNGs to be used in the way I have done, so I'm not really sure where to go from here?
google for DD_belatedPNG - this is the best one I have seen
You can check out this site for a decent fix:
http://www.greyhats.com/tech/a-better-ie6-png-fix-37
I have used that successfully, with some caveats. You can't make the image tile, which is a deal-breaker for some uses.
The ways I deal with transparent pngs and IE6 are:
Make the transparent color of the png the background color of your site. Works best for things like rounded corners, drop shadows and elements that overlay the background only.
If the background is a gradient or image, replace the png with a gif in your IE6 stylesheet. This is very easy if you are using sprites for background images. The rounded corners may not be as smooth in IE6 as other browsers but I consider that an acceptable trade off.
If I really need a javascript solution, I use DD_belatedPNG