I have tried adding z-index, experimenting with different div names but I have had no luck.
I tried inspecting the element but it is almost as if the sidebar is going above the entire website and outside the parent div...
Any input would be greatly appreciated.
A couple of pointers
I added to .sidebar
top:100%;
left:0;
and I took out
translate(1em,0) /*This was causing bar to shift instead of bracing to window*/
here is a working snippet
html, body {
margin: 0;
height:100vh;
height:100vw;
font-size: 16px;
}
.main {
background-color: blue;
height:100vh;
width:100vw;
}
.rest {
background-color: blue;
height:100vh;
width:100vw;
}
.sidebar {
z-index: 1000;
display: block;
position: fixed;
transform: translateZ(0);
-webkit-transform: translateZ(0);
white-space: nowrap;
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
-ms-transform: rotate(-90deg);
top:100%;
left:0;
padding:0px;
width:100vh;
margin:none;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: none;
-ms-transform-origin: none;
-ms-writing-mode: tb-rl;
*writing-mode: tb-rl;
border-right: 1px solid black;
border-right: 1px solid rgba(0,0,0,0.5);
background-color: white;
background-color: rgba(255,255,255,.4);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
<html>
<body>
<div class="main">
<div class="sidebar">
testestestste
</div>
</div>
<div class="rest" style="background-color: yellow;">
</div>
</body>
</html>
Related
I'd like to add triangle seperators between the sections of a page. Each section has a transparent background color.
There's a parent div that wraps around the sections and has a fixed background image.
Example of what I'm trying to achieve:
I'm having trouble positioning the seperator/arrow and creating the white border around it.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="section-1 downarrow">
<p>Section 1</p>
</div>
<div class="section-2">
<p>Section 2</p>
</div>
<div class="section-3">
<p>Section 2</p>
</div>
</div>
</body>
</html>
CSS:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
ul {list-style:none; list-style-position:outside;}
a {outline: none;}
.wrapper {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.section-1 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.section-2 {
height: 500px;
background-color: rgba(95, 20, 20, .9);
}
.section-3 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.downarrow:after,.downarrow:before {
content: '';
position: absolute;
bottom: 0;
width: 50%;
z-index: 100;
border-bottom: 40px solid #fff;
-moz-transform: rotate(0.000001deg);
-webkit-transform: rotate(0.000001deg);
-o-transform: rotate(0.000001deg);
-ms-transform: rotate(0.000001deg);
transform: rotate(0.000001deg)
}
.downarrow:before {
right: 50%;
border-right: 40px solid transparent;
border-left: 1000px solid #fff;
}
.downarrow:after {
left: 50%;
border-left: 40px solid transparent;
border-right: 1000px solid #fff;
}
.downarrow {
overflow: hidden;
}
Any help or suggestions would be greatly appreciated.
Please check the updated one, i made some efforts to make it a look like as per the example image provided. please review the code. Hope it is helpful to you.
Note: Please update dimensions accordingly as per requirement. It is just a dummy.
.wrap {
position: relative;
height:300px;
overflow: hidden;
width: 80%;
margin: 0 auto;
background: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg) no-repeat center center;
overflow:hidden;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
top: 50%;
width: 100%;
padding-bottom:3%;
margin-top: -3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
.arrow1 {
position: absolute;
bottom: 50%;
width: 100%;
padding-bottom:3%;
background-color: rgba(0, 0, 0, 0.8);
transform: rotate(180deg);
margin-bottom: -3%;
}
.arrow1:before, .arrow1:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow1:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow1:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
<div class="wrap">
<div class="arrow"></div>
<div class="arrow1"></div>
</div>
I need a way to make a zoom animation with CSS3 in a div with border-radius. But as you can see below, it doesn't work well:
Working Code: https://jsfiddle.net/n5owxmch/
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border-radius: 10px;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 21s;
-webkit-transition: all 21s;
transition: all 21s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
HTML:
<div class="item">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
Is there a way to fix that ?
From my research I reproduced this just in Chrome (Edge and Firefox works fine). To solve it I added z-index and vendor prefixes for border-radius see below .
Prioritize the .item by adding z-index: 100; and deprioritize the image with z-index: 0;. Basically this will enforce the image to be under the .item.
And I added vendor-prefixes (-moz- and -webkit-) for border-radius:
-moz-border-radius:10px; /* add this */
-webkit-border-radius: 10px; /* add this */
See snippet:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
z-index: 100; /* add this */
position: relative;
-moz-border-radius:10px; /* add this */
-webkit-border-radius: 10px; /* add this */
border-radius: 10px;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
z-index: 0; /* add this */
-moz-transition: all 2s;
-webkit-transition: all 2s;
transition: all 2s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="item">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
I have a JSFiddle showing a flipping card, It works in chrome as I would expect but the depth perspective in firefox is flat and I'm not sure where the issue is.
I have tried adding:
transform-style: preserve-3d;
and
perspective: 1000;
to all classes (like card) I could with no luck.
The HTML structure is:
<div id="card-container">
<button id="card-flip">Flip the card</button>
<div id="card">
<div class="front card-surface"><!-- front -->
<p>The front</p>
</div>
<div class="back card-surface"><!-- back -->
<p>The back</p>
</div>
</div>
</div>
The simplified CSS is:
#card-container{
position: relative;
background-color:#888;
width: 300px;
height: 450px;
margin:0 auto;
}
#card-flip{
display:none;
}
#card{
margin:10px auto;
width: 100%;
height: 400px;
}
.card-surface{
margin-top:5px;
width: 280px;
height: 180px;
padding:10px;
}
.front{
background-color:#7B78E8;
}
.back{
background-color:#78AFE8;
}
/* Only apply 3d effects if they exist in the browser */
#card-container.threed{
height: 250px;
perspective: 1000;
}
.threed #card-flip{
background-color:transparent;
position:relative;
top:220px;
width:100%;
height:40px;
background-color:#99E5FF;
}
.threed #card-flip:focus{
outline:0;
}
.threed #card-flip:hover{
background-color:#49A5BF;
}
#card-flip:hover + #card .card-surface{
box-shadow: 0 0px 50px rgba(0,0,0,0.9);
transition: all .8s ease-in-out;
}
.threed #card{
height:200px;
}
.threed #card .front {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 900;
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.threed #card.flip .front {
z-index: 900;
border-color: #eee;
background: #333;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
transform: rotateY(180deg);
}
.threed #card .back {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 800;
border: 1px solid #ccc;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
transform: rotateY(-180deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.threed #card.flip .back {
z-index: 1000;
background-color:#ccc;
transform: rotateX(0deg) rotateY(0deg);
}
.threed #card .card-surface{
background-color:$base-white;
transition: all .8s ease-in-out;
width: 280px;
height: 180px;
padding:10px;
}
I have seen working examples like This one. Can anyone tell me what I am missing or is it not possible with this structure?
I have figured out the issue.
Here is a new version of the fiddle.
The problem was that I did not have the px after the perspective property. this was ignored by chrome but not firefox. I also applied The perspective to the wrong element in the demo so even though I had tried to ad the px before it didn't work.
So I was trying to make a skewed separation in CSS (only). It should look kind of like this here: http://i.stack.imgur.com/hVCa1.png
I tried it with CSS transforms already (transform: skew(-15deg);), but I don't think it'll work in all browsers, and it's not really adaptive. I thought about making it with linear gradients, but I'm not sure if this is any better.
Do you guys know of any better solution for this?
EDIT: here's the code:
.results {
width: 500px; }
.transf {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: grey !important;
width: 6px;
margin-left: -4px;
margin-right: -5px;
z-index: 1; }
.left_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: yellow;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
width: 10px;
margin-left: -15px;
z-index: 2; }
.right_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: orange;
border-left: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
width: 10px;
margin-right: -20px;
z-index: 2; }
.left {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: yellow;
width: 30%;
border: 1px solid green;
z-index: 0; }
.right {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: orange;
width: 20%;
border: 1px solid red;
z-index: 0; }
.item21 {
width: 5%; }
.item22 {
width: 15%; }
and the HTML:
<div class="results">
<div class="left"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right"></div>
</div>
<div class="results">
<div class="left item21"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right item22"></div>
</div>
As you have pointed out, this can be done with CSS3 only, but not all browsers support it. For full browser support i'd use jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/UkAfD/26/
var skewed = false;
function skew() {
skewed = !skewed;
$('#box').css({
skewY: skewed ? '10deg' : '-10deg'
});
}
There are a few things you could do.
You could use transforms with a polyfill like CSSSandpaper to
make it cross browser compatible. Although, to get that type of
separation (with one side of the div being straight) you may have to
use skew AND perspective.
You could make a faux separator by using the before and after
pseudo classes with the CSS triangle trick. This, too, would
require a polyfill for pseudo classes like Selectivizr. You
would also have to play around with the border-width values to get
it to match what you are looking for.
You could use a PNG using the before/after pseudo classes.
You could use SVG to draw the borders around the containers.
Any of these would work, but its definitely not as easy as, say, rounded corners or drop shadows. You need to put in a little extra work to get those types of results.
I'd like to create a CSS button in the shape of a hexagon using a single div to keep the markup clean. I've been experimenting with before and after pseudo elements and can do it with the hexagon 'points' at top and bottom but would like to do it with them pointing left and right to fit the rest of my theme. I've got close but I can't get the after pseudo element where I want it. Can anyone fix this?
Here's where I'm up to:
#hex {
background-color:green;
width:100px;
height:100px;
float:left;
display:block;
}
#hex::before {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-right:30px solid blue;
float:left;
}
#hex::after {
content:"";
border-top:50px solid red;
border-bottom:50px solid red;
border-left:30px solid blue;
float:left;
}
and there's a JS Fiddle at http://jsfiddle.net/higginbottom/YKx2M/
try this example: http://jsbin.com/ipaked/6
(tested on Fx and Chrome)
relevant CSS
.hexagon {
position: relative;
width: 124px;
height: 100px;
background: #d8d8d8;
}
.hexagon:after,
.hexagon:before {
position: absolute;
content: "";
z-index: 1;
top: 0;
width: 0px;
background: #fff;
border-top: 50px transparent solid;
border-bottom: 50px transparent solid;
}
.hexagon:before {
left: 0;
border-right: 30px #d8d8d8 solid;
}
.hexagon:after {
right: 0;
border-left: 30px #d8d8d8 solid;
}
(Adjust border-width and size of the hexagon so it can look as you prefer.)
As alternative you can also use a single pseudoelement in which you could show the black hexagon unicode character U+2B21, like in this example: http://jsbin.com/ipaked/7
CSS
.hexagon {
position: relative;
width: 120px;
height: 100px;
line-height: 100px;
text-align: center;
}
.hexagon:before {
position: absolute;
content: "\2B21";
font-size: 160px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
This is probably a better choice (if using a relative font size) so the hexagon can adjust itself when the user increase or decrease the base font-size on his browser.
I'm using clip-path:
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
vertical-align: middle;
user-select: none;
padding: 0.375rem 2rem;
--btn-raise: 1rem;
clip-path: polygon(var(--btn-raise) 0%, calc(100% - var(--btn-raise)) 0%, 100% 50%, calc(100% - var(--btn-raise)) 100%, var(--btn-raise) 100%, 0 50%);
background-color: #fefd64;
text-transform: uppercase;
}
<a class="btn" href="/call">Call call</a>
Try This codepen link http://codepen.io/bherumehta/pen/egdXLv or http://codepen.io/bherumehta/pen/VPKRBG
.hexa{
width:300px;
background:red;
height:70px;
color:#fff;
postion:relative;
border-top:1px solid red;
border-bottom:1px solid red;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner{
height:70px;
position:relative;
}
.hexa-inner:before{
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-45deg, 0deg);
-moz-transform: skew(-45deg, 0deg);
-ms-transform: skew(-45deg, 0deg);
-o-transform: skew(-45deg, 0deg);
transform: skew(-45deg,0deg);
}
.hexa-inner:after {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 50%;
width: 50px;
background: red;
-webkit-transform: skew(-135deg, 0deg);
-moz-transform: skew(-135deg, 0deg);
-ms-transform: skew(-135deg, 0deg);
-o-transform: skew(-135deg, 0deg);
transform: skew(-135deg, 0deg);
}
.left-arrow{
margin-left:-18px;
float:left;
}
.right-arrow{
transform:rotate(180deg);
float:right;
margin-right:-18px
}
.hexa p{
white-space:nowrap;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
HTML
<div class="hexa">
<div class="hexa-inner left-arrow"> </div>
<div class="hexa-inner right-arrow"> </div>
<p>hexagonhexagonhexagonhexagonhexagonhexagonhexagonhexagonhexago
xagonhexagonhexagonhexagonhexagonhexagonhexagon</p>
</div>