I have an svg sprite sheet which I have created, and I use it on my page using the before parameter as I am using it for my div buttons. There is a lot more css than this, but this is the important bit.
.logout_button::before,
.vat_button::before{
content: "";
width: 1.563em;
height: 1.563em;
background: url("../../images/buttons/test.svg") 0px 0px no-repeat;
float: left;
margin: -3px 10px 0px 0;
background-size: 12.5em 12.5em;
}
Previously I was using png but I wanted the ability to change the colour of my button icons, so decided to change to svg to overcome this problem.
The problem is that I cannot change the colour of the css using this method.
I believe if I use an inline svg I can then change the css, but the problem is this. My svg sprite svg is 60k and I don't want a big wad of code poluting my css file.
Is there a way of including an svg in a separate file in my css without having a pile of inline code in my css file.
I don't really want to use jQuery for this, just css if that is possible.
I have searched an searched for an answer but nothing seems to come close.
Adding my svg to the html is not an option.It has to be in the css as a background image.
Just want to add that I don't want to use css masks as they are imcompatible in a lot of browsers, and take a lot more work to get it to work.
Related
I'm building a website where I use SVGs images for the main background, this SVGs are splitted in 3, the header, the main background and a divisor, the idea is make them looks like just one svg, for desktop the display of them is good, the problem comes in mobile, where in some widths the "browser" or the SVGs start creating little white lines between them (See link picture, the painted zones be for confidentiality agreement)https://flic.kr/p/2naLed2
I tried searching questions already asked about this problem, the first solution that I tried is to give to the SVG's a negative margin top, this works for one of the illustrations, but the other one keeps showing the white lines. I think the problem is about the rendering of the SVGs or something like that, but I can't find a working solution. I'll let the SASS for that part of the website.
The main illustration and the divisor are on the page on img tag
.main-ilustration {
margin: 0;
background-color: #07070f;
.ilustration {
width: 100%;
margin-top: -1px;
}
.ilustration-divisor{
margin-top: -2px;
margin-bottom: -1px;
}
}
and the SASS for the header
header {
background-image: url(../Pictures/Banner-Header.svg);
background-repeat: repeat;
.container-fluid {
padding: 1rem 2rem;
}
}
the suitable solution I can provide is that you need to remove the background from the SVGs files in illustrator and then just set the black background-color to the body.
Now these days I want to believe everything is possible, when I saw the power of CSS - making irregular shapes with block elements, i.e. triangles, chamfered CSS Border Corners — how easy but how enthusiastic! So I tried to dream about something, something that I believe can be possible with some great knowledge of CSS.
div.image{
width: 18px;
height: 18px;
background: url(images/image-sprite.png) -70px 0;
display: inline-block;
}
Suppose I put an "Image Sprite" () with a width and height of 18px. But the image I called is NOT an 18px x 18px box-shaped image, suppose the image is Round or some Irregular shapes. When I put box-shadow to the div, it highlighted like a box, when I put text-shadow, it doesn't work, as the div/anchor element doesn't contain any texts in it.
If I want to put shadow onto the element, not onto the container (like a box-shaped HTML element), as the image shown, shadow to the outline of the background-less image only — then:
How can it be done with CSS? or,
Is that really possible?
NOTE: I know, when I have a background-less image and Photoshop, I can put necessary shadows into almost any element. But I asked the question, if something like this can be possible with raw CSS then it'd be a great achievement for us.
The new CSS filters will allow you to do this but browser support is not super deep.
Codepen Example
<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>
.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);
}
The only way to do what you're asking is by recreating the shape with css or using a icon font.
As the element you want to border-shadow is an image these always become square or rectangular.
I have a sprite image. I want to displayed just one icon from there. How can that be displayed using jsf/primefaces?
I tried the following code but the complete image is getting displayed.
<p:graphicImage value="/resources/images/image.png" styleClass="lockedImage"/>
.lockedImage{
background-position: -110px -98px;
}
The <p:graphicImage> generates a HTML <img> element. You shouldn't be displaying the sprite file as a whole image via <img>. You should be using the sprite as background image of a block level element such as <div>.
E.g.
<div class="lockedImage" />
with
.lockedImage {
width: 16px; /* Set this to icon width. */
height: 16px; /* Set this to icon height. */
background-image: url(#{resource['images/image.png']});
background-position: -110px 98px;
}
(note: #{resource} in CSS works only if you're using <h:outputStylesheet> to serve the CSS file as JSF resource, otherwise you've to hardcode the right path yourself)
Note that this problem is completely unrelated to JSF. It's just basic HTML/CSS. JSF is in the context of this question merely a HTML/CSS code generator. I strongly recommend to take a JSF pause and learn basic HTML/CSS in order to better understand JSF. If necessary, you can generate a <div> using <h:panelGroup layout="block"> in JSF.
I have attached a screen shot below of a recreation of an issue. For some reason when I have a background image style IE8 is taking another style from the same selector and appending it after the background-image style. This is causing issues on some of my pages.
My HTML is simply:
<div>test</div>
My CSS (in the head tag) is:
<style type="text/css">
div {
height: 200px;
width: 200px;
background-image:url("breadcrumb_location.jpg");
border: 1px solid green;
font-family:"Courier New", Courier, monospace;
}
</style>
And here you can see the developer tool in IE8, why is the border showing up at the end of the same line for the background image style? As a workaround, I know I can just make a separate selector ( such as div{background-image:url("some-image.jpg");} ) but I don't want to have to do this all over.
I have discovered that this bug goes away if I use the complete background shorthand. This is also not an ideal solution because there are many background images on my pages and ultimately it is adding what I consider unnecessary css resulting in a larger css file (yes, every bit counts, especially when you might have hundreds or more background images in a css file for a whole site.)
Anyway, unless anyone can suggest a better fix for this bug (and in case anyone else doesn't know CSS shorthand), the fix was changing background-image to:
background: white url("breadcrumb_location.jpg") no-repeat top left;
Is it possible to use CSS sprites for "foreground" images -- i.e. images that users are supposed to click on and interact with and maybe even print?
Instead of using the CSS background-image property. What would you use?
You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.
I have solved this problem using img tags and using the object-fit and object-position properties in my css. Here's a sample of the html and css I used:-
HTML
<img src="<your image source>" class="sprite-icon sprite-icon-1 " />
CSS
.sprite-icon {
height: 20px;
width: 20px;
object-fit: none;
}
.sprite-icon-1 {
object-position: 0 0;
}
.sprite-icon-2 {
object-position: -20px 0;
}
Obviously, you need to change the position and the size parameters according to the sprite you are using. For a full working example, check out this fiddle
You can do this with less CSS like this:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Whatever has the class class="myClass" will have just the image in it, nothing else. This can be a <a> an <input> or a normal <div>, whatever you want.
It's a background image...but it's the element you're looking at, nothing's in front of that background. Just because you're using background-image for the property doesn't mean it's not a foreground element...like a button you can click on. You can do that like this:
<input type="button" class="myClass" />
One primary requirement that cannot be handled by background images is for ARIA. All ARIA requirements will reject the use of background images for meaningful, navigational, and other 'informative' uses that a screen reader must interpret on behalf of a user with a disability. Being able to swap out a background image css statement for an img tag and some ARIA tagging whenever necessary is a critical feature in the current regulated development environment.
The answer to the original question is yes! It is possible to use the image that is displayed in a css background statement. But you must open the sprite image in an image editor and select out the portion that represents the sprite you want and save it as a separate image and reference it in an img tag.
The challenge is that often, these situations arise in a pre-built control library. Finding and altering the code in the library that selects and displays the background image is a little difficult, changing out the code is hard!
#Waughwaugh's answer https://stackoverflow.com/a/50715682/2733244 using object-fit and object-position is a simple and solid solution for this problem. Its only downside is that it won't support some older browsers. If you still need to target IE11 you can instead work with clip-path and negative margins:
.sprite {
width: 240px;
height: 20px;
}
.sprite-1 {
clip-path: polygon(60px 0, 80px 0, 80px 20px, 60px 20px);
margin-left: -60px;
margin-right: -160px;
}
Full demo: https://jsfiddle.net/wortwart/8omfcyxb/10/
Using "real" images instead of background is often semantically better (e.g. for icons) and can have benefits for accessibility: If the image has not loaded or was blocked by the user we still have <img>'s built-in alt description. Accessibility is more than just screenreaders ...
The best approach of course is to ditch CSS sprites and simply load the images separately with HTTP/2.
You can do this, but you have to use background images for sprites as you have to be able to set position. This can be used for links or whatever you want. Look at Googles sprite, they use it for there buttons on iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif