I'm using bootstrap 3 as my grid framework along with css to create a semi-transparent area with one skewed/slanted edge, but am running into problems with my elements due to layered opacity.
The expectation is that the center is slanted, but the right side is still square.
Is there a better way to accomplish this?
Please see the jsfiddle for a working example.
<div class="container">
<div class="row marketing-text">
<div class="col-sm-6">
<!-- Intentionally empty, jsfiddle was giving me issues with the offset -->
</div>
<div class="col-sm-6 right">
<h5 class="uppercase">Header Text</h5>
<p>Long Text Input</p>
</div>
</div>
</div>
<style>
.row.marketing-text .right {
padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;
background-color: rgba(255, 139, 0, 0.5);
}
.row.marketing-text .right::before {
content: " ";
transform-origin: top;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 139, 0, 0.5);
}
</style>
https://jsfiddle.net/aq9Laaew/255707/
Referring your example, Overlapping layers having background-color with opacity/rgba value will definitely not achieve the desired output.
Better way to accomplish this would be using :before and :after pseudo-elements
Related
I have a link that has been rotated and fixed in the window. Problem is I don't know how to position it on the right edge without adding a negative position right.
Negative right position doesn't work when changing the screen sizes, so I need to find another solution..
Any ideas?
Codepen for reference also.
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
right: 0;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
The reason why it doesn't stick to the edge with using transform rotate is because it adjusts the container of the text, but not the text itself which uses the containers borders to stick to the edge of the screen.
A proposed solution without having to use negative right position is to use writing-mode instead, this targets the text directly instead of its container with:
writing-mode: vertical-rl; // This makes your text appear vertical
You can read more about it here for more details: Writing-mode
Try this. although this is a few different on different screen sizes:
.section {
height: 100vh;
}
.section-one {
background-color: #f8f9fa;
}
.section-two {
background-color: #e9ecef;
}
.section-three {
background-color: #dee2e6;
}
.section-four {
background-color: #ced4da;
}
.fixed-link {
width: max-content;
position: fixed;
top: 50%;
/* Need to be fixed to right without adding a negative position right */
left: 95%;
transform: translateY(-50%);
transform: rotate(270deg);
transform-origin: 0 0;
}
<div class="container">
<div class="section section-one"></div>
<div class="section section-two"></div>
<div class="section section-three"></div>
<div class="section section-four"></div>
</div>
FIXED LINK
I have a centered form on my page positioned using top and left values and css3 transformations.
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/** backface-visibility: hidden; **/
}
h1 {
padding-bottom: 5px;
border-bottom: 3px solid blue
}
Notice backface-visibility. When set to hidden, all problems are solved for me using chrome 42. It doesn't render blurry. For others however using the same chrome version, it renders blurry with it.
Here's what it looks like without BV: http://jsfiddle.net/mzws2fnp/
To you it may be blurry, to others it may not.
Here's what it looks like with BV: http://jsfiddle.net/mzws2fnp/2/
For some reason people see the border blurry however I do not. I know backface-visibility: hidden is meant to fix that, and it does for me, just not for others using the same browser as I. Strange.
Try -50.1%
transform: translateY(-50%) translateX(-50.1%);
EDIT:
I have found out, they are blurred when chrome dev tools are opened, try to close them and refresh
This is a bug in Google Chrome. I reported this issue to Google:
Rendering bug in css transform: it blurrs borders
<div class="middle">
<input type="text" />
</div>
.middle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
input {
border: 1px solid black;
border-radius: 4px;
}
var middle = document.querySelector('.middle');
setInterval(function(){
middle.style.paddingTop = middle.style.paddingTop === "0px" ? "1px" : "0px";
}, 1000);
Animated bug demonstration
When you use percentage, will play an odd number. will blurry borders,
using parseInt to assign the value is integer.
$(document).ready(function(){
$('.middle').css({
'top':parseInt($('.middle').position().top)+ 'px',
'left': parseInt($('.middle').position().left)+'px',
'transform':'none',
'-webkit-transform':'none'
});
});
.middle {
position: absolute;
top: 30%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
.middle2 {
position: absolute;
top: 70%;
left: 50%;
min-width: 390px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
h1 {
padding-bottom: 5px;
border-bottom: 4px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle">
<h1>This is blurry, or should be.</h1>
</div>
<div class="middle2">
<h1>This is blurry, or should be.</h1>
</div>
In this specific case where you're using a solid border, you can try using a box-shadow instead of a border as a workaround. For example, replace: border-bottom: 3px solid blue; with box-shadow: 0px 3px 0px blue;
Use even number (2px or 4px) for the border. Odd number (3px or 5px) is giving that blur.
border-bottom: 4px solid blue;
there is little hack that can help to get any block as center middle.
in parent <div> where we add position: relative add below properties,
display: flex;
justify-content: center;
now add align-self: center; property with the block which we want to make center middle make sure that this block is absolute position.
Because translated element height is odd number. This will not occur when element height is even number.
This problem occurs when we add
transform: translateY(-50%) translateX(-50%);
OR
transform: translate(-50%, -50%);
it is still as an open issue in chromium bugs list.
I am trying to make cube with 3 square divs and CSS.
The problem appears with the top side: I can't find a way to give it a proper shape.
Of course, it should be an easy way to do it with matrix or other stuff, but if there's a way to solve this problem using only skew and rotate, please provide it.
Thanks in advance.
html:
<div id='box' class='top'></div>
<div id='box' class='left'></div>
<div id='box' class='right'></div>
CSS:
#box {
width: 50px;
height: 50px;
}
.top {
background: #bbf;
margin: 40px 0 0 24px;
transform: rotate(-30deg) skewX(30deg); /* ??! */
}
.left {
background: #fbb;
transform: rotate(30deg) skewX(30deg);
display: inline-block;
margin: -11px 0 0 0;
}
.right {
background: #bfb;
transform: rotate(60deg) skewY(30deg);
display: inline-block;
margin: -11px 0 0 -11px;
}
EDIT: thanks to #rby, I reordered the layers a bit
See at jsfiddle
Here's one way to do it using only skew and rotate as you specified, but with a few additional modifications. First, and most important, arrange the order of your divs so that the div for the top box is first, followed by the two sides. The way you have it now, the top div (class third) is last. Then, the other modifications I did was to use a block display for the top div and add a left margin to it so that it is pushed in towards the side divs and reduce the top margin on the side divs from 50px to 10px. With these changes and your existing rotate, skewX transforms, you get a cube.
Here's the modified code - not to disrupt your code too much I simply created a new id called boxTop for the top box but it'd be best to restructure the rules.
The divs:
<div id='boxTop' class='third'></div>
<div id='box' class='first'></div>
<div id='box' class='second'></div>
The CSS:
#box {
width: 100px;
height: 100px;
margin-top: 10px;
display: inline-block;
}
#boxTop {
width: 100px;
height: 100px;
display: block;
}
.third {
background: #bbf;
margin-left: 50px;
transform: rotate(-30deg) skewX(30deg); /* ??! */
}
Hope this solves your problem.
I've been wondering for a little while now what the best way to do this is. see this link for example: http://prntscr.com/48a54f
Basically if i have a full width website but i want to have 2 colors that are not just blocks but have this shape to them. also keeping in mind that the site would be responsive. I assume i can get around some smaller alignment issues with media queries but whats the best practice to use here? Is there a CSS3 transform option? (i dont need to worry too much about older browser support), my thinking is that if there is a css3 transform option that could be applied to a div or section tag then i could nest the content inside that in to half columns, something like this maybe?
<section class="backgroundStyle">
<div class="column-6">
<!-- some content -->
</div>
<div class="column-6">
<!-- some content -->
</div>
</section>
You can do it with an extra psuedo element and transform. Background image or gradient would probably be most efficient, however, this allows a little more control of each side if you need to adjust it.
#outer {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
#left {
width: 50%;
height: 100%;
background-color: #CCC;
}
#right {
width: 50%;
background-color: #333;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
#right:after {
content: "";
display: block;
width: 30%;
transform: rotation(50deg);
background-color: #333;
position: absolute;
left: -20%;
top: -5%;
height: 120%;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>
http://jsfiddle.net/dHLHt/2/
Could do a CSS gradient:
http://jsfiddle.net/isherwood/28agr/
background: linear-gradient(135deg, rgba(186, 39, 55, 1) 0%, rgba(186, 39, 55, 1) 51%, rgba(239, 197, 202, 1) 51%, rgba(239, 197, 202, 1) 100%);
http://www.cssmatic.com/gradient-generator
I'm attempting to rotate a div to which I have applied a 'page curl' drop shadow.
The page curl drop shadow effect is working fine until I rotate the div, at which point the drop shadow elements show up through the div (z-index issue)?
I've also noticed that if I have an image as the div content, I don't get this issue, but I'd love to get it working for a div with text content. Any suggestions?
Here's the code:
CSS (vendor prefixes removed to shorten code, but the problem is occurring across all modern browsers):
.shadow {border:1px solid #ccc;position:relative;width:300px;height:116px;background-color:#ededed;}
.shadow:before, .shadow:after {
bottom:13px;
content: "";
position: absolute;
z-index: -1;
-moz-transform: rotate(-11deg);
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
height: 50px;
max-width: 50%;
width: 50%;
left:3px;
}
.shadow:after {
-moz-transform: rotate(11deg);
left: auto;
right: 2px;
}
.rotate{
-moz-transform: rotate(4deg);
}
HTML:
<div class="shadow">this is the first div</div> <!-- this one is ok -->
<div class="shadow rotate">this is the second div</div> <!-- this has the issue -->
<div class="shadow rotate"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div> <!-- this one is ok -->
And here's a jsfiddle:
http://jsfiddle.net/U8qY3/5/
Nice job!
As a workaround, you can put a DIV inside the rotated div, with background-colour set to underneath one, and full height and width, like this: http://jsfiddle.net/U8qY3/6/
HTML
<div class="shadow rotate">
<div class="workaround">this is the second div</div>
</div>
CSS
.workaround{
height: 100%;
width: 100%;
background-color: #ededed;
}