I want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?
I am using the preloaders from preloader.net
The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”
If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.
Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):
But if this spinner gets scaled down, it looks nice:
Be sure to use
img {
-ms-interpolation-mode:bicubic;
}
to make it also look pretty in older IEs.
You can use a site that helps you generate your spinner. A great option is :
loading.io
Related
I was browsing the home page of canva.com
I was surprised by the UI effect of hover blur effect on the home screen. How can we develop such a feature on our website. Is it using CSS3 or some other javascript plugin libraries.
Thanks
They use a blurred background image, a canvas and an unblurred version of the image. Moving the mouse 'draws' (a portion of) the sharp image onto an otherwise transparent canvas. This makes it look like some kind of magic, when in reality it's just selectively copying a src image onto a canvas. I imagine a second, off-screen canvas is used to allow the 'drawn' lines to have their opacity faded. This canvas is then used to blend the copied image with the blurred image. Look into "canvas blending modes"
Wondering if anybody could help me out. I have the Masonry jquery plug-in which is laying out a set of images and when you zoom in or out in the browser, they change place to fit more/less of the images on the screen. Is there a way to, when i hover over these images, they would fade to black and a description of the image would appear in it's place.
A bit like http://www.flickr.com/ but rather than the small box at the bottom when you hover on an image, a box that covers the whole image and each seperate image can have a seperate description.
some possible hover effects is like Image effects, like grayscale, blur, sepia, etc. I still haven't figure out the best hover effect that have fix height/width.
I have a collection of HubTiles with user-selected images. If an image with transparency is selected, the HubTile's background color (PhoneAccentBrush) shows through. Is there a way to style just the photo background to Transparent without altering the animation backgrounds? (Although if the Title is displayed on a transparent background, that's acceptable, but I'd still like the flipside to use the accent color.)
I've done some searching on styling the HubTile, but haven't been successful.
Apparently the fastest way to find an answer on the interwebs is to post your question to SO. I found this not two minutes after posting.
Konstantinos Kyriakopoulos has a blog post with the template styling I was looking for. I couldn't set the image background to Transparent, but I was able to set it to PhoneBackgroundBrush, which works just as well.
Specifically, I set the Background of the Border in the TitlePanel Grid.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image
I have a dynamically generated PDF that can be in one of two modes. If in a draft mode, the only real difference is a watermark that states DRAFT on each page.
I am using a page event, so on the startpage I print the image, so that it is under everything. When I did this on the endpage event then it would be on top of everything, which was bad.
I would like to have alternating colors on the tables so that it is easier to see, but if I set the gray background to be 0.9 then it is opaque and the watermark is covered. If I set the background color to be null and the gray color is 1.0 then it is transparent.
So, my question is, on the non-white alternating rows can I get the watermark to be seen.
Ideally it would be nice to be able to place the image on top of the layer with the borders and background colors, so it would be under the text, but, it appears that isn't an option, as, when I use the stamp with the under content layer it would be under all the cells, since they all had colors set, so nothing was transparent.
UPDATE:
I haven't tried this yet, but it appears that if I save the PDF then using the PdfStamper I can save the graphics state, set the opacity for the image, then restore the graphics state, and it may work.
http://www.vbforums.com/showthread.php?t=518686
But, I don't see any way to do what I would like without saving it first, as I am actually generating and streaming directly to the browser, and would prefer not to save, if possible.
By using the link in my final update I was able to get the watermark to work.
So, I save the file, then I use a MemoryStream to read in the file and I save the graphics state, set the opacity, set the watermark and then restore the graphics state.
I then stream this back to the browser and delete the file.
I haven't found any way to do it that works better than this. What is nice is that an image is not needed for the watermark, so I set the font size to 96pts, and that seemed to work fine, in landscape and portrait mode.