Same height at 2 elements - html

I have this:
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
https://jsfiddle.net/0r9ptmsr/
I want to make content element at same height with leftmenu only with CSS, without JS.


One simple solution is give position: relative; to parent container i.e. .page-container and position: absolute; to child.
And give height and width 100% to child div.
Working Fiddle
.page-container {
overflow: hidden;
position: relative;
}
.content{
height: 100%;
width:100%;
position: absolute;
}


in ".content" class, write "height : 1000px;"


give both of them same height for example 1000px;
.content, .leftmenu{
height: 1000px;
}
like this :
.container {
height: 100%;
overflow: hidden;
width: 100%;
}
.page-container { overflow: hidden; }
.leftmenu {
width: 230px;
float: left;
white-space: nowrap;
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: black;
}
.content {
margin-left: 230px;
background: #f3f4f6;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: yellow;
}
.content, .leftmenu{
height: 1000px;
}
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
</div>


Try this
.container {
height: 100%;
overflow: hidden;
width: 100%;
}
.page-container { overflow: hidden; height:1000px; }
.leftmenu {
width: 230px;
float: left;
white-space: nowrap;
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: black;
height: 100%;
}
.content {
margin-left: 230px;
background: #f3f4f6;
height: 100%;
padding: 15px;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
background-color: yellow;
}
<div class="container">
<div class="page-container">
<div class="leftmenu">
</div>
<div class="content">
dada
</div>
</div>
</div>


Give the content height and box-sizing as
.content {
box-sizing: border-box;
height: 1000px;
}

Related

i want 4 flipbox in one row but in my code is just showing 1

Guys, I hope you are all fine, Guys am facing a problem actually I have a CSS flip box code but in this code, it's just showing 1 flip box in one row I want 4 flip boxes in one row how can I do this please help me Thanks.
Here is my code:
<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>
CSS:
.box {
position: inherit;
top: calc(50% - 200px);
left: calc(50% - 150px);
width: 300px;
height: 400px;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}

add display: inline-block; to your .box. And you can make 4 instances of your flip box in the HTML. Also your heights were a little weird, so this might be what you want?
.box {
position: inherit;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
display: inline-block;
float: center;
padding: 5px;
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}
.container {
text-align: center;
}
<div class="container">
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
</div>

child element float on parent in 3d

Is it possible to use css to floating 'child' on 'parent'? Like ‘other’.Now it looks like the effect is just scaling 'child' instead of translation.
body{
height: 100vh;
overflow: hidden;
}
.space{
background: #000;
height: 100vh;
perspective: 1000px;
}
.layer{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(85.8deg) rotateY(0.1deg) rotateZ(-45deg);
height: 50%;
width: 50%;
perspective: 1000px;
}
#parent{
background: #fff;
}
#other{
background: #aaa;
transform: translateX(-50%) translateY(-50%) translateZ(1050px) rotateX(72.8deg) rotateY(0.1deg) rotateZ(-45deg);
}
<body>
<div class='space'>
<div class='layer' id='parent'>
<div id='child' style="transform: translateZ(200px);background: #555;width: 50%; height: 50%;"></div>
</div>
<div class='layer' id='other'></div>
</div>
</body>

transform-style: preserve-3d;
working

css width of child bigger than parent

i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: 10px;
top: -10px;
}
<div class="parallelogram">
<div class="img">
<img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
</div>
</div>
My problem is that the img keeps its parent width.
even though i ask it to be 440px its 180px. and i dont understand why.
I tried with vw, and % and none of it works!
Thank you in advance

.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color:blue;/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left:-20px;
right:0px;
top:-10px;
background-color:red;/*added for testing*/
opacity: 0.5;/* makes overlap area purple*/
}
<div class="parallelogram">
<div class="img">
<img..../>
</div>
</div>
I made left:-20px; and right:0px; to make the img appear like parallelogram.
I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.

For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:
.img img {
width: 100%;
height: auto;
}
(height: auto; is actually not necessary, since it's the default)
ADDITION AFTER COMMENT:
You have to remove overflow: hidden; from the outer DIV:
.parallelogram {
width: 180px;
height: 60px;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color: blue;
/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: -20px;
right: 0px;
top: -10px;
background-color: red;
/*added for testing*/
opacity: 0.5;
/* makes overlap area purple*/
}
.img img {
width: 100%;
height: auto;
}
<div class="parallelogram">
<div class="img">
<img src="http://placehold.it/180x60/#0d0"/>
</div>
</div>

Safari (and Chrome Mobile) z-index issue with rotateY

https://jsfiddle.net/nxbg7rq3/
In this example I need the .mask to be completely on top of the .screen. In Safari (and Chrome Mobile) that just doesn't want to work. I've tried a lot and am at the end of my tether.
It'd be nice to accomplish this without me having to change a lot of the structure that's already present in the jfiddle. Ta!
html
<div class="device">
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask"></div>
</div>
</div>
</div>
css
.container {
-webkit-backface-visibility: visible;
z-index: 0;
transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 20%;
width: 200px;
height: 300px;
}
.device {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translate3d(-38%, -50%, 0) scale(1);
transform: translate3d(-38%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
}
.perspective {
perspective: 114.35897435897436em;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
width: auto
}
.screen {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 67.5% 50%;
transform-origin: 67.5% 50%;
-webkit-transform: translateY(-51%) scale(1.07) rotateY(34deg);
transform: translateY(-51%) scale(1.07) rotateY(34deg);
position: absolute;
top: 50%;
left: 2.5%;
width: 100%;
height: 100%;
overflow: hidden;
outline: 5px solid #fa5d86;
z-index: 0;
}
.screen img {
width: 400px;
height: 300px;
}
.mask {
-webkit-transform-style: flat;
transform-style: flat;
width: 200px;
height: 200px;
position: relative;
max-height: 100%;
border: 5px solid black;
z-index: 100;
}

You can use double .mask? Example:
<div class="container">
<div class="device">
<div class="mask" style="position: absolute;"></div>
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask" style="opacity: 0;"></div>
</div>
</div>

Draw Triangle Clipping Shape using CSS

I have to make a logo shape in my website. The design is given below. How do I develop that?
For the first part of the logo I have created it using CSS3 skew property,
I have fiddled the link below. How do I develop the triangle section and the third part of the logo. The triangle is slider, so images inside should change.
https://jsfiddle.net/iamshajeer/x2og8utk/1/
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
</div>

You could use CSS transforms to rotate and skew an element into a diamond, and then reverse those transforms for the child elements. If you have overflow: hidden; on the diamond and position the diamond in a wrapper that also has overflow: hidden;, you could produce a clipping triangle with content using just CSS.
Working Example (Codepen):
/* Clip the bottom half of the diamond. */
.triangle-wrap {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
/* Rotate and skew to create a diamond. */
.triangle {
background: grey;
position: absolute;
bottom: -50%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: rotate(45deg) skew(20deg, 20deg);
-moz-transform: rotate(45deg) skew(20deg, 20deg);
-ms-transform: rotate(45deg) skew(20deg, 20deg);
transform: rotate(45deg) skew(20deg, 20deg);
}
/* Reset the skew and rotation. */
.triangle-reset {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
}
/* Create a content wrapper. */
.triangle-content {
background: url('http://placehold.it/400x400') no-repeat;
background-position: center center;
background-size: cover;
position: relative;
width: 120%;
height: 120%;
left: -10%;
bottom: 65%;
}
/* Visual aid. */
html {
min-height: 100%;
background: linear-gradient(to bottom, #336666 0%,#663366 100%);
}
<div class="triangle-wrap">
<div class="triangle">
<div class="triangle-reset">
<div class="triangle-content">
</div>
</div>
</div>
</div>

background-clip is what you're looking for. Check out this great article:
https://css-tricks.com/clipping-masking-css/
Here's an online tool to help you generate shapes:
http://bennettfeely.com/clippy/
After you generate each shape, you can position them to look like your image.

It is not perfect what you want but near to that.
Right side first div not looking good.
.third-part {
display: inline-block;
left: 500px;
position: relative;
transform: skew(22deg);
width: 180px;
}
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-10{
background: blue;
/* Skew */
left: -70px;
position: relative;
transform: skew(50deg);
width: 190px;
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
.second-part {
top: 36%;
}
.second-part {
}
.second-part {
display: inline-block;
height: 100%;
left: 240px;
position: absolute;
top: 25%;
width: 520px;
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
<div class="second-part">
<div class="triangle-shape">
<div class="wrap">
<div class="crop">
<img alt="" src="http://s23.postimg.org/wlo0phrsb/triangle01.jpg">
<h2>Projects</h2>
</div>
</div>
</div>
</div>
<div class="third-part">
<div class="menu-10" style="height: 120px;">
<h3>Products</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Services</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Location Map</h3>
</div>
</div>
</div>
Hope it will help to move forward.
Check Fiddle.

You can use SVG (http://www.w3schools.com/svg/) to draw and position the shapes and then apply CSS over them like color and backgound to get the desired results.