I'd like to use zoom property in CSS for images but would not like to have a blurry effect to enlarged images but rather pixelated. How can I achieve this?
edit: if neccesary, it is ok to use other properties or other languages.
You cannot (currently) use upscaling and specify that the browser should use nearest-neighbor zooming, neither with HTML images, upsized HTML5 canvases, using drawImage() on a canvas to draw the image larger, nor zooming up images on SVG.
Here's a solution (written for this related question) showing how to 'zoom' an image using nearest-neighbor pixelation by re-creating the image as rectangles in SVG: http://phrogz.net/tmp/canvas_image_zoom_svg.xhtml
Here's another solution showing how to achieve this same effect using HTML5 Canvas (drawing rectangles on the canvas for the zoom):
http://phrogz.net/tmp/canvas_image_zoom.html
You might want to try a lightweight jQuery plugin called Zoomoz. The settings include easing and native animation too.
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 would like to mask an image for a design with a rounded hexagon. I think the ideal option would be the CSS clip-path property, but it doesn't seem to allow for rounded hexagons—unless there is a tool that allows you to upload shapes to it and it generates the polygon code. I've found Clippy and CSS Plant's generator, but neither allow you to upload or easily generate rounded shapes.
SVG clipPath is the other option. The main issue with this option is it isn't responsive. I'd like the SVG shape to be the max-width of it's container and fit the image within it, but it doesn't seem to do that—at least with the CSS I have now. This is what I've been working with: https://codepen.io/apautler/pen/eMBEoO. I looked into objectBoundingBox, but I can't seem to get that to work either.
Any help that can point me in the right direction of how to get a rounded hexagon that is responsive would be very helpful.
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.
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'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