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);
}
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.
After looking at Google's new /design, I was wondering if there's any way to accomplish a loading spinner like the one under /progress-activity (Scroll down to "Circular") with HTML / CSS?
I'm only talking about the animation itself. As far as I know it might be next to impossible to round the borders of the spinner like Google did.
I only managed to do a very (very) simple version of this spinner, but I couldn't figure out how to animate the "border" itself (like the spinner in the newest version of Android). Basically I just used border / border-radius: 50%; and an infinite CSS animation to rotate the HTML element (0deg -> 360deg): http://codepen.io/anon/pen/mqiCf
Or do i have to use an "old-school" .gif to get something similar to the "Android L" Spinner?
I think it'd be possible to achieve using SVG, providing whichever browsers you're targeting support the animations required.
I'd use two components: the partially-opaque "growing circle" effect at the start is one element, and the spinning circular outline is a second element.
The aspect which is impossible to achieve using HTML is having the length of the circular arc changing. In SVG, you can achieve that by using an animated stroke dash array. Here's an example of that.
I don't have time at this moment to make a better example, but this is a little closer. I tried what Shomz said in the comment, about using a white loader over the blue one. It isn't perfect, but play around with the timing a bit.
http://codepen.io/anon/pen/bBKJe
I have to reproduce this wireframe: http://www.problemio.com/wireframe.pdf
You see the narrow div that has a blue and black background and on the right side has the words "store | support | search"
Is it possible to reproduce that background in css? Or do I need an image for this?
Also, any way to tell what exactly is the html code for that blue?
Thanks!
O_O no... you can't reproduce that kind of random noise background in CSS. You have to use an image. For the color, take a screenshot and open it in GIMP/MS Paint/Photoshop/most any other image editing tool and use the eyedropper to pick out the color. The value you want is the 6 character long one like #FED2E6 or whatever.
It won't be possible to create such a complicated pattern in CSS alone, you'll need to use an image.
It's a bit tricky to know what you mean by the 'blue' colour in the image as there are probably quite a few different shades of blue in there. If you've got access to a copy of Photoshop open the PDF up and use the colour picker to get the blue you want.
Is it possible to reproduce that background in css?
It could possibly be a CSS3 pattern. Here are some nifty examples. But as others have said, there's a lot of random noise in that background, so it's most likely an image.
Also, any way to tell what exactly is the html code for that blue?
Yes, if you have a program like Photoshop or Gimp, you can use a color picker to get the hex code of any pixel you want.
The background on that page looks like an repeat-x of an image. You'll probably need to do something like that.
Update: You could use a .png for the "noise" and set the background color like so:
.menuHeader
{
background-image:url('noise.png');
background-repeat:repeat-x;
background-color: #0000FF; /* whatever you want to set the color to */
}
I have this HTML code in which a QR-code is generated via AJAX :
<div class="qr-border">
<p id="qr" class="ajax_qrcode{if $cart_qties < 1} hidden{/if}"></p>
</div>
and I would like to set a border image around the QR-code. I have this image :
and a right corner image :
So I tried this in the CSS :
div.qr-border p.ajax_qrcode {
text-align: center;
padding-bottom: 1.0em;
float: center;
border-image: url('../img/qr-code-border/border.png') 27 27 27 27 stretch stretch;
border-bottom-right-image: url('../img/qr-code-border/corner.png');
}
but nothing works... Do someone has any suggestion ?
thank you for your help !
I don't think it's possible at the moment in any browser. I don't know of any browser that has implemented the full set of rules. Webkit, for example only seems to have implemented the shorthand border-image property. So you will not be able to set a separate right image.
This site has the best explanation of how CSS3 border-image works. It also has an interactive demo from which I take the following quote:
The border-image property in CSS3 is freakin' complicated. Way beyond a simple border, it is really like 9-slice scaling.
I don't actually think it's even possible to do what you want with CSS3 border-image even if a browser had implemented the full set due to the way in which a single image is sliced up to make a border.
border-image is a very new property in CSS3, and as far as i know, no browser supports it natively.
However, you can probably get it to work in Chrome and Safari by using the proprietary -webkit-border-image property instead.
Edit: try -moz-border-image for firefox as well.
Edit again: Your css selector is wrong, there's your problem. It should look like this:
div.qr-border p.ajax_qrcode
You treated the qr-border class as an ID.
If you just want a straight black border, why not just place the image in a slightly larger box (div) and make the background color black? The margin between the outside of the box and the QR-image should be black, and should ultimately provide the same effect right? Unless QR codes work differently with transparency...