I am inserting images in TD's in a table with
style="background-image: url("my_url_goes_here")
Then I apply a transparent PNG mask in that TD so that it rounds the image corners
(same colour as background corners, and it shows the middle of the picture)
I wonder if i can write the ALT of the image in the CSS part (style = "background-image: url()) as if I am to write the ALT to the mask image (which is what users can save if they right click on the image), Google will index transparent masks with ALT from the image.
If it's not clear what I'm asking, I will explain further, just ask.
Also, a friend of mine told me just minutes ago over the phone that css3-round borders can be applied to all sorts of things, not just borders, but also images etc. It'd be lovely if this is the case, i'm not sure round borders will round images too, never tried it tho' (exception as usual IE, where they show square).
Thanks.
No, you can't add alt to background images
Yes, it's possible - http://jsfiddle.net/TyFM7/
No css does not suppport the alt tag.
As for rounding image corners with CSS that is possible.
http://www.css3.info/preview/rounded-border/
The alt attribute is meant to provide a text-equivalent in the absence of a loaded resource. It doesn't go in background images, it goes on images, areas, etc.
Source: http://www.w3.org/TR/html4/struct/objects.html#h-13.8
As for rounded corners, border-radius works on images as well - even in IE. If you want to see the current best approach to providing styles for this property, check out http://css3please.com.
img.rounded {
-webkit-border-radius: 12px;
border-radius: 12px;
}
You don't need alt tags for background images, as you wouldn't want these actually indexed.
CSS border radius can be added to most things, here is an example of an image with the border radius added:
Example of image with 30px border radius
Related
So I have a png file with a solid blue color. If I open it in any paint program (have tried multiple ones) it says that the color of the entire square is rgba(126,234,242,1.0). But when I open the PNG file in a html-page, and tries to make an identical square with pure CSS, the color comes out just slightly differently, even though I'm setting the color to the same exact rgba value. How is this possible? And what can I do to match the color of the CSS square to the PNG-square?
HTML:
<img src="blue.png"/>
<div></div>
CSS:
div {
width:100px;
height: 100px;
background: rgba(126,234,242,1.0);
}
Image:
I have tried to research this subject a bit, and I believe that it has something to do with color profiles. As far as I can understand, sRGB is the default color profile for everthing web-related. However, I've made sure that Krita, the paint application I'm using, is set to use sRGB, and I've both tried checking and not checking the box that says "embed sRGB profile" when exporting the PNG file from Krita. The two squares looked different in both cases.
Thanks in advance!
EDIT:
As suggested by Temani Afif, I used the color picker in chrome to look at the rgb-values.
First square (PNG): rgba(165,230,241,1)
Second square: rgba(126,234,242,1)
So is the correct approach just to pick the color in a browser instead of in a paint application? And I still don't really understand why the colors are displayed differently.
EDIT 2:
I thought it might be helpful to explain my real-world context of this problem. I have a menu designed with CSS in my javascript game. The menu has a PNG background, and buttons whose color is defined in CSS. I also have a "concept" PNG, where the entire menu with the buttons are drawn over the background. In the real html menu, the background looks identical to how it looks in the concept PNG, and I would like the buttons to look the same as well. Just color-picking the rgb-values from the concept PNG doesn't work, as shown with example above. Doing the workaround from my first edit works for my monitor, but doesn't for other monitors.
EDIT 3:
The workaround works for different monitors with the same computer. With another computer, the squares looks different again.
I have a website created in MVC4.
I have an image. And I only want to show the shape (an arrow) of the image. And I don't want to show the rest of the image (the background).
<= only the white background of the arrows has to be disappeared.
How do you do that?
I tried this, but with this the whole image will disappear, in stead of a part of it:
.images_top {
width: 30px;
text-align: center;
vertical-align: top;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
First of all I think you can use a PNG with alpha channel.
If this is not possible look at this tutorial about how to clip images by using the SVG clip-path.
http://www.html5rocks.com/en/tutorials/masking/adobe/
Even though it is possible only in recent browsers.
Use PNG Images for Transparent Background. You can use any online converter to convert your image to PNG.
Apart from the now better supported PNG (and PNG8 with better fallback-support (looking at IE) and a (configurable) transparent color (index from the pallette) instead of alpha, pretty much just like GIF), there is also GIF which has 'always' been supported (and is no longer cumbered with legal issues, which were only due to it's LZW based compression-algorithm, that one can bypass).
Because of the lack of alpha-channel, creating nice transparent PNG8 and GIF images (without the dreaded overly visual grainy (often white) borders) is somewhat of a true art, infact pixel-art.
The trick is to touch-up the borders between color and transparancy by hand AND to set the image's background-color (when rendering from alpha channel to single color-index transparancy) to the average color of the background the images are going to be used against.
The idea of fatter png's is that they have alpha-channels which will give you (for clear example) nice shades (if you had applied such an effect) that will blend with any background. Now with modern browsers, this works pretty nice (and doesn't require the pixel-art). Pixel-art PNG8/GIF can still have it's place though, for base64 encoded ui-elements, usually small icons.
I've picked out a color that I want to use throughout my website - it's the color of the logo and of the header, among other things. In my case, it's #7ed321. I've created the logo and exported it as a PNG with the color profile stripped.
Problem is, the page looks completely different in Firefox, Safari, and Chrome - each are rendering the colors their own way.
Chrome, Safari, and Firefox, from top to bottom. That's the logo and a piece of the header below. They might look the same on your screen, but they sure don't on mine.
Chrome - renders both header and logo as native #7ed321 (sRGB #94C9D6).
Safari - renders both header and logo as native #54df16 (sRGB #7ed321), a much brighter green.
Firefox - renders logo as native #54df16 (sRGB #7ED321) and header as native #7ed321 (sRGB #94C9D6). So the colors don't even match.
Basically, Chrome realizes if I asked for #7ed321 in my PNG and my CSS, that I always want to see #7ed321 on my screen, so it does the necessary conversion to sRGB to match my monitor's color profile.
Safari assumes I provided both values in sRGB, so it does no conversion to my target monitor.
Firefox does no conversion for my logo but does convert my CSS-provided #7ed321 to sRGB #94c9d6.
As a result, the same page is looking inconsistent among browsers. The difference isn't significant, but I'd like to get them looking closer if I can. Is there anything I can do to my CSS/PNG to make the page look the same?
There is a way to ensure the logo and any other occurrences of the brand color in the code are the same. That is to use CSS to color any instance of the green.
Export the logo as just the white leaf with a transparent background. Then you can form the logo using CSS to create the circle and fill in the background color. For example:
HTML
<div class="logo"></div>
CSS
.logo {
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background: #7ed321 url(../img/logo.png) center no-repeat;
}
Now the code has applied the green color, so it will match any other green you apply with CSS such as the header.
As for making all browsers and screens look the same - that's a bit of a losing battle. Users all use different screens and the color will be rendered differently. It would quite honestly be pointless spending any time trying to do anything about that.
An alternative to using CSS to build the logo like this would be to show the logo as a font. You can do that will a tool like Fontastic which allows you to then do resizing and cool CSS transitions on the logo if you wanted: http://fontastic.me/
If you have a vector version of the image you could use the svg format. With svg you can access the color hex codes for stokes and fills directly from the markup. But the problem probably has something to do with that some browsers can make use of your operating systems colour profile and others can't.
It's an ancient and crappy solution, but sometimes the best way to make sure that at least the two elements match is to color the box created with css with a 1 pixel png that you export with all the same color settings as the logo.
I've googled a lot and I've just given up, so I'll turn to the experts out there to see if someone can help me in my quest.
I've got a logo converted to .SVG through illustrator.
My objective is to use that logo to clip (or mask if you prefer) an entire div so that just a small part of it shows through and you can see the background.
I decided to go the .SVG way since I want to create this website as a full scalable experience, and thus a .png would not work accurately from full HD resolutions to 1024x768.
So firstly I would like to know how to clip a Div and at the same time how to "inverse clip" so that instead of just showing that part of the div it would show everything but it.
I'll be eagerly awaiting your answers as I really need them...
Thank you in advance.
If I understood you correctly (and I'm not sure about that), you want to show 'everything in the background that fits the shape of your logo', is that correct? If though, what about 'inverting' your logo, making itself transparent and give the background a neutral color like black or white or something. Then you could put two divs upon each other, with the top being your Logo.
I created a fiddle to show you what I mean:
http://jsfiddle.net/ds82/R4rBH/2/
Der circle is the logo and it's transparent inside and outside the blue line and it's a svg. Hope that is what you want.
I don't think you are going to be able to do that. I once saw a plugin and a generator like this, though I think that that is probably not your best bet.
I would incorporate whatever text you wanted to clip in the svg which I'm sure is easier to do than finding a way for your html to interact properly with the svg.
Well since I couldn't do it through .svg I ended up just using a .png where everything is black and my Logo is transparent. Kind of sad that I couldn't find the answer though...
Basically what you want to do works only in Firefox at the moment. The way is to define the correct <mask> element in SVG and then apply it via CSS:
#content {
mask: url(remote.svg#logo-mask);
}
(or, if you embedded the SVG:)
#content {
mask: url(#logo-mask);
}
This works:
a { color: hsla(0,100%,50%,0.2) }
And this does not:
img { color: hsla(0,100%,50%,0.2) }
Is there something like img { opacity: 1 } that allows to define hsl values to an image?
Text and images are 2 different things.
Text is rendered by the browser with the settings you provide (decoration, size font color ...)
an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.
Parameters like color etc will not have effect on the image.
By the way, the color parameter defines the text color.
Edit: If you want to apply a "color" to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.
You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.
In Internet Explorer you might be able to use a static filter.
This works (press 'run code snippet' multi times):
.colors{ filter: hue-rotate(90deg); }
<img src="http://lorempixel.com/300/150/" heigh=150 >
<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >
degree is 0 to 360.
W3Schools.com: CSS filter Property
The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.
Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.
opacity is different, because it specifies the alpha value for the whole element.
The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.
http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue