Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Is it possible to improve quality of image using CSS when I use background: url('image.png')?
May be accept filter CSS?
The filter property has the following functions:
none
brightness(%)
contrast(%)
drop-shadow(h-shadow
v-shadow blur spread color)
grayscale(%)
hue-rotate(deg)
invert(%)
opacity(%)
10.saturate(%)
sepia(%)
url()
initial
inherit
blur(px)
Each above function is self explanatory. Regarding the pixels, you can't really change it using the filter property. You can use width and height but It will change the size of the picture to appear on the webpage but not improving the quality.
While there isn't any way to actually improve your image quality using css (that comes down to how your image file is saved originally), one trick I use at times is to force some extra anti-aliasing from the browser using transform
-webkit-transform: scale(0.999);
transform: scale(0.999);
This won't make your image noticeably smaller, but it should just be enough to get your browser to blur it a bit.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I haven't been able to find any ways to get a mat-slider smaller than 128px wide. Is there a way to do this? I have used transform: scale(); as a temporary solution, but this creates issues with other elements. An example of the type of slider with which I am working can be found here. The css width can be increased, but once you lower it to 128px, it can't get any smaller.
This is because .mat-slider-horizontal has a min-width property of 128px.
You can override this with:
.mat-slider-horizontal {
min-width: unset;
}
Be aware that the min-width was probably there for good reason and this may introduce other issues.
Here's the updated Stackblitz:
https://stackblitz.com/edit/angular-v5leng?file=src/app/slider-overview-example.css
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
TLDR;
Is it at all possible to use CSS's linear-gradient() function to fill SVG elements? Any ideas of workarounds are welcomed too.
Basically I'm trying to make a templating system for simple graphs using Mustache. The user (another developer) should be able to change the style of the graphs using CSS.
However I quickly found out that SVG's fill attribute is not happy with CSS's linear-gradient() function. fill: linear-gradient(#000, #FFF); simply makes both Chrome and Firefox complain with Invalid property value. This means that the user will have to change the SVG DOM and add a <linearGradient> element, then refer to it in fill, if said user wants any gradient effect.
This is indeed achievable within my current templating framework, but I would prefer not to change the DOM if at all possible.
Any ideas?
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a customer who would like curtains opening on his Entrance page, but they can NOT be a Flash animation, and an animated gif is too large in file size. So I created a set of curtains that open with CSS animation on mouseover.
The basic animation is here http://www.nightwingsgraphics.com/Curtains/CurtainsTEST.html
However, since they look more like doors (too stiff) when they open, I added a slight swaying motion here http://www.nightwingsgraphics.com/Curtains/SwayTEST.html
Somewhat better, but still too stiff, and I'm lost as to where or how I could add some kind of "warping" (or morphing) effect to make them look more natural.
Any help would be greatly appreciated.
PS: I also created a jsfiddle for both versions, but it's not allowing me to post more than 2 links here :(
You can use the skew() transformation like this
#axis:hover .move-right{
transform: translate(215px,0) scaleX(0.2) skew(-15deg, 5deg);
}
#axis:hover .move-left{
transform: translate(-215px,0) scaleX(0.2) skew(15deg, -5deg);
}
Also see that I chenge the translate value because it came out of the container when applying skew() function
play with cubic-bezier function to improve the transition
.object {
transition: all 3s cubic-bezier(0.42,0.1,0.44,0.95);
}
I recommend you this page to play with http://cubic-bezier.com/
Also look at the answer to my question here: How to add physics to CSS animations?
I hope this at least guide you.
PD:I omitted the vendor-prefixed to shorten code
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to create a parallax like effect. I have 10 background images and eight foreground images. Here is a fiddle to show what I came up with so far:
Fiddle
The red squares represent the foreground images.
Now I need to animate foreground images somehow, as if they slide in from the bottom while scrolling, and out of the screen at the top, so back and forth, like rain falling down (and up :) So the foreground images move faster than the background images.
I already tried quite a few things, but really don't know where to start. Skrollr.js is also an option, but that's really something on itself to learn and I guess for this there has to be a simpler solution.
I tried this Guide once and it worked. The more you move the divs back with the translateZ rule the slower it moves.
edit: url broken, updated url
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Please check out this image:
Look at the part that says 'keyboard'
I want that shape but facing the other way (right) and not curved.
I know this is a pentagon but its not the standard type so its hard to find the name or type of this shape to learn how to make it in css. Any ideas on how to make it!?!?
Thanks guys,
James
It's a rounded rectangle and a triangle (or a rotated square). To make it in "CSS" would require some hacks. I suggest you use a background image.
Mimicking the iPhone design purely in CSS is nearly impossible. However:
I found iWebKit, written by a guy who spent a lot of time on just that task. He did the navigation buttons with border images.
You can take a look at it at http://snippetspace.com/ . It's free to download, I think.
Looking at the demo code, you can easily see how the buttons work.
iWebKit is only for webkit browsers, but it does not take a lot of work to adapt to other browsers (just add -moz or -o lines where it says -webkit in the CSS).