I have created a simple SVG animation where it animates on click using a simple CSS transition and transform (see here: http://jsfiddle.net/T9hsW/1/).
I want the SVG to scale with the user's font-size so I sized it in ems. However, I noticed that if I increase the font-size of my browse using cmd-+ then when I click the SVG, the transform-origin appears to be the old transform origin, not the new one, even though I have used % to set the origin:
svg {
width: 4em;
height: 4em;
}
.arrow, .arrows {
transform-origin: 50% 50%;
...
}
This is the desired output after clicking:
This is what it looks like if you increase the browser font size. Note that it is clearly off-center, probably using the original coordinates:
Is there anything I can do about this?
Related
I am using css transitions to lay out a bunch of divs on top of each other. At any point, one of the divs may collapse. And all of the divs below it are supposed to move up to fill its spot.
Here is a codepen that describes the situation.
The css I am using is the following:
div {
height: 100px;
width: 100px;
margin: 15px;
}
.top {
background-color: red;
transform-origin: top;
animation: move 2s infinite;
}
.bottom {
background-color: blue;
}
#keyframes move {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
With this, the top div will expand and contract. I want the divs below it to move up as the top one collapses.
If I switch transform for height, like this:
#keyframes move {
0% {
height 0;
}
50% {
height: 100px;
}
}
The bottom divs do move, but this is not a good solution for me because in the actual application, each div has a dynamically calculated size.
How can the bottom divs move smoothly with the top div?
With transform you won't be able to do that, as when an element is transformed, the surrounding elements won't see any change in the DOM, as DOM-wise nothing have happened.
What you can do to optimize it all, is to prepare the browser that the height will change, with the property will-change: height
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
This new CSS property aim's to do what transform does, make smoother and more optimized animations.
Do note though:
will-change is intended to be used as a last resort, in
order to try to deal with existing performance problems. It should not
be used to anticipate performance problems.
Another possible solution (read hack), is to trick the browser to use GPU instead of CPU, shown in this answer (see its p.1):
CSS `will-change` - how to use it, how it works
Updated
In case of the height is auto, or similar, this will work with the max-height trick, and here is a couple of answers of mine, showing how-to:
CSS Animation on max-height change
Can't use the same animation in reverse for class toggle
CSS transition auto width
And the last resort, if none of the above is applicable, is to use a small script and either create a styles dynamically (links below), or set them inline.
Dynamically styling pseudo-elements using jQuery or Javascript
How to prevent css from getting converted to inline css
I've created a fiddle to better show what I'm trying to ask.
angle crop of pseudo element
Here's a image showing the desired result:
li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}
What I'm looking to do is have the li active class display a colored background with a cropped angled at the bottom.
it should adapt to the length of the link
needs to see through to the background
include the angle part within the link
be responsive
Is this possible in pure css?
The best way I have found to do this in pure CSS is using a the background-image property with a linear-gradient, going from one color to transparent.
You can use the color of the element itself as a mask, or you can use the background. The difference with be how you define the gradient angle and gradient color.
In this example, I have used your object color to get the effect:
http://jsfiddle.net/948ud6f7/
You will notice it is pretty jagged and not as crisp as if you were to use an image. I am not sure of a workaround with this yet, but different browsers render the edges differently, so this at least gives you a starting point.
Good luck!
You can do that by using one of three methods:
transform/rotate
border-width/border-color(transparent)
box-shadow
Usually border-radius: 50% works fine for most applications, and Chrome produces what looks like a circle. But in this instance, I am trying to continually rotate a circle quickly, and this is where this problems shows itself.
Is this a bug with Chrome's border-radius? Or is this something with the transform?
Can anyone suggest a work around?
Edit: removed outdated example link
It's caused by the roundings in the way the "radius" is calculated. Since the size is an even number the border is "in-between" two pixels... long history, at the end:
Workarround: Set your divs circles size an "odd" number of pixels.
$ring-medium-outer: 437px;
$ring-medium-inner: 381px;
We have a solution an effective solution as of Dec 2022: Compatible with all major browsers...
If the border-radius value is half of the width value for that specific element; in CSS, we get a full circle for that element, provided that a height property with an equal value of the width or an aspect-ratio property is specified for that element. Example with an img element below…
img {
width: 150px;
border-radius: 75px;
aspect-ratio: 1 / 1;
}
OR
img {
width: 150px;
height: 150px;
border-radius: 75px;
}
Extra Note: To scale the width and height dynamically for dynamic CSS’ units, aspect-ratio property to the rescue.
For a touch screen application it may be nice to have the custom cursor fade to opacity = 0 after the screen has not been touched for a while and jump back to opacity = 1 if the screen is touched again.
Is there a way to achieve this with just some css styling?
update: whether or not the cursor is displayed depends on the handling of the underlying system (in particular desktop). As I'm using just a browser on top of a bare X-Server, the cursor is always displayed.
While cursor: none is the easiest way to simply hide a cursor, it is also possible to create a cursor with opacity using a .png or .svg.
Here is an example snippet:
.transparent_cursor {
/* div appearance */
width: 128px; height: 128px; background-color: #def; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAF0lEQVQYlWNgYGD4j4YxAB0UDICVKAoAQagf4Vf1Xw0AAAAASUVORK5CYII=");
/* custom cursor */
cursor: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22pointer_cursor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2221px%22%20height%3D%2233px%22%20viewBox%3D%220%200%2021%2033%22%20enable-background%3D%22new%200%200%2021%2033%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20id%3D%22outer%22%20opacity%3D%220.5%22%20fill%3D%22%23FFFFFF%22%20points%3D%2220.2%2C20.2%2012.25%2C20.2%2016%2C29%209.667%2C31.75%205.75%2C22.5%200%2C28%200%2C0%20%22%2F%3E%3Cpolygon%20id%3D%22inner%22%20opacity%3D%220.5%22%20fill%3D%22%23231F20%22%20points%3D%226.373%2C19.482%201.75%2C23.904%201.75%2C4.225%2015.975%2C18.45%209.602%2C18.45%2013.708%2C28.087%2010.59%2C29.441%20%22%2F%3E%3C%2Fsvg%3E"), auto;
}
<div class="transparent_cursor"></div>
Keep in mind when designing:
The visible "pointer tip" of the image used should start in the upper
left corner.
If the image needs to be embedded within the CSS itself, you will need to base64 encode - or you can also URL encode for SVG. Using SVG without encoding did not work in my tests.
The resolution will be in CSS pixels, so it will look bad on Retina Display. This is true even if SVG is used, because browsers seems to want to want to rasterize in CSS pixels. Bummer.
A cursor fallback value such as , auto needs to be included after url(). Details here.
As for animating CSS URLs, I was able to find an example of how this can be achieved. Here's the gist of it:
#keyframes cursor_fade_out {
0% {cursor: url('cursor_opac100.svg'), auto}
25% {cursor: url('cursor_opac75.svg'), auto}
50% {cursor: url('cursor_opac50.svg'), auto}
75% {cursor: url('cursor_opac25.svg'), auto}
100% {cursor: url('cursor_opac0.svg'), auto}
}
So you will need to create an image for the cursor at each opacity level.
I have a div set with a background image:
<div>Play Video</div>
with the following CSS:
div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}
The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.
Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
Adding a width and height to the SVG as mbxtr said nearly worked for me. I needed to add preserveAspectRatio="none slice" as well to get it working responsively in IE.
For me these 3 fixes helped:
If possible set the background-position to "center"
For background-size set both values, "100% auto" won't do the trick, so use "100% 100%"
If that still doesn't help alter the last to values "viewBox" attribute of the SVG itself and make it one pixel wider and higher than the width and the height of the SVG. This shrinks the SVG a little bit, but stops IE from cutting it off - and the smaller size won't be noticed at all.
I had this issue and I found that either removing the height and width inside the code for the svg BUT keeping the viewBox can solve the issue.
I recommend using a compiler site like : https://jakearchibald.github.io/svgomg/
and setting the option to "prefer viewBox over height and width"
ALSO if none of this works, in Illustrator try applying a square background around the svg image but leaving enough padding around the edges.
And import the svg's in your Stylesheet using --> data uri: ...
example:
background-image: data-uri('image/svg+xml;charset=UTF-8',' where/your/svg/is/located');
Well, it doesn't look like there is a solution. Surprise surprise. It's IE after all. I ended up using the following code:
div {
padding: 20px;
width: 150px;
position: relative;
}
div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}
I liked the cleaner version better, but this hack works in all modern browsers, including IE8, 9, and 10 (probably 11 but I didn't test).
We had a similar issue with SVG background images that weren't the full site of a containing element (such as the magnifying glass at the left side of a search input).
We'd created out SVGs in Illustrator CC but running them through Peter Collingridge's SVG optimiser to take out all the unnecessary cruft did the trick. http://petercollingridge.appspot.com/svg-optimiser
I tried #mbxtr's solution
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
That still didn't work for me on windows Chrome and IE.
I was exporting a font icon, so if you have a font, make sure you export it as:
"font: convert to outlines"
and "responsive" is false
I also unchecked "minify" just in case...
1. javascript
drips.style.top = -dripsTop + "px";
var browser = window.navigator.userAgent;
if (browser.indexOf("Trident") > 0) {
$(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
}
svg (original height=1050)
add directly to himself svg file
preserveAspectRatio="none" height="2100"
Svg background image size will render same on IE and Chrome using these properties
background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
I changed all my SVGs to not responsive in Illustrator to no avail.
And because I am looking for code examples I missed that the correct answer, when saying "ensure your SVG has a width and height specified", they meant this kind of thing:
.my-class {
background-size: 200px 100px;
}
And if the size is a bit off in IE vs Chrome for example I used a media query to target IE:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.my-class {
background-size: 200px 110px;
}
}