So I am experimenting with using icons in my CSS using base64 encoded pngs. I have used http://www.motobit.com/util/base64-decoder-encoder.asp to convert them. However, the pngs only have an 8bit alpha channel, the pixels are either fully opaque, or fully transparent, no partial transparency. This is leaving my icons with hard edges. Any ideas of a 24bit alpha channel is possible through base64_encode?
The encoder in that page may be buggy. I made a PNG with alpha channels in Photoshop, encoded it using PHP's base64_encode(), put it in an image, and it works. Take a look at this fiddle for HTML and this fiddle for CSS.
Related
Often I get a sketch file where a designer put the opacity on a colored text. This in itself isn't that awful thing, since I can just use rgba for color on my text in css.
But the problem is that this is a taxing function, and there really is no need for text to be opaque unless there is an image underneath it.
I can use a tool like http://marcodiiga.github.io/rgba-to-rgb-conversion
But I'd like to instruct the designers not to do that in the future. Now, knowing them, they probably won't use the above link, so I was wondering if there is a way in sketch to set the opacity of the text and just 'convert' it to rgb or hex color, depending on the background?
This would make my job a bit faster and easier :)
Is there a functionality like that in sketch?
normally #AARRGGBB is used for hex color with opacity. When you set AA to FF its fully opaque. But in some applications there may be a control that restricts number of digits when you enter hex color (probably there is one and limited to 6).
I didn't find anything easier than using a color picker to sample the value of the rasterized pixel. I use Affinity Designer but there are many other options out there.
If I have a png image that is 127 alpha, and I have the same image with normal alpha (255) and a CSS style of opacity:0.5, which will render faster?
The reason I'm asking is I want a few partially transparent clouds in a webgame, and I'm interested to know which is a better technique to put less strain on the computer.
PNG will do better.
To render element with opacity < 1.0 the browser will 1) create bitmap buffer, 2) render your image there and then 3) render that buffer to the target.
With PNG it will do just #3.
Particular details may vary but these steps will be there in one form or another.
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
Is it possible to make this texture in pure css?
See this also for texture: http://dribbble.com/shots/70256-Background-Textures
Assuming that you don't care about supporting older browsers, you can do this:
body {background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAACcCAMAAAAu7ofdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtlQTFRFbnB2bW94bG50cHJ4bnF6a212cHN8c3V7dXd8c3Z+aGpzdXiAamxyb3F0d3l+bW9yZ2lyd3qCeXuAdnh7aGpwZWdwe32DZ2hteHl9eXyFb3F3bW91cnR6bnB5Y2VtbG53bW93e36HdHZ7bG52bnF5bW92cXN5cXR8dHd/bG51b3J7cnV9foCGb3J6YGNrbXB4dHZ8cnR7bnB3aWt0b3F4cXN6cHN7a211a21zb3J5bnF4dHZ9dnmBf4GHc3V8bXB3a210dXd9cHJ5cnV8bnB4cXN4cnR5amxzaWtzenyCb3F1c3Z9fX6BcXR9dnh9foGKdHd+cHN6b3F2fn+DcHJ2cXR7eHp/ZWZsdXd7dXd6aGpycnV+b3F5aWtxbnB0bnB1cHJ6bW90c3V6amx1dXh/cHJ3bXB2XWFpdnh+aWtyeHqAZmhxcHJ1gYOKd3l/bG5zaGpxcXN7bnBzZ2luc3V5bnF3bW9zamx0c3V9XGBodnh/dXh+cnV7dXd/b3J4cXR6cXN8b3F6dHZ6g4WMcnR8dHd9dniAdnh8dHeAcnR4ZGZudnmCeHuEZWZqfH6Ff4KMdnmAdXd+cHN5dHZ5gIKGaGpvdnl/dXh9d3mAaGlyaWtwe32Eb3J2d3h8Z2lxdHZ+c3Z/amxxWlxlfH6Ea21yeXuBd3l8eHuDd3qDcXN3ZmhwZmhvc3Z7cXR5cXN2bG5yd3qBcnV5bG9zen2DdXiBenuAd3l9Z2lvcHJ7dXZ6c3Z8bXB0fH2Cdnd7dHd8b3J1ZmhueXp/d3p/Z2huZGZtbXBzeHp+en2FfX6Ce32GXWFogoSNfYCKcnN4eHqBcXJ3dHZ/enyBc3R3X2Jre32CZWZteXyEfX+FZWduX2Jqd3mBbm91amxwen2Ge36GeXyDbm90foGJdnd8ZWdvcnR3ent/fX+GdXZ7fH+IfYCHc3R6eXt/fYCJZ2hseHuBe36FeHuCcnV6cHF2we0nSQAAKPRJREFUeNpUe4OfZVmW7raOdX3jhu2ItO2sLNu22bat8XSPuse2+Wzb9vsL3rduTefLKf0yom6cs/fCh7V3MBGzLNXWcK25yoVQPBZMOsasTISLShN5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')}
It's "pure CSS", right? =D
See: data URI scheme
Edit:
Looking at the comment you left on Evan Mulawski's answer, here is the decoded PNG of my base64 string:
I just copied a portion of the image you provided in your question. It doesn't tile 100% seamlessly, but it looked "good enough" for posting inside a base64 string noone would ever look at.
body {background:url(background.png)}
Depending on how the texture works, you might be able to do it by creating an insanely large number of positioned <div>s with borders in various shades of gray.
Don't.
You can't do that in CSS. You need to make an image and repeat it on the background.
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
The best way is to set the background image property using a tiled image.
Filter Forge (filterforge.com) has a filter library. See if you can find a suitable image there, then use repeat-x and repeat-y for a seamless background.
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.