When I use transform: scale and change background of the div, I get artifacts (small traces) during the transition. I need to change size and background. It's easier to show than to explain :)
Please check the example here, the last dot https://jsfiddle.net/hades123/29dmx47o/2/
I can use box-shadow to hide it, but it's not practical because background of the loader can be different.
I'll be grateful if you help me!
Solution with box-shadow https://jsfiddle.net/hades123/8fmy70ub/1/
It's not so great but it's working fine.
Related
I know there are alot of questions for the same topic but I have tried almost everything to get it work but did not succeed.
I am working on a WP theme and I have a header background image which does not scale properly when on mobile/smaller screens.
If anyone can help me scaling for that image.
Also, as this image will be a dynamic image, should I use an image tag or inline css background image?
For a reference, please have a look on the following link.
header background scaling
Have you tried "background-size" property of css?
If yes, how did you gave the values in it? in percentage or in hardcoded px because this solution works perfectly for background images. In your header's css or wherever you are having this image, do it like this, or you an specify your own percentage values according to your requirement:
background-size: 100% 100%;
If it doesn't work, let me know or if possible, please share the code so that I can guide you better. Hope this will help.
Cheers!!!
I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
I am trying to use a CSS3 Border gradient property and using an example from css tricks. I can get it to work using their example but cant seem to get my colours in that i am after and i think it's syntax errors. Is someone able to let me know what i may be missing?
I am after a left and right border on a div with the gradient going from #d1d2cd to #e3e4df 5 pixels wide?
I have mocked up an example in js fiddle: http://jsfiddle.net/DqgPy/
Thanks
I'd recommend checking out a site like:
http://www.colorzilla.com/gradient-editor/
Play around with the gradient settings, and it will auto-generate the CSS you need (including support for older browsers). At the very least, the code provided might help you figure out any of your syntax errors.
I'm working on a portfolio site and want portfolio pieces to have a fancy rollover.
I've made a pen of what I have so far. My issue is that the Visit Site link isn't clickable. I have no idea why, but I think it may be something to do with the z-index change or the transition effect. It was working before when I used a simple slide-up over the image effect.
Any ideas how to get this link clickable?
Thanks!
just add
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
to .default-view and it works :)
I was just wondering if anyone might be able to tell me how to add a left and right sided faded border to my webpages such as on this site:
http://www.farrow-ball.com/colours/paint/fcp-category/list?resetFilters=true
My webpages are of a fixed layout and are 920px in width to the edges of the images / text boxes.
Any help would be greatly appreciated in my quest to learn CSS! I've tried to find tutorials on how to do this or previous topics on this however I must not be putting in the correct keywords because I can't seem to find what I'm after.
Thank you!
you use box-shadow it's supported in most new browser, some uses prefixes though.
there is even a generator available that can come in handy
http://css3gen.com/box-shadow/