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
Related
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.
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.
I have an SVG element defined with a width and height of "297mm" and "210mm", and no viewbox. I do this because I want to work inside an A4 viewport, but I want to create elements in pixels.
At some point, I need to scale up an object defined in pixels so that it fits into part of the A4 page. For example, I might have an object which is 100 px wide, that I want to scale to 30mm horizontally.
Is this possible? I think I need a second container with a new co-ordinate system, but I can't find any way to do this.
EDIT
It seems that I (or SVG) has misunderstood what a pixel is. I realised that I could size a line to 100%, and then get it's pixel size with getBBox to find the scaling required. I wrote this code and ran it on 2 clients, one with a 1280x1024 monitor (80dpi), and one with a 1680x1050 LCD (90dpi):
function getDotsPerInch() {
var hgroup, vgroup, hdpi, vdpi;
hgroup = svgDocument.createElementNS(svgNS, "g");
vgroup = svgDocument.createElementNS(svgNS, "g");
svgRoot.appendChild(hgroup);
svgRoot.appendChild(vgroup);
drawLine(hgroup, 0, 100, "100%", 100, "#202020", 1, 1);
drawLine(vgroup, 100, 0, 100, "100%", "#202020", 1, 1);
hdpi = hgroup.getBBox().width * 25.4 / WIDTH;
vdpi = vgroup.getBBox().height * 25.4 / HEIGHT;
drawText(hgroup, "DPI, horizontal: " + hdpi.toFixed(2), 100, 100);
drawText(hgroup, "DPI, vertical: " + vdpi.toFixed(2), 100, 120);
}
IE9, FF, Opera, and Chrome all agree that both monitors are 96 dpi horizontally and vertically (although Opera's slightly inaccurate), and Safari reports 0 dpi on both monitors. So svg just appears to have defined "pixels" as "96dpi". some quick Googling appears to confirm this, though I haven't found anything definitive, and most hits give 90dpi, with 96dpi as the FF variant.
You can nest <svg> elements and use the viewBox attribute on the child element to get a new coordinate system. Give the child <svg> element x, y, width and height attributes of where you want it to appear on the parent in the parent's co-ordinate system.
I 'm trying to create a two sided box shadow in two seperate elements, sandwiched by a three sided box shadow on the bottom and a three sided box shadow element on top. Like the image below:
I'm close, but as you can see, there is a bit of a space issue between the 3rd and 4th elements, and the top shadow is stopping in the middle for some reason...here is the CSS I have:
#tile1{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 -2px 5px 5px #319a00;
}
#tile2{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00;
}
#tile3{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00;
}
#tile4{
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 3px 5px 5px #319a00;
}
Any ideas on how to make this happen? I can't just put a box shadow to the whole div because I'm going to have these element toggle.
You CAN put a box-shadow on the whole div even if you're going to toggle those inner elements. All you have to do is put a min-height property (make this equal to the height when all the boxes are toggled off) on your div instead of the height property and it will work.