I have found a gorgeous, free SVG file with all 52 poker cards.
Project
Image
Raw content of the SVG
I'd like to use it in a web based game to display the sprites of the cards.
Can I "split" this file into icons using css ?
I've tried following this tutorial but it requires to edit the SVG file to define the elements inside a def tag, which I would prefer to avoid (SVG is huge : 2MB).
I've also tried using the viewbox/viewport attributes with no success.
Note : I've also found a cards font but the quality of the rendering is so much worse ...
Here is a simple suggestion where background-position is used to move the wanted area of an image into view
div {
display: inline-block;
border: 1px solid;
height: 355px;
width: 260px;
background-image: url(https://cdn.rawgit.com/tyrcho/fa8bec7cc670515cd250a9dcfad5898f/raw/2d6bb400ab12bf785a29ba06202cbec789617801/Color_52_Faces_v.2.0.svg);
}
.div1 {
background-position: -490px -1155px;
}
.div2 {
background-position: -490px -1530px;
}
<div class="div1"></div>
<div class="div2"></div>
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.
I'm first-time using Compass spriting. I wanted to have icons images (all are in little different in sizes) centered position. like the attached image
I'm using this setting
$icons-spacing:40px;
#import "icons/*.png";
#include all-icons-sprites;
the css i'm getting is (for example)
.icons-adventure {
background-position: 0 -608px;
}
It's not that as I required. I want to give more spacing from top and left.
You may want to check out this Github Gist: https://gist.github.com/adamlogic/3577147, which has helped me fix spriting issues in the past and also gain a better understanding of how spriting in Compass works.
Of particular interest to you may be the portion where the author mentions the following: (pasted here in case the Gist is removed)
"I took this a bit further by defining my own (sprite) mixin."
$spritemap-spacing: 50px
#import "spritemap/*.png"
=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
background-image: $spritemap-sprites
background-repeat: $repeat
+sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)
// if no offsets given, set the dimensions of the element to match the image
#if $offset-x == 0 and $offset-y == 0
+sprite-dimensions($spritemap-sprites, $name)
"and how I'm using it"
// simplest case; sets the background image and dimensions of the element
h3
+background-sprite(ribbonfull)
// custom offset; does not set the dimensions of the element
h2
+background-sprite(ribbonend, no-repeat, 3px, 22px)
// repeating backgrounds are possible, too
#positions
+background-sprite(doubleline, repeat-x, 0, 45px)
And, the author's generated CSS:
h3 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 0 -405px;
height: 29px;
width: 295px; }
h2 {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: no-repeat;
background-position: 3px -296px; }
#positions {
background-image: url('/images/spritemap-sb826ca2aba.png');
background-repeat: repeat-x;
background-position: 0 -751px; }
I’ve found two workarounds for this issue, both not perfect:
You can simply save the icon in your image editor with the necessary padding - it works if you want to use it only in one place, otherwise you have to create duplicates (which is why this doesn't always work).
Other solution is to use pseudoelements. Assuming is the element you want to add the background to and you’ve placed your icons in icons folder:
#import "icons/*.png";
el {
position: relative;
}
el:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
#include icons-sprite(some_icon);
margin-top: - round(icons-sprite-height(some_icon) / 2);
margin-left: - round(icons-sprite-width(some_icon) / 2);
}
$icons-spacing defines the number of pixels that separates each image in the generated sprite map. I believe you want to adjust the $icons-position which adjusts (offsets) the generated background-position styles
First off, a good question...
When you give sprites in CSS, you will be able to generate classes with the .image-name. And this is how Compass sprites work. Your image will be appended to a big sprite image, and all the irregular images will be clubbed together in a grid manner.
Even though $icons-spacing gives you the ability to give some padding to the grid, it won't be that easy for you to put it in this case. So, going ahead with what is generated, we will do the following.
So, if you want something like the picture, you need to center the element, which has the Compass generated class.
Now say, you have adventure.png in it and it has generated this class:
.icons-adventure {
background-position: 0 -608px;
}
Now, if you want to make this centered, you can make this way.
<div class="border">
<i class="icons-adventure"></i>
</div>
And for the border class, give padding. So, what I mean here is, you have wrapped the .border on the .icons-adventure. Now, you need to give some padding and width to it.
.border {padding: 15px; width: 40px;}
Here, there's is no need of height, as the height is automatically taken care. Let me come with a fiddle for you to get a clear explanation.
If you know the size of your icon you could set a default height for all icons and give single icons an vertical offset of (default height - icon height)/2 and position horizontal with center:
$sprite-spacing: 50px;
#import "compass/utilities/sprites";
#import "sprite/*.png";
#include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);
#include sprite-sprite(myicon);
#include sprite-background-position($sprite, myicon, center, 12px);
If you are using Bootstrap 3 just use the following code, its simple and clean,
SASS File
#import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
#import "web/images/home/*.png";
#include all-home-sprites;
And in the HTML/Slim File I just use the center-block provided by Twitter Bootstrap 3, My HTML helper,
=content_tag('div','',:class=>'home-save_money center-block')
Basically it just center align the images into the center of the div, all the answer above use some custom Mixins or a hack.
PS: Even if you dont use twitter bootstrap, just use the following CSS, that would do the trick,
display: block;
margin-left: auto;
margin-right: auto;
I hope this helps some one,
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)
I'm new to CSS and I'm trying out image spriting in CSS. I have an sprite map at present. There are multiple CSS files which are cascaded from my main CSS using #import. Each of these CSS files defines the layout for various components. I need only one call to be made to my sprite image hence I need to play around with background-position.
Could anyone tell me a way such that I make only one call to my image and the rest of the CSS files just manipulate the position?
You will need to work with multiple classes.
In the first class (lets call it .sprite) you have to define the background-image.
.sprite {
background: transparent url(path/to/image) no-repeat 0 0;
height: 16px;
width: 16px; //assuming you are using this size for your icons...
}
Now you will have to define another class for every sprite image you will be using.
For example, you have an magnifier-icon, you will add a class .sprite .magnifier and there you will have to define your background-position.
.sprite.magnifier {
background-position: 45px 30px;
}
Now in your HTML you just call for <div class="sprite magnifier"></div> and your image will just one time loaded.
There are various sprite generators. Or you can create your own using some kind of image manipulation software.
You'll want to save all the images in one layout as a .png (generally) with sufficient spacing between elements.
Then depending on your individual needs you can set the background of say all elements, to be your sprite, but this would potentially cause problems.
It's far better to say ~
ul.foo li {
background:url(my-sprite.png);
}
ul.foo li.home {
background-position:0 10px;
}
ul.foo li.about {
background-position:10px 20px;
}
and style individual elements as required. The sprite will still be only loaded once.
You should not use sprites for lots of large images either - best suited for icons, buttons etc. See YouTube, Google, Stack Overflow for good examples.
Give your elements the same class of sprite then override them:
.sprite { background: transparent url(../images/sprite.png) no-repeat top left; }
.add_icon { background-position: 20px 60px; }
.next_icon { background-position: 40px 60px; }
<div class="sprite add_icon"> etc.
and so on..
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