I am able to generate my sprites images using SASS and Compass. Until here all work fine. The problem I am facing is I have no idea how to achieve the sprites be responsive.
I found this site that generates responsive sprites such I pretend but I don't know how to do it with using SASS and Compass. Is there some mixin that lets me do something like this?
Related
I make a website, and actually i have a simple rectangular images.
I want to design my image and make a design like below.
So i tried to create a svg, and i wanted to put my picture inside .. but the problem is that svg cant be responsive.
Can i do it in full css ?
Or it's better to use a SVG ?
The best way could be to use Photoshop and design the picture, but if i can make it in css or using svg, it's better. i know that some website have similar design for their pictures, how they do ?
I'm looking to automate css manipulation of responsive background images.
I currently have grunt set up in my project and am able to create responsive images and edit the html to show srcset, using their responsive images tasks.
The problem is that I don't have it set up for my css files and was wondering if anyone knows any working npms that can help me scan the images and add it as css media queries for creating responsive background images.
Any feedback or advice in the right direction will be greatly appreciated.
Best, Jonathan
I'm creating an application from scratch using angular2, SCSS and gulp.
I want to create high quality and responsive icons. Exploring the web I found the that there are 2 main techniques:
- image sprites
- fonts
- SVG sprites
As as far as I saw the way to go is SVG sprites, wich seems also to be very usefull also for accesibility.
Do you have experience on this? I'm thinking in automating the creating with gulp, with a folder of SVG's that creates a single sprite file and it's css file.
Basically I want to know:
- is this cross browser?
- can the svg sprites be responsive?
- after creating the SVG sprite, how is the best way of using it on the HTML?
Thanks so much in advance!
I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.