I did some google search, but could not find out what is the default pixel value (1 rem) for edge. If someone could put a link here, that will be appreciated. e.g. xx pixel === 1 rem, for edge.
I haven't found any doc talking about it, but I can give you an answer: 16px === 1rem in Edge (with font size set to "Medium" in Edge settings).
I did a simple test. I set the font-size in CSS to be 1rem, and inspected its pixel value in DevTools. It says 16px. See the pic below:
But if you change the font size inside browser, this equation will break. Simply put,
Very small: 9px === 1rem
Small: 12px === 1rem
Medium: 16px === 1rem
Large: 20px === 1rem
Very large: 24px === 1rem
I created a pie chart in React using the svg pattern from this tutorial https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/
With four pieces I have
For all four pieces:
stroke-dasharray: 25, 100;
For each piece I also have:
stroke-dashoffset: 0;,
stroke-dashoffset: -25;,
stroke-dashoffset: -50; and
stroke-dashoffset: -75;
Problem is I get a gap between the first and the last piece so the pieces does not fully fill the circle.
I managed to figure out the answer by looking at this similar thread SVG circle has a gap
It turned out I had a radius of 16 the full circle was more than 100%. Setting stroke-dasharray: 100,53and dividing my radius by 1.0053 helped.
It looks "broken". Transform origin of the right element is out of place. I am trying to make this box "solid", but it scatters.
http://codepen.io/HappyHarlequin/pen/bZWQro
svg:hover #right{
animation: open_right 1s linear infinite;
animation-direction: alternate;
}
svg:hover #left{
transform-origin: 0% 50%;
animation: open_left 1s linear infinite;
animation-direction: alternate;
}
#keyframes open_right{
0% {
}
100% {
transform-origin:100% 50%;
transform: rotate(230deg) rotateX(-230deg)
}
}
#keyframes open_left{
0% {
}
100% {
transform-origin: 0% 50%;
transform: rotate(-230deg) rotateX(230deg)
}
}
rotateX() is a 3D rotation and you can't do 3D transformations on elements inside an SVG. You can only apply two dimensional transforms to them (rotate, scale, translate etc in X and Y only)
Even if you could do 3D transforms, you are trying to apply a 3D transform to something that is a two dimensional shape drawn to look like it is 3D. So it would not work anyway.
Possible approaches
You could:
Stick with 2D and use keyframe animation to animate your box flaps. Draw a series of keyframes of your flaps as they open. Then step, or morph, between those shapes.
Change your flaps to be HTML elements, such as a <div>. Then position them so that they line up with your fake 3D box and have the right amount of perspective. Then you can apply a 3D rotation to those.
Switch to a proper 3D box and animate that. There are various JS libraries that can help you with that, such as three.js.
I've made a (very beautiful in my case) half transparent gradient background, but I can only make it working in Firefox and Safari.
Firefox:
linear-gradient(to bottom, #FFFFFF 0%, rgba(0, 0, 0, 0) 500px) repeat fixed 0 0 rgba(0, 0, 0, 0)
The issue now is that in all other browsers IE10, Chrome and Opera, the last rgba(0,0,0,0) overlay seems to be ignored, which causes the gradient kind of shining instead darkened.
Code for the other browsers:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(500px,rgba(0,0,0,0))) repeat fixed 0 0 rgba(0, 0, 0, 0); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 500px) repeat fixed 0 0 rgba(0, 0, 0, 0); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 500px) repeat fixed 0 0 rgba(0, 0, 0, 0); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 500px) repeat fixed 0 0 rgba(0, 0, 0, 0); /* IE10+ */
How can I get this last dark layer for Chrome, Opera and Internet-Explorer 10?
Do you see something wrong? I guess something wrong with the shorthand code or not possible at all?
Working on a Drupal site with a Zen sub theme, I ditched zen-grids for susy. I have been playing around with Susy and it works nicely. But here is my question.
I have a layout with two main columns: #content (holding the main content; a grid of three rows of four images with a width of 181px) and div.region-sidebar-second (holding the main navigation).
My designer came up with a 960px layout, where the #content container’s width is 750px then there is a 8px right-margin and div.region-sidebar-second has a width of 202px.
In my responsive.scss I put:
.sidebar-second {
#content {
#include span-columns(9, 12);
}
.region-sidebar-second {
#include span-columns(3 omega, 12);
}
}
So #content uses the first 9 columns and .region-sidebar-second uses the last 3 columns. But this does not translate to 750px/8px/202px.
The percentages that susy calculates are correct, of course, but for my layout I would need Susy to calculate different percentages.
E.g. Susy calculates for #content
.sidebar-second #content {
float: left;
margin-right: 1.40845%;
width: 74.6479%;
}
and for
.sidebar-second .region-sidebar-second {
float: right;
margin-right: 0;
width: 23.9437%;
}
In order to meet the design requirements I would need a width: 78.125% for #content, .833333% for margin-right and a width: 21.0416666% for .region-sidebar-second
Not sure whether this can be achieved with Susy span-columns. If you have a quick idea this would be very much appreciated. Thanks.