We are trying to have a badge over the corner of a picture. For this we use a parent <div> as wrapper and a <span> inside. It's working fine so far for Chrome, Firefox, and IE11 but in MS Edge it's not working as expected. It seems like Edge calculates the right: property very different from the others.
Result as expected:
Unexpected result:
Here is my code:
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
right: -65px;
width: 220px;
height: 50px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
padding-left: 100px;
display: table;
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>
Am I doing something wrong, or is the Edge behavior very different from the other browsers?
You can do it differently like below, it seems to be fine on Edge*
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
top: 0;
left: -20px;
right: -20px;
height: 50px;
text-align: center;
transform: translateX(30%) rotate(45deg) translateY(70%);
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>
* I don't know why...
Update to work with original code snippet:
transform needs to be changed like above and translateX()and translateY() needed a bit of adjusting to work.
Here's the code that works in Chrome, Firefox, Edge, and IE11:
.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.child {
background-color: #e2001a;
position: absolute;
right: -65px;
width: 220px;
height: 50px;
transform: translateX(10%) rotate(45deg) translateY(100%); //wokring with translateX and translateY instead of just rotate
display: table;
z-index: 10;
color: white;
text-align: center;
line-height: 1.2;
}
<div class="parent">
<span class="child">Some cool text</span>
</div>
Related
I am currently testing some CSS in different web browsers. This all works great except in Safari 5.1.7. I am testing this fiddle . Does anyone know how I can fix this, because I would like to use it in a website.
The css is supposed to display a heading with a colored line either side.
Here is the code:
[HTML]
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
[CSS]
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
Better use one element inside h1 and use :before and :after with left and right properties. This will work in most of the browsers including Safari.
h1 {
overflow: hidden;
font-size: 30px;
text-align: center;
}
h1 span {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 5px;
}
h1 span:before, h1 span:after {
background-color: red;
position: absolute;
margin-top: -1px;
width: 9999px;
top: 50%;
height: 1px;
content: '\a0';
left: 100%;
}
h1 span:before {
left: auto;
right: 100%;
}
.color {
background-color: #ccc;
}
<h1><span>This is my Title</span></h1>
<h1><span>Another Similar Title</span></h1>
<div class="color">
<h1><span>Just Title</span></h1>
</div>
I have two sliders using ion-slides component and I've created a footer with two buttons (navigation buttons). Until there all right.
But... I have a form inside one of the sliders, so when I focus on a input text element, the virtual keyboardopens and moves the footer up, standing it in front of the form.
I know the hide-on-keyboard-open class, but this isn't inmediate (you can see how the footer is placed in front of the form for a couple of seconds), so I thought of use z-index
So, when the footer is moved upward, it is hidden under the form. But I can't get it work.
Maybe somebody can help me with this trouble?
My intention is that the green block is hidden under the blue block when they have contact... I've created a codepen to show this problem: https://codepen.io/anon/pen/QEBxRK?editors=1111
(since you can not open a virtual keyboard on a desktop computer, you can resize the height of the page to see that the z-index does not work)
Regards!
The z-index needs to be set to the .footerTest's sibling, the <ion-slides options="sliderOptions" slider="slider"> element.
An option would be to move the .footerTest inside the slides.
Below sample shows how the z-index apply on elements and its children.
Src: https://developer.mozilla.org/en/docs/Web/CSS/z-index
.dashed-box {
position: relative;
z-index: 3;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 2;
background: gold;
width: 65%;
left: 60px;
height: 7em;
top: 3em;
}
.green-box {
position: absolute;
z-index: 1;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 8em;
opacity: 0.9;
}
.red-box {
position: relative;
z-index: 0;
background: red;
height: 8em;
margin-bottom: 1em;
margin-top: -4em;
text-align: right;
}
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
<div class="red-box">Red box</div>
But, if you omit the z-index on the dashed-box and use a negative value, as on the blue box, the blue goes beneath them all.
.dashed-box {
position: relative;
/* z-index: 3; */
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 2;
background: gold;
width: 65%;
left: 60px;
height: 7em;
top: 3em;
}
.green-box {
position: absolute;
z-index: 1;
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 8em;
opacity: 0.9;
}
.blue-box {
position: absolute;
z-index: -1;
background: lightblue;
width: 20%;
left: 25%;
top: -25px;
height: 18em;
opacity: 0.9;
}
.red-box {
position: relative;
z-index: 0;
background: red;
height: 8em;
margin-bottom: 1em;
margin-top: -4em;
text-align: right;
}
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
<span class="blue-box">Blue box</span>
</div>
<div class="red-box">Red box</div>
I have a problem of rendering in webkit browsers.
<div class="left">
<div class="fixed"></div>
</div>
<div class="container">
<div class="square"></div>
</div>
.left {
position: absolute;
top: 100px;
left: 10px;
width: 100px;
height: 300px;
background: red;
z-index: 2;
overflow-y: hidden;
}
.fixed {
position: fixed;
top: 0px;
left: 0px;
width: 500px;
height: 90px;
z-index: 2;
background: blue;
}
.container {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
height: 500px;
background: grey;
overflow-y: hidden;
z-index: 1;
}
.square {
margin-left: 120px;
margin-top: 120px;
width: 40px;
height: 53px;
z-index: 481;
background: green;
-webkit-user-drag: none;
-webkit-user-select: none;
position: absolute;
}
My fixed element is not visible : http://jsfiddle.net/RV5WP/3/
But it's work if I delete the webkit transform : http://jsfiddle.net/RV5WP/2/
I tried to add translatez(0) to my fixed element or to the parent but that doesn't solved my problem.
I can't reproduce in firefox or opera.
Does anyone have an idea ?
I want to create the following shape:
Important: if I use "Border Radius" I get this (and I do not want this result):
Here are DEMO
HTML:
<div id="gray">
<div id="red"></div>
</div>
CSS:
#gray{
height: 100%;
background-color: #ccc;
overflow: hidden;
}
#red{
width: 150%;
height: 150%;
background-color: #f00;
border-radius: 100%;
top: 50%;
left: -25%;
right: 0;
position: relative;
}
Something like this would be roughly equivalent:
http://jsfiddle.net/ny4Q9/
css:
.curvetop {
position: relative;
margin-top: 80px;
background: red;
width: 100%;
height: 400px;
z-index: 1;
}
.curvetop:after {
top: -80px;
display: block;
position: absolute;
content: '';
border-radius: 50%;
background: red;
width: 100%;
height: 170px;
}
markup:
<div class="curvetop"></div>
By using border-radius with a value of 50% you can create a circle.. which, as per your question you can attach to the top of another element by way of a pseudo element.
You can use border radius
http://jsfiddle.net/wULyB/
<div id="out">
<div id="in"></div>
</div>
CSS
#out{
width: 100px;
height: 100px;
overflow: hidden;
background: green;
position: relative;
}
#in{
width: 200px;
height: 200px;
border-radius: 100px;
background: black;
position: absolute;
left: -50px;
top: 30px;
}
You can play around with the numbers but you get the idea
I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.
How can this be achieved using CSS?
Update: I am talking about the cross-bar in the first image that says "snapshot" and "WP Advanced Code Editor"!
Try this - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
My demo can be seen here http://dabblet.com/gist/3152262
I have an image wrapper with overflow:hidden and I've simply used a :before pseudo-element which I've rotated and absolutely positioned. Same idea for the horizontal one.
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}