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
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 am trying to build a responsive carousel as present in Mecca website. I am using Bootstrap 4 and using slick plugin to build the carousel.
The look and feel i am trying to achieve is the something like this picture
As i am using boostrap 4, to build this tile, I have written the following code and codepen link is given below
[Codepen](https://codepen.io/bzaidi/pen/MWamJvZ)
I am facing the following problems
This carousel is not responsive. I need to change font-size using media queries on almost every resolution. If I see Mecca website, their carousel is perfectly responsive.
When i float the image left, the rightContent div seems to be taking all the width of parent div which is 290px? Why is that?
Is my approach correct?
How can I achieve responsiveness on all resolutions?
Can you someone help me?
Thanks.
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.
I am creating a rails application using bootstrap. In my header, I am creating a carousel that provides links to other pages. My images are of different sizes and the carousel keeps reflecting this. I do not want the carousel to change size based on the images. How can I fix this so all of the images are the same size within the carousel?
Thanks for any help given in advance!
I guess the easiest option would be to resize them all to the same size using well any photo editor or even online.
Google output:
http://www.picresize.com/
Alternatively you could use a gem like carrierwave or paperclip. More complex but if you are going to have images like profile pictures then it might be useful.
Bye