I'm trying in my page to make div be shown over its ::before and ::after CSS selectors, so I'm working to get this result :
but I'm getting this JSFIDDLE
Here is my code :
HTML
<div class="box"></div>
CSS
.box{
width: 350px;
height: 350px;
background: #555;
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
.box::before{
content: "";
background: #A60000;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: -150px;
z-index: 1;
}
.box::after{
content: "";
background: #02047A;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: 200px;
margin: auto;
z-index: 1;
}
I know it looks like making div shown over its content because Chrome is showing me the HTML source like this :
but I hope there is a way to fix that ..
Thanks in advance ...
Change your css to follow:
.box{
width: 350px;
height: 350px;
background: #555;
position: absolute;
top: 50px;
left: 200px;
}
.box::before{
content: "";
background: #A60000;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: -150px;
z-index: -1;
}
.box::after{
content: "";
background: #02047A;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: 200px;
margin: auto;
z-index: -1;
}
fiddle
All you have to do is to set z-index :after and :before to -1 and remove from .box z-index.
Add or replace the properties below (to make :before and :after elements display behind .box apply z-index:-1 and use default z-index for .box) :
.box{
position: absolute;
}
.box::before{
z-index: -1;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.box::after{
z-index: -1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
JSFiddle
Related
So there are these two rotated rectangles forming a V:
div {
position: relative;
left: 100px;
display: inline-block;
margin-left: 100px;
}
div::before {
content: '';
position: absolute;
transform: rotate(-45deg);
transform-origin: bottom right;
width: 20px;
height: 100px;
background: red;
}
div::after {
content: '';
position: absolute;
transform: rotate(45deg);
transform-origin: bottom left;
width: 20px;
height: 100px;
background: red;
}
<div></div>
Now how to close the gap between them? First I thought the key would be transform-origin. But no matter what is set there, it doesn't result in a isosceles V without a gap.
If you're already using transforms, you could add a translate to each and just offset them till they cross over
html {
font-size: 16px;
}
div {
position: relative;
left: 100px;
display: inline-block;
margin-left: 100px;
}
div::before {
content: '';
position: absolute;
transform: translateX(0.523em) rotate(-45deg);
transform-origin: bottom;
width: 1.25rem;
height: 6.25rem;
background: blue;
border: 2px solid blue;
}
div::after {
content: '';
position: absolute;
transform: translateX(-0.53rem) rotate(45deg);
transform-origin: bottom;
width: 1.25rem;
height: 6.25rem;
background: red;
border: 2px solid red;
}
<div></div>
You have to update transform-origin like below. You don't need to consider bottom but a slightly upper than bottom (100% - 10px). 10px is half the width
div {
position: relative;
left: 100px;
display: inline-block;
margin-left: 100px;
width: 20px;
height: 100px;
}
div::before,
div::after{
content: '';
position: absolute;
inset: 0;
transform: rotate(-45deg);
transform-origin: 50% calc(100% - 10px);
background: red;
}
div::after {
transform: rotate(45deg);
background: blue;
}
<div></div>
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color
I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for this?
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added text-align: center;
transform: rotate(-45deg) translate(0, -100%);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg) translate(0, -100%);
text-align: center;
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
use this transform: translate(-50%, -50%) rotate(-45deg);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in another div
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin: 0 auto;
}
#text {
position: absolute;
height: 300px;
width: 300px;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
background-color: red;
}
h1 {
text-align: center;
line-height: 300px;
margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}
<html>
<body>
<div id="wrap">
<div id="text">
<h1>some centered text</h1>
</div>
</div>
</body>
</html>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
I've found this tutorial
I have an element with background image. So I want to set background image to :before element. But when I try it, there is no background image at all.
Here is fiddle As you can see I set background property:
background: #6D7B8F url('http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png') -10px -20px no-repeat;
And it is fine. But if you comment that css code and uncomment other css (implementation of tutorial) the background dissapears.
Check Following Which you need from given tutorial
#settings {
border: 2px solid #666;
border-radius: 7px;
font-size: 2em;
line-height: 5em;
margin: 3em auto;
text-align: center;
width: 12em;
transform: rotate(30deg);
overflow: hidden;
position: relative;
}
#settings::before {
background: url("http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
z-index: -1;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
<div id="settings">Test</div>
Check Fiddle Here.
Add z-index property, to your :before selector
You code seems just fine.
You should not use the 'overflow:hidden' as it seems to hide the background element in your fiddle.
.kitten {
width: 150px;
height: 150px;
background-color: pink;
}
.kitten::before {
position: absolute;
left: 100px;
content: "";
display: block;
background: url(http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif);
background-size: contain;
width: 250px;
height: 250px;
}
<div class="kitten"></div>