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
Related
I'm designing a website which uses a SVG-document as background. I want this image to tile on the X-axis. Which works great, but I wanted to know if it is possible to show one group in the SVG only once, such that in subsequent tiles the group is hidden.
The above image visualizes what I want to achieve. The image having one group (in the image the red circle) that is invisible in the following tiles.
Now I am aware such things can be achieved using additional CSS backgrounds but I am really interested if such thing could be achieved using a single SVG background.
Thanks in advance!
The answer is no. If you are relying on CSS to tile the background - ie. with repeat-x, then no. there isn't any way to do what you want. When an SVG is used as a background like that, it becomes immutable - effectively the same as a PNG or a JPEG.
You will need to use a different method.
I am creating a template for my company that will be used down the road on a variety of different clients sites, and they will all range in color. I have created icons for this template that are currently black (or white) and I want to be able to control the color of these icons via css. They are one simple color and in photoshop if you do a blending option of color overlay and choose 1 color, they look great. Is this possible to do in css so when someone is editing this template for future clients that they can control the icon colors in css instead of having to edit every icon in photoshop every time?
It's possible to change the color of a logo in CSS, but not to solve the problem you are talking about. To make a changeable logo you would make a PNG with transparency where the logo is and background color (of the webpage) in the negative space. Then put it over a P or div that has the logo color you want as its background color.
Trouble is, you have just exchanged having a flexible logo color for an inflexible "background" color.
Better to just include both colors of logo, white and black, as part of a "package" that is put up with all websites. Just call the one you want in CSS where you want it.
If your icon is a shape you can make in css, it could work, but I have never heard of anybody doing what you are talking about before.
Its not possible to change the color of icon using css. You can shape it,you can give transparency,opacity etc
Not possible via CSS. You can use some dynamic technologies like Canvas, but it's not good way. I would rather create tool to create icon sets in desired color. You can do it with PHP (phpGD or ImageMagick here is example of similiar problem).
You can do this with images (as long as the background colour is consistent) but it requires thinking outside the box a bit. Open the icon's image file in Photoshop (or similar). Edit it so that the "icon" part (i.e. the bit that is currently black) is transparent, and the background (i.e. the bit that isn't what the icon depicts) is filled white (or whatever the background colour of the site is). Essentially you've "reversed the polarity" of the image. Put the image in the web page, then use CSS to specify it's background-color. Your icon should appear in that colour. Edit: Something like this: http://coding.smashingmagazine.com/2010/10/31/transparent-css-sprites/
A [potentially] much simpler approach would be to use an icon font like http://pictos.cc/. That's just text really, so you can colour it with CSS as usual.
You can do this with CSS pseudo elements and translucent overlays. You can follow the instructions here: http://www.impressivewebs.com/image-tint-blend-css/
If you have a vector logo, you can do this with SVG logos even easier (by altering your SVG colors).
If you make the icon images into a font, then you have full control over both size and color via CSS. Check out the very popular Font-Awesome font, designed to compliment Twitter Bootstrap.
I'm no font expert, but if this approach sounds like a fit, you'll do something like:
create vector graphics from your icons
load them into a font editor, like FontLab Studio
add the new font to your favorite web application. If you need a guide for this, FontSquirrel.com generates great #font-face markup to include their library of free fonts.
It can be done and works well with Firefox and Chrome as far as I know. Example below.
http://demosthenes.info/blog/532/Convert-Images-To-Black-And-White-With-CSS
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
I would say the best/easiest answer is to use SVG. The logo should probably be in a vector format to start with so that it can be scaled without detail loss from business cards to billboards.
SVG 'images' are based on shapes. Give the shape you want to change a name, and then address it in CSS to change it's colour.
This article:
http://css-tricks.com/using-svg/
and this example:
http://codepen.io/chriscoyier/pen/evcBu
Do an excellent job of explaining how to achieve this and also show off other possibilities.
SVG at least the basics are now widely supported, ie8 is the only browser holding it back and even so there are ways around this via rendering SVG as an image on the fly.
I'm looking to see if this is possible and if so how to do it. I want the user to upload an image with a white background. The image can be anything from a pair of shoes to a hat. The website will then automatically turn that white background transparent then store it. What I want to know is there a way using HTML Canvas/CSS to transform that white background to 100% transparency?
You can have a look at this answer, which explains nicely how to change colors in an image using javascript : How to change color of an image using jquery
However, you should do this using server side code, and be aware that results may vary, as just removing a color will not look nice on the edges of your object.
like
img { background-color:color: color matched to the theme}
or
img { background-image:url (a very very tiny gif image with the text "image loading") }
I'm thinking in the benefit of this when user access site on slow connection then background color will give clue about something is there which is diffrent than text content..
It's certainly a good approach. I would however try to assign as much as possible the same background color to the background as the strongest color of the actual background image. This way the website will still be representative whenever the client has disabled all images (as some bandwidth-limited users do or some handhelds by default do) or when its browser doesn't support images. The Web Developer Toolbar is helpful in this, in the Images menu you can choose to hide images so that you can see how it would look like without (background) images. I however wouldn't put a loading gif in. You can however consider to save the image interlaced (supported on GIF and PNG).
Sure, if you want to. In most browsers a space in which an image will load is already indicated, but there's nothing stopping you from doing a background color too if you like. I typically see this on body tags or other block-level tags that have background images, but I suppose you could do it on an image itself too.
In all honesty, I don't think this will actually make a site more usable than one that lacks this "feature."
An image-heavy site will probably look awful with a 'loading' background image, but if your site is not full of pictures, go ahead.
A small loading image is a nice touch, such as those from http://www.ajaxload.info/
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.