I want to use animated GIF in my Gtk3 application. I know this can be done by assigning GdkPixbufAnimation to the Gtk.Image component, but this approach requires the animation file name to be referenced directly from the source code.
Is it possible to specify the animation file in CSS, like "normal" background image? I tried to set the animated GIF as background-image property of Gtk.Image and Gtk.Label components, but the image is displayed statically.
I've been using icon-fonts created at IcoMoon and they are fantastic. For this I import an SVG Illistrator output (or use premade icons) and create font files that are attached using CSS #Font-Face. These are only ever one color.
I've been reading about SVG Sprites like here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
I've tried uploading illistrator SVG files with different colors into IcoMoon (as explained at the bottom of the link above) and then creating a SVG Sprite but the color never comes through (always just one color).
Am I doing something wrong with IcoMoon? How can I create a color SVG Sprite using a site like IcoMoon that can be used to display icons where required?
thankyou
Note: i need multiple colors in each image. (not just one color styled via CSS).
So when I scale a background image in CSS3, using the background-size property, like this:
.one {
background-image: url(sprites/1.png);
background-size: 100% 100%;
}
then it scales the picture:
How can I make it so the picture is not blurred like that? Is it possible without a higher resolution image?
If the whole background image is purely just a black line, as shown, before you save the image, change it to an indexed image (instead of RGB), and give it an index of only two colours. That way there will be no blur (antialiasing) and it will scale perfectly well. It will also make your background image a very tiny file size, which helps for quick loading. Save the indexed image either as png, or gif.
Alternatively you could use a image type like SVG which handles scale operations.
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Though the SVG Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe's PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. SVG has the information needed to place each glyph and image in a chosen location on a printed page
We're using SVGs for the first time for our mobile HTML5 based app sprites file (they make dealing with retina an other screen size differences easy).
I know generated SVGs can be manipulated directly (as they are text files) but can one modify an SVG asset (in this case, a background image loaded via the CSS) via CSS or scripting?
For instance, can we load an all-black SVG object, and then change it to white?
You can't access the DOM of the SVG file if it's loaded as an image (either through img or background-image). You can't style it via CSS either.
If you intend to do these kind of manipulations you should append the SVG to a div. You should still be able to perform sprite-like manipulations to that div. You will be able to style it via CSS or javascript.
The SVG should be inlined. You can copy and paste the SVG into the div that used to contain background-image or load it there through an ajax request.
Instead of animating background-position you can animate with left or -webkit-transform: translate(...).
Is it possible to have a transparent photoshop image render in CSS? I tried saving as jpg and gif with transparency selected but when I overlay it in css it shows the background color behind it and not the image which is under it. I played with the z-index and it didn't help.
Thanks
JPEG images do not support transparency.
You need to save the image as a PNG file, which does support transparency.
If you need to support IE6, you'll also need to use the filter proeprty.
You need to save it using an image format that supports the type of transparency that you want. The JPEG format doesn't support transparency at all.
There are two types of transparency, transparency index and alpha channel. The GIF and PNG-8 formats support transparency index, i.e. one of the 256 colors are chosen to represent transparency. That means that each pixel in the image can only be either 100% transparent or 100% solid.
The PNG-24 format support alpha channel. That is transparency value for each pixel, so that it can be anything from 100% transparent to 100% solid (in 256 levels).
If your image has mostly fully transparent or fully solid pixels, you can use transparency index, but if it has a lot of partly transparent pixels, you have to use alpha channel.
Note that older versions of IE has problems displaying the transparency in PNG-24 images correctly.
First, have a transparent background (as in no background) as the first layer of your photoshop file.
Be sure it has grey and white squares in the background, which means it is transparent.
When you're ready to save, go to the File Menu, and hit Save for Web
Select the PNG file format and be sure it has "Transparency" checked.
Just press SAVE and give it a name and that photoshop image will be saved into a transparent background PNG file which presents more colors, and it's smaller than a GIF file and is as good as a jpg.
As SLaks pointed out, use a PNG image file for this. JPEG won't do, I am not sure why GIF wouldn't work...
I took a look at a project I was doing involving some translucent background and its CSS, and this is what I found:
background-image: url(../images/translucent_white.png);
So it really is that simple. Just save your picture with transparency as a PNG.
You need to save it as a .png file as mentioned but this is tricky when it comes to IE6. It depends on if the image you have is using a gradient that transistition to the transparency. For instance a shadow.
If you have an image that has a shadow (or any gradient) than you are best off using a .png but this will now work for IE6 and you should follow the advice of SLaks. In my experience though I stay away from javascript fixes like this and just choose to save the image w/ the desired background.
If you do no have a gradient then the .gif is the way to go as it will be supported in all browsers.
I recommend using a .gif filetype; it supports transparent backgrounds and works in most cases. .jpgs don't support transparent backgrounds at all. .pngs support nice alpha-transparent backgrounds, but not in IE6. (Using the AlphaImageLoader filter can cause page slowdown and browser crashes.)
First off, make sure that your image has a transparent background in Photoshop - often a white and grey checkerboard. Then, choose "Save for Web" (or something close to that, it varies in different versions) from the File menu, choose whatever GIF preset works best, and be sure that "Transparency" is checked.