I just recently started toying with perspective and 3D transformations, and understand why my div is not showing up at 100% width (even with it set in the CSS). However, for what I am trying to experiment with, I would like the div to stretch across the full width of the browser responsively. I would just use pseudo-classes to give it the perspective effect if it weren't for the text inside needing to have the same perspective.
http://codepen.io/hiremarklittle/pen/OMBQBJ?editors=1100
html, body {
padding: 0;
margin: 0;
font-family: Helvetica;
font-size: 24px;
color: #777;
}
article {
-webkit-perspective-origin: 85% -100%;
perspective-origin: 85% -100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 300px;
perspective: 300px;
width: 100%;
}
div {
background: #1a1e1a;
display: block;
position: relative;
height: 100px;
width: 100%;
line-height: 100px;
text-align: left;
margin: 100px auto 0;
-webkit-transform-origin: 80px 30px;
transform-origin: 80px 30px;
-webkit-transform: rotateY(20deg) translateX(37px);
transform: rotateY(20deg) translateX(37px);
-webkit-backface-visibility: hidden;
outline: 3px solid transparent;
}
If I set the width to like 156% I think it was, it stretched all the way across, but not responsively. I'd imagine there would have to be some sort of calc() algorithm or JS/JQuery involved, but I'd have no idea where to even start.
Thanks in advance
Mark
From your bit of code , a box-shadow would visually do the job,
box-shadow: 50vw 0 #1a1e1a
but what about a img in bg and having content to go all the way to the edge ?
http://codepen.io/anon/pen/EPdpXG?editors=0100
Related
I want to make divs which got backgrounds that have this 3d-effect while scrolling, that one can achieve with translateZ. In the end it should look like cutouts or windows and through them you can see the (background-)images.
edit: So, if you scroll through the page you can see those boxes/cutouts but the images inside them are moving slower while scrolling to create the effect that they are further away. end of edit
What I have in mind is to have one div for the cutout and then another div inside it for the background. So, i set it up and it didn't work. It turns out that the overflow: hidden; of the outer div somehow blocks the transform: translateZ(-5px) scale(1.05); of its child.
Here is what I have got so far:
body {
perspective: 100px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: scroll;
}
#artwork, #photos {
width: 800px;
padding: 0 50px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.pic {
/*position: relative;*/
width: 200px;
height: 100px;
display: inline-block;
background: #aaa;
border-radius: 10px;
box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
#artwork > * {
overflow: hidden;
}
.pic div {
position: absolute;
width: 200px;
height: 110px;
background: #660; /*couldn't put an image here*/
background-size: cover;
transform: translateZ(-5px) scale(1.05);
}
<section id="artwork">
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
</section>
P.S.: I don't want to achieve the effect via JavaScript because it's not working smoothly on most computers.
edit n°2: my approaches so far:
- making extra tick borders to cover overlapping parts of the image divs; instead of using overflow: hidden >> parts are sometimes still overlapping on some screen sizes & it takes a lot of space
- creating a clip-path to use as overflow: hidden >> clip-paths also break the translateZ
- playing around with display and position on both outer and inner div >> only solutions without cutout
- Ztranslating the parent of the outer div further away and then bringing the outer div close again >> still blocked by the overflow: hidden;
I found a workaround, although it's a compromise because the border radius isn't working. I added thick borders in the background color to the outer divs and set the z-index of the inner divs to something negative.
body {
height: 200px;
perspective: 100px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: scroll;
}
#artwork {
width: 800px
padding: 0 50px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.pic {
width: 200px;
height: 100px;
margin: -40px;
display: inline-block;
background: transparent;
border: 40px solid hsl(30, 50%, 90%);
box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
}
.pic div {
position: absolute;
width: 200px;
height: 110px;
background: linear-gradient(135deg, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
transform: translateZ(-5px) scale(1.05) translateY(-1vw);
z-index: -20;
}
#artwork div:nth-child(2) div, #photos div:nth-child(2) div {transform: translateZ(-5px) scale(1.05) translateX(-1.5vw) translateY(-1vw);}
#artwork div:nth-child(4) div, #photos div:nth-child(4) div {transform: translateZ(-5px) scale(1.05) translateX(1.5vw) translateY(-1vw);}
<br><br><br><br><br><br><br>
<section id="artwork">
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
<div class="pic"><div></div></div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
that code snippet doesn't work here for some reason. For me however it works in the browser. It would be nice if someone could suggest another possible solution as this one works with only some screen sizes.
This is what i am trying to achive
i have :
#image1 {
position: absolute;
bottom: 0px;
align-self: auto;
background-color: #dc022e;
width: 340px;
height: 100px;
border-radius: 50% / 100%;
border-bottom-left-radius: 0;
/*transform: rotate(10deg);*/
border-bottom-right-radius: 0;
opacity: 0.8;
}
#image2 img {
width: 80%;
}
<div>
<div id="image2">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB">
</div>
<div id="image1"></div>
</div>
Finally I don't know how to make it rotated and with the margins cut like in the picture
A Quick example of this would use a pseudo element and have the image set in the background.
div {
position: relative;
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300);/*image path*/
overflow: hidden;/*hides the rest of the circle*/
}
div:before {
content: "";
position: absolute; /*positions with reference to div*/
top: 100%;
left: 50%;
width: 0;/*define value if you didn't want hover*/
height: 0;
border-radius: 50%;
background: tomato;/*could be rgba value (you can remove opacity then)*/
opacity: 0.5;
transform: translate(-50%, -50%);/*ensures it is in center of image*/
transition: all 0.4s;
}
/*Demo Only*/
div:hover:before {/*place this in your pseudo declaration to remove the hover*/
height: 100%;
width: 150%;/*this makes the shape wider than square*/
transform: translate(-50%, -50%) rotate(5deg);/*ensures it is in center of image + rotates*/
}
div {/*This stuff is for the text*/
font-size: 40px;
line-height: 300px;
text-align: center;
}
<div>HOVER ME</div>
Instead of nested elements, you can just use a pseudo element. This is placed at the bottom of the container div. For this to work, you need position:relative and overflow:hidden on the container div. Also, pseudo elements always need the content declaration.
To modify the border radius, you just play around with left | width | height of the pseudo element. You don't need any rotation.
Instead of hex color and opacity you can as well use the "new" color space rgba(r,g,b,a) where a is the opacity value.
For the passepartout you simply use the border declaration.
#image2{
position:relative;
border:10px solid #888;
overflow:hidden;
box-shadow:0 0 4px #aaa;
}
#image2::after {
content:"";
display:block;
position: absolute;
bottom: 0;left:-10%;
background-color: #dc022e;
width: 120%;
height: 60%;
border-radius: 100% 100% 0 0;
opacity: 0.8;
}
#image2 img {
width: 100%;
display:block;
position:relative;
}
<div id="image2">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB">
</div>
You can just use position: absolute for your image and position: relative for your overlay, adjusting the top position and width according to your needs. Here's a Fiddle. Hope this helps!
Edit: Here's an updated version of the Fiddle demonstrating border and overflow properties on the img container. As CBroe mentioned, rotating a circle is probably not a good use of your time in this case. Also, I definitely agree that using a pseudo element is a much cleaner approach than nesting images.
I am trying to position a <div> over a photograph of a TV on a wall, so it looks like the <div> is on the TV.
I am sure the solution is in using CSS 3D transforms and so perspective, perspective-origin, transform and transform-origin. However I can't work out values of these which achieve a good result because I'm using trial and error - I don't know the maths.
This is my progress:
And a jsfiddle of it: https://jsfiddle.net/2pye7nc2/
I am setting perspective on the container:
perspective: 500px;
perspective-origin: 210px 382px;
And transform on the element inside it:
transform: translateX(153px) translateY(253px) translateZ(0) rotateX(-12deg) rotateY(-31deg) rotateZ(-20deg);
transform-origin: 0px 150px;
Help is really appreciated.
The best I could do:
.tv .tv-content {
position: absolute;
top: 0;
left: 0;
opacity: 0.75;
width: 392px;
height: 356px;
transform: translateX(193px) translateY(211px) translateZ(0) rotateX(-11deg) rotateY(-40deg) rotateZ(-19.5deg);
transform-origin: 0px 150px;
line-height: 300px;
text-align: center;
font-size: 32px;
background-color: red;
color: blue;
}
https://jsfiddle.net/Lzf2umzf/
Will that help?
I tried to make a shape using div and put an image inside. I want the image to maintain its default shape (rectangle or square) without skewing, but when I put image inside, the image skewed with the div. For the div shape I am using transform: skewY(-10deg);
.intro {
width: 180px;
height: 400px;
/* border-radius:50%;*/
cursor: pointer;
position: relative;
background: #fff;
transform: skewY(-10deg);
margin: 35px 35px 35px 0px;
}
.intro img {
width: 100%;
height: 100%;
}
<div class="intro">
<img src="http://lorempixel.com/180/400/sports">
</div>
You are trying to accomplish this: distort the shape of the outer object but keep the inner shape the same. The only way to do that is to transform the inner shape by the negative of the outer shape transform (aka, if your skewY(10deg) on the outer shape, do skewY(-10deg) on the inner), then hiding the overflow.
See this snippet:
.intro {
width: 180px;
height: 400px;
cursor: pointer;
position: relative;
background: #fff;
/* I added the -webkit- prefix as I'm using Safari 8 and
* it wouldn't show up otherwise. Might want to prefix that! */
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
margin: 35px 35px 35px 0px;
overflow: hidden;
}
.intro img {
width: 100%;
height: 100%;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
}
<div class="intro">
<img src="http://lorempixel.com/180/400/sports">
</div>
An annoying sideeffect of this is that your contents will seem cut off. The only way to solve that is to make the inner shape larger than the outer shape an potentially padding the inside. For your image, I'd suggest:
.intro {
position: relative;
}
.intro img {
/* Use min width and heights higher than 100%
* (you might need to experiment here as it depends
* on the angle you chose for your skew) to fill
* the outer shape completely. */
min-width: 110%;
min-height: 110%;
/* Position the element absolute and 50%
* from the top and left */
position: absolute;
left: 50%;
top: 50%;
/* Now add a transform to it to move it with
* half of its width and height, therefore centering it. */
-webkit-transform: skewY(10deg) translate(-50%, -50%);
transform: skewY(10deg) translate(-50%, -50%);
}
Now you could also do width: 110%; height: 110%; left: -5%; top: -5%; and it would accomplish similar results. Play around with it.
Update
As per #vals suggestion, it might be a lot simpeler to just use the scale transform instead of all the positioning mumbo jumbo. Its always the simplest solution thats easiest to overlook:
.intro img {
-webkit-transform: skewY(10deg) scale(1.2, 1.2);
transform: skewY(10deg) scale(1.2, 1.2);
}
First time really using the pseudo :after selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious.
Here's my live code.
li.current:after {
border-width: 1px 1px 0 0;
content: ' ';
background: #256f9e;
display: block;
height: 13px;
position: absolute;
width: 10px;
top: 6;
margin:0px auto;
z-index: 99;
transform: rotate(-224deg);
-webkit-transform: rotate(-224deg);
-moz-transform: rotate(-224deg);
-ms-transform: rotate(-224deg);
-o-transform: rotate(-224deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
text-align: center;
float: center;
}
I've created a little triangle (Or rather a box that has been rotated to look like a triangle). I want it centered within the <li></li> but can't figure it out using my normal methods.
The things that have failed (in no particular order):
text-align: center;
float: center;
margin: 0 auto;
margin-right: 0;
margin-left: 0;
What am I missing? I doubt it matters, but I'm using AngularJS. Thought I'd mention it in case there is a known conflict between Angular & Pseudo selectors (which I doubt).
Thanks.
The issue is your use of absolute positioning & the method you're using to try and center it. If you position an element absolutely, the ol' margin: 0 auto; method won't work to center the thing. I point you to an explanation as to why this is at the end of the question, but in case you just want this to work let's get to the solution first.
Here's some working code. View it on JSFiddle
#tool-menu li {
...
position: relative;
}
li.current:after {
...
position: absolute;
width: 10px;
top: 6;
left: 50%;
margin-left: -5px;
}
Let's break down what's going on here.
Setting up a new Containing Block
In your original Fiddle, the pseudoelement is positioned absolutely relative to the viewport. An example might be the best way to show what this means, and why we don't want this. Consider setting it to top: 0. This would keep it latched to the top of the browser window (or, in this case, the JSFiddle frame), rather than the parent (the li). So, if our menu happened to be at the bottom of the page, or even moving around, the pseudoelement would be floating independent from it, stuck to the top of the page.
This is the default behavior of an absolutely positioned element when you don't explicitly set the position on any parent elements. What we want is to have its position defined relative to the parent. If we do this then the pseudoelement sticks with the parent, no matter where it happens to be.
To make this happen, you need to set the parent, #tool-menu li, to be explicitly positioned (which means setting it to be anything other than position: static). If you choose to use position: relative;, it won't change the computed location of the parent on the page, and does the thing we want. So that's why I used that one.
In technical terms, what we're doing here is creating a new containing block for the child.
Positioning the Pseudoelement
Now that our absolute positioning will be determined in relation to the parent, we can take advantage of the fact that we can use percentages to define where to place the child. In this case, you want it centered, so I set it be left: 50%.
If you do just this, though, you'll see that this lines up the left edge of the pseudoelement at 50%. This isn't what we want – we want the center of the pseudoelement to be at the middle. And that's why I added the negative margin-left. This scoots it over a bit to line the middle up with the center of the parent.
And once we do that, it's centered! Brilliance!
Why didn't my margin: auto; work?
The auto value of a margin is calculated from a fairly complex algorithm. At times, it computes to 0. I know from experience that this is one such instance of that happening, though I haven't yet traced my way through the algorithm to see exactly why. If you'd like to run through it, take a look at the spec most browsers have most likely implemented.
Using calc to center
You can also use the calc function in css to center the pseudo element.
Note: This isn't supported in IE8 and below (caniuse) but you can provide a fallback for older browsers.
View it on this code pen. I'm also using MarkP's css border method to draw the triangle.
li.current:after {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
overflow: hidden;
bottom: -5px;
left: calc(50% - 5px);
z-index: 2;
border-top: 5px #256f9e solid;
border-left: 5px transparent solid;
border-right: 5px transparent solid;
}
Wouldn't be better to just define the width as a percentage, make it a block element and text-align it in the center?
"float: center;" is invalid, and won't work. Mixing floated and absolute positioned elements are a sure way to get trouble with your layout as they don't really work that well togheter.
Try something like this:
li.current:after {
content: 'YOUR CONTENT';
display: block;
width: 100%;
text-align: center; }
Using margin:auto to center
As long as the element has a width declared you can use the absolute centering method.
To use this method the right and left properties must be set to 0 for margin: auto to be effective.
This method can be expanded to implement horizontal centering as well.
see link for full info:
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
li.current:after {
content: "";
position: absolute;
display: block;
right: 0;
bottom: -5px;
left: 0;
margin: auto;
border-width: 5px;
border-style: solid;
border-color: transparent;
border-top-color: #256f9e;
width: 200px;
height: 200px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
<div>
<ul>
<li class="current"></li>
</ul>
</div>
Not directly related (have already voted up jmeas) but you may also find it easier to use the CSS border trick to make the triangle. e.g.
li.current:after {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
overflow:hidden;
bottom: 0;
left: 50%;
margin: 0 0 -5px -5px;
z-index: 99;
border-top: 5px #256f9e solid;
border-left: 5px transparent solid;
border-right: 5px transparent solid;
}
Similar tactics as to what jmeas has suggested with regards to the vertical positioning. We align to the bottom and then use a negative margin-bottom to push this out to the desired location.
With transform: translate() centering can be accomplished without a fixed size. This is because translate(<x>%) will use the (psuedo-)element's own size, while left and margin-left will use the container's size. By using these together we can therefore find the exact center-point.
tl;dr
To center vertically:
.container {
position: relative;
}
.container:after {
top: 50%;
transform: translateY(-50%);
}
To center horizontally:
.container {
position: relative;
}
.container:after {
left: 50%;
transform: translateX(-50%);
}
Full example
.container {
position: relative;
display: inline-block;
background: #4aa;
color: white;
padding: .5ex 1ex;
}
.container:after {
content: ":after";
position: absolute;
background: #a4a;
color: white;
padding: .5ex 1ex;
/* position below container */
top: 100%;
/* move right by 50% of containers width */
left: 50%;
/* move left by 50% of own width */
transform: translateX(-50%);
}
<p class="container">
Container with content
</p>
This may be the simplest way to do it:
.child_class::after{
position: absolute;
content: 'YourContentHere';
width: 100%;
text-align: center;
top: 50%;
}
the simplest way to do this -
With pesudo element :after or :before use display: inline-block;
Try something like this:
content: url(../images/no-result.png);
display: inline-block;
width: 100%;
text-align: center;
Using display: grid to center ::before
...worked nice for me. I'm using fa-Icons on this page and centered them within an element with 50% border-radius:
i {
font-size: 0.9rem;
border: 1px solid white;
border-radius: 50%;
width: 30px;
aspect-ratio: 1;
margin-inline: 5px;
}
i::before {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
This tutorial can help you to make center CSS pseudo-elements.
https://techidem.com/centering-pseudo-before-after-elements-content/
h2 {
text-align: center;
color: #181818;
padding-bottom: 20px;
margin-bottom: 35px;
border-bottom: 1px solid #eaeaea;
position: relative;
}
h2::after {
content: "";
width: 70px;
height: 4px;
background-color: #ff0000;
left: calc( 100% - ( 50% + 35px ) );
position: absolute;
display: block;
bottom: 0;
}
<h2>Most Recent Posts</h2>
You may use container queries with grid layout
element {
container-type: size;
&::after {
content: '';
position: absolute;
width: 100cqw;
height: 100cqh;
display: grid;
place-items: center;
}
}
Container queries: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
I personally don't really like the idea to change position attribute or do some margin manipulation. I think the easiest way is two lines of CSS:
.element::after {
/* your css */
line-height: initial;
vertical-align: initial;
}
And there is no need to touch the parent.