I'm trying to skew a div, something similar to what https://digital.scotch.io/ has but actually it's not coming out right.
.skew1:before {
content:' ';
display: block;
height: 400px;
width: 100%;
background: black;
padding: 50px 0;
-webkit-transform: skewY(-2deg) translateZ(0);
-moz-transform: skewY(-2deg) translateZ(0);
-ms-transform: skewY(-2deg) translateZ(0);
-o-transform: skewY(-2deg) translateZ(0);
transform: skewY(-2deg) translateZ(0);
position: absolute;
left: 0;
bottom: -10px;
z-index: -1;
overflow: hidden;
}
<section>
<div class="container skew1">
<div class="row">
<div class="col-md-12">
<h2>This is my skew1!</h2>
</div>
</div>
</div>
</section>
Not really sure what I'm doing wrong. This is my JSfiddle. Any help please? Thanks.
what you need is not skewing. you need to set a 3d perspective to the div and rotate it on its Y axis:
.container {
margin-top: 20px;
width: 500px;
height: 150px;
position: relative;
perspective: 800px;
}
.container2 {
margin: 5px 82px;
width: 500px;
height: 150px;
position: relative;
perspective: 800px;
}
.container .inner {
width: 100%;
height: 100%;
display: block;
background: red;
transform: rotateY(-45deg);
}
.container2 .inner {
width: 100%;
height: 100%;
display: block;
background: blue;
transform: rotateY(45deg);
}
<section class="container">
<div class="inner"></div>
</section>
<section class="container2">
<div class="inner"></div>
</section>
The div wrapping the text needed to be position: relative;(check the original code) and also needed some height and padding to align the text vertically. This is the JSFiddle.
Related
I only want to hide elements thats overflowing on the top. In my document blue is the background img and the child is skewed div.
fiddle
<div class="parent">
<div class=child>
</div>
</div>
.parent {
margin: 50px;
height: 200px;
width: 200px;
background: red;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
Need to add another parent with overflow: hidden:
.ovh-parent {
overflow: hidden;
}
.parent {
margin: 50px;
height: 200px;
width: 200px;
background: red;
margin-top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="ovh-parent">
<div class="parent">
<div class=child>
</div>
</div>
</div>
Does this work out for you? See the preview below...
Preview
You would need to add another div outside of the parent that would help with hiding the overflow.
.overflow{
margin: 20px;
overflow: hidden;
height: 300px;
width: 200px;
position: relative;
}
.parent {
height: 200px;
width: 200px;
background: red;
position: absolute;
top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="overflow">
<div class="parent">
<div class=child>
</div>
</div>
</div>
You don't need to add another ancestor if you use this trick:
Add overflow: hidden to hide overflow
Increase the height to avoid clipping the overflow at the bottom
Add a negative margin to prevent the previous step from affecting following contents
Use a background image instead of a background color. For example, use a gradient.
Use background-size to set the size of that background image. Do not repeat the background.
.parent {
overflow: hidden;
margin: 50px;
height: 300px;
margin-bottom: -100px;
width: 200px;
background: linear-gradient(red, red) no-repeat;
background-size: auto 200px;
margin-top: 0;
}
.child {
height: 200px;
width: 200px;
background: blue;
transform: skewY(20deg);
-webkit-transform: skewY(20deg);
-moz-transform: skewY(20deg);
-o-transform: skewY(20deg);
}
<div class="parent">
<div class="child"></div>
</div>
Lorem ipsum
I want an image to be on the right side of a <div> but centered vertically.
I would like it to be flexbox or as simple as possible.
#container1 {
width: auto;
height: auto;
}
#div1 {
width: 400px;
height: 200px;
border: 1px solid black;
text-align: right;
display: flex;
align-items: center;
justify-content: center;
}
#some_image {
width: 50px;
height: 25px;
}
<div id="container1">
<div id="div1"><img id="some_image" src="some_image.gif"></div>
You were close
Flexbox Solution
#div1 {
width: 400px;
height: 200px;
margin: 1em auto;
border: 1px solid black;
display: flex;
align-items: center; /* vertical center */
justify-content: flex-end; /* far right */
}
#some_image {
width: 50px;
height: 25px;
}
<div id="div1">
<img id="some_image" src="http://lorempixel.com/image_output/abstract-q-c-50-25-6.jpg">
</div>
The best and simplest way (compatible with all browsers) it's to use transform: translate() function combined with position: absolute. It allows to center (horizontally and/or vertically) without pre-known the size of the box, for example:
#container1 {
position: relative;
width: 100%;
background: blue;
height: 100px;
margin: 20px 0;
}
#div1 {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translateY(-50%); /* safari ios*/
-ms-transform: translateY(-50%); /* old IE */
transform: translateY(-50%); /* standard */
background:red;
color:white;
}
#div2 {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%); /* safari ios*/
-ms-transform: translate(-50%,-50%); /* old IE */
transform: translate(-50%,-50%); /* standard */
background:red;
color:white;
}
<div id="container1">
<div id="div1">Something you want</div>
</div>
<div id="container1">
<div id="div2">Something you want</div>
</div>
So, I was trying to create flip effect with css and here I am... fiddle link: https://jsfiddle.net/Munja/db11mmut/
I have 2 sides, front and back side. Issue is, back side is hidden until front side is rotated for 180deg. I would like to avoid that and make back side partially visible during rotation of front side, in order to make fine flip effect.
Any suggestions? Thank you in advance!
Code:
.container {
position: relative;
width: 200px;
height: 200px;
}
.container:hover .el{
transform: rotateY(180deg);
}
.el {
position: relative;
display: block;
width: 100%;
height: 120%;
background: #eee;
transition: 0.6s;
transform-style: preserve-3d;
}
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightgreen;
backgace-visibility: hidden;
z-index: 2;
transform: rotateY(0deg);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightblue;
backgace-visibility: hidden;
transform: rotateY(180deg);
}
<div class="container">
<div class="el">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>
you have to remove transform: rotateY(0deg); and the z-index from the front class, here is a working example
https://jsfiddle.net/db11mmut/2/
Below is the snippet:
.out {
margin: 100px auto;
width: 50%;
height: 100px;
background-color: green;
}
.in {
width: 50%;
height: 50px;
background-color: red;
transform: translate3d(-20%, -40%, 0px) scale(0.7);
position: absolute;
}
<div class="out">
<div class="in">
</div>
</div>
As can be seen, the inner element (red square) goes out of the border/bound of the outer element (green square).
Does anyone have ideas about how to clip the part of inner element which goes out of the border of the outer element?
--
I find overflow: hidden doesn't work well because of the position: absolute property in the inner element..
Add overflow:hidden on the outer element:
.out {
overflow:hidden;
margin: 100px auto;
width: 50%;
height: 100px;
background-color: green;
}
.in {
width: 50%;
height: 50px;
background-color: red;
transform: translate3d(-20%, -40%, 0px) scale(0.7);
}
<div class="out">
<div class="in">
</div>
</div>
you can try this one:
.out {
margin: 100px auto;
width: 50%;
height: 100px;
background-color: green;
overflow:hidden;
}
.in {
width: 50%;
height: 50px;
background-color: red;
transform: translate3d(-20%, -40%, 0px) scale(0.7);
}
DEMO
I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.
My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.
Any ideas?
I've created a fiddle here with three examples.
HTML:
<div class="container">
<div class="splash">Lorem</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum</div>
</div>
<div class="container">
<div class="splash">Lorem ipsum dolor</div>
</div>
CSS:
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table-cell;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute
<div class="container">
<div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
<div class="splash"><span>Lorem ipsum dolor<span></div>
</div>
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
overflow: hidden;
display: table;
text-align: center;
vertical-align: middle;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
span{
display:table-cell;
vertical-align: middle;
}
You could create an extra span tag inside .splash and center it via position absolute and transform translate trick
.container{
position: relative;
width: 70px;
display: inline-block;
}
.splash {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
height: 70px;
width: 70px;
background: green;
color: white;
position: absolute;
transform: rotate(15deg);
-ms-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}
.splash span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
For a markup like this :
<div class="container">
<div class="splash"><span>Lorem</span></div>
</div>
An example: http://jsfiddle.net/tdtx3cfe/3/
As one of the options, you can align splash with flexible boxes:
.container {
width: 70px;
height: 70px;
display: inline-flex;
border-radius: 50%;
background: green;
justify-content: center;
align-items: center;
}
.splash {
color: white;
text-align: center;
transform: rotate(15deg);
}
body {
display: flex
}
I had to add body style to vertically align containers.
JSFiddle.