I have this test setup. When I hover over the "Block 1" it should get transformed while keeping its integrity. What I see is that background color is changing. It seems like it's all about background of that .blocks:after element.
(if I comment that, background of element won't change while hovering over).
So, what could cause a problem?
Source - https://jsfiddle.net/1k5e2090/6/
body {
background: #d3d3d3;
}
.blocks {
display: flex;
position: relative;
width: 150px;
height: 55px;
margin: 25px;
justify-content: center;
align-items: center;
color: white;
font-family: 'Helvetica', sans-serif;
font-size: 20px;
}
.blocks#block1 {
background: #4BACC6;
left: 500px;
top: 200px;
}
.blocks#block2 {
left: 500px;
top: -50px;
background: #9BBB59;
}
.blocks#block3 {
left: 200px;
top: -45px;
background: #C0504D;
}
.blocks:after {
position: absolute;
content: '';
background: #F2F2F2;
top: -7px;
left: -7px;
right: -7px;
bottom: -7px;
z-index: -1;
}
.blocks#block1:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(75, 172, 198, 0.45);
}
.blocks#block2:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(155, 187, 89, 0.45);
}
.blocks#block3:after {
box-shadow: 3.5px 5.5px 1px -1px rgba(192, 80, 77, 0.45);
}
.blocks#block1:hover {
transition: 1s ease;
transform: translate(-100px);
}
It's because of the :after behavior on .blocks elements. See this fiddle
.blocks:hover:after { border: 6px solid #fff; background: transparent; z-index: -2; }
.blocks {
border: 7px solid #f2f2f2;
}
i have edited your fiddle https://jsfiddle.net/1k5e2090/9/
you have used the border as a :pseudo element which is not necessary. it is actually creating the problem
In place of using before and after use simple border on blocks and gives box shadow, This is happened because you use position absolute in before and after so when a block moves before and after adopt automatically.Hope it work
Simple use border around the block and remove before and after your problem will solved
Related
I want to achieve the effect on the textfields on this page using css, but I need to apply it on a contenteditable div.
This is whay I did so far:
<style>
.container {
height: 35px;
width: 100%;
border: solid 1px rgba(0, 0, 0, .2);
margin-bottom: 5px;
overflow-x: auto;
padding-bottom: 10px;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.container:focus {
border-bottom: solid 2px black;
}
</style>
And this is the HTML:
<div id="editor" contenteditable="true" class="container" />
It turns the bottom line from nothing to black on focus and on focus lost it goes from black to fade. What I want is to show that very same line but from the center of the div to the borders on focus and on focus lost I want it to go from borders to center, as in the link.
Does anybody can help?
Thanks in advance.
You can't achieve this with just a border. Use :before and :after for this. Be sure you give your element a position: relative; so you can give your :before and :after a position: absolute;
.container {
position: relative;
height: 35px;
width: 100%;
border: 0;
margin-bottom: 5px;
overflow-x: auto;
padding-bottom: 10px;
}
.container:before,
.container:after {
position: absolute;
bottom: 0;
content: '';
}
.container:before {
left: 0;
height: 1px;
width: 100%;
background: #e0e0e0;
border-bottom: solid 1px rgba(0, 0, 0, .2);
z-index: 1;
}
.container:after {
position: absolute;
left: 50%;
height: 3px;
width: 0;
background: blue;
border: 0;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
z-index: 2;
}
.container:focus {
outline: 0;
}
.container:focus:after {
width: 100%;
}
Example https://jsfiddle.net/skeurentjes/3brebpug/
I got to make a block like that.
Is there a way how to apply box-shadow for the block without shadows overlapping?
Here is my the best result - http://codepen.io/To_wave/pen/zwwqRd
<div class="box">
<div class="triangle"></div>
</div>
body {
background: #F8F8F8;
padding: 50px;
}
.box {
height: 150px;
background: #FFF;
position: relative;
box-shadow: 0 2px 4px 0 rgba(62, 62, 62, 0.2);
}
.triangle {
width: 14px;
height: 26px;
position: absolute;
left: -13px;
bottom: -4px;
overflow: hidden;
}
.triangle:after {
content: "";
position: absolute;
width: 18px;
height: 30px;
background: #fff;
transform: skew(-26deg);
bottom: 4px;
left: 10px;
box-shadow: 0px 2px 4px 0px rgba(62, 62, 62, 0.2);
}
to_wave.
I create this bubble box using only one div and a different concept on the triangle to avoid this shadow box issue. Its not the perfect solution, but it works: https://jsfiddle.net/DiogoBernardelli/028wqpee/1/
What i made was create this m-bubble::before with width: calc(100% + 7px) (the calc is because the left:-7px positioning), and adding a bottom:-3px. That way, this element will fill the entire bottom of the bubble and you will avoid the shadows overlapping.
I used perspective, rotateX and transform-origin to create this "one side skewed" element. If you have a better solution to do it, fill free to make your own adjustments.
Hope it works for you, and sorry about my english.
Best regards from Brazil.
What about using canvas?
https://codepen.io/partypete25/pen/bWWLzN
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(20,20);
context.lineTo(500,20);
context.lineTo(500,300);
context.lineTo(10,300);
context.lineTo(20,280);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.shadowBlur=10;
context.shadowColor="black";
context.fillStyle = '#fff';
context.fill();
</script>
I improved my initial idea.
It looks pretty complex, but works codepen.io
<div class="wrapper">
<div class="container">
<div class="box">
</div>
</div>
</div>
body {
background-color: #F8F8F8;
}
.wrapper {
position: relative;
padding-right: 2px;
}
.wrapper::after {
content: '';
position: absolute;
display: block;
right: 2px;
top: 0;
width: 0;
height: calc(100% - 5px);
box-shadow: 0 2px 4px 1px rgba(62, 62, 62, .2);
z-index: -1;
}
.container {
padding: 1px 0 8px 30px;
position: relative;
overflow: hidden;
}
.box {
position: relative;
background: #FFFFFF;
height: 120px;
box-shadow: 0 2px 4px 0 rgba(62, 62, 62, .2);
}
.box::after {
content: '';
display: block;
position: absolute;
background-color: #FFFFFF;
height: 26px;
width: calc(100% + 12px);
left: -6px;
bottom: -5px;
transform: skewX(-26deg);
box-shadow: -1px 3px 4px -2px rgba(62, 62, 62, .2)
}
Here is my tooltip:
.tooltip-content{
visibility: hidden;
min-width: 180px;
background-color: rgba(38, 38, 38, 0.9);
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px 3px;
position: absolute;
font-size: 0.8em;
z-index: 5;
top: 120%;
left: 50%;
transform: translateX(-50%);
}
.tooltip-content::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
z-index: 5;
border-style: solid;
border-color: transparent transparent rgba(38, 38, 38, 0.9) transparent;
}
.btn-tag:hover .tooltip-content {
visibility: visible;
z-index: 5;
}
And here is the parent block
.btn-tag {
position: relative;
border: 1px solid #333;
border-radius: 4px 4px 4px 4px;
color: #333;
font-weight: 500;
padding: 0.7em 0.4em;
font-size: 1em;
text-align: center;
width: 100px;
z-index: 1;
cursor: pointer;
background: red;
}
The problem is when I hover over a Block A the tooltip is being hidden under a Block B even though its z-index value is higher.
DEMO
What am I doing wrong and how can I fix it?
Each z-index declaration establishes a local stacking context. So by specifying z-index: 1 on the .btn-tag, you're establishing a local context for each button for the descendant z-index (the tooltip has a higher z-index "inside" the context of the parent, the first btn-tag, but then the second btn-tag has another context with the same z-index value and since it's after on the DOM it appears on top).
If you were to remove the z-index rule on the .btn-tagclass leaving it by default, then it will behave as you require it.
Please find the demo: https://jsfiddle.net/y6udf6f8/
I have a dialogue box or a arrow box which should be set to max height of 60%, and all the content inside the box overflows via scroll, this is the markup:
<div class="cart">
hello world
</div>
and here is the css to make a arrow-head on top:
.cart {
position: fixed;
background: #ffffff;
opacity: 1;
box-shadow: 1px 1px 10px;
border-radius: 5px;
margin-left: 74.8%;
width: 300px;
top: 70px;
padding: 13px;
z-index: 20;
text-align: center;
display: none;
max-height: 60%;
overflow: auto;
}
.cart:after, .cart:before {
top: -20px;
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.cart:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.cart:before {
border-color: rgba(12, 143, 176, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
if I remove the "overflow" property the arrow head shows up, but when I use it, which I have to It disappears, I want both, an arrow head and scrollable div, but I think the arrowhead just gets inside the scroll. is there any solution for this?
Thanks for the help
We're trying to create an HTML page that consists of masonry-style floated elements that contain a picture and title. The elements have a shadow and the page has a slight gradient background. Targets that have already been visited have a folded corner.
The folded corner causes a couple of problems:
1) How can we make the element's box-shadow end before the folded corner on the right and bottom sides? Will we have to do the shadows the pre-CSS3 way with divs containing semi-transparent gradients?
2) How to do the folded corner itself? We can't just impose an image on the right bottom corner on top of the white background, because the page's background gradient must show through.
So far, I've thought of four ways of doing this:
Method 1: The idea behind this one is to use two pseudo-elements on the .box to get the corner and then two pseudo-elements on the .box-text to get the shadows in the corners right - demo. The biggest problem with this one is that it is... well, ugly.
HTML structure:
<div class="box">
<header></header>
<div class="box-text">
<p>Text</p>
</div>
</div>
Relevant CSS:
body {
background: #ccc;
}
.box {
box-shadow: 2px 2px 13px #000;
position: relative;
background: white;
}
.box:before, .box:after, .box-text:before, .box-text:after {
position: absolute;
content: '';
}
.box:before {
bottom: -25px;
right: -25px;
width: 75px;
height: 75px;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
width: 50px;
height: 50px;
box-shadow: -2px -2px 2px #777;
background: linear-gradient(-45deg, transparent 38%, #333 50%, #faf0f0 50%);
}
.box-text:before {
bottom: 32px;
right: -15px;
width: 15px;
height: 18px;
background: radial-gradient(top left, #333 0%, transparent 40%);
}
.box-text:after {
bottom: -15px;
right: 32px;
width: 18px;
height: 15px;
background: radial-gradient(top left, #333 0%, transparent 40%);
}
Method 2: combine shadows in a nicer manner using a skewed pseudo-element for that particular corner (I would have shadows on the pseudo-element) - demo
I think this one looks nicer and also has the advantage of working in IE9 as well (the previous one didn't, since it made use of CSS gradients).
The HTML would be exactly the same and the CSS would become:
.box {
box-shadow: 0 0 5px 1px #777;
position: relative;
background: white;
}
.box:before, .box:after, .box-text:before {
position: absolute;
z-index: 2;
content: '';
}
.box:before {
bottom: -38px;
right: -38px;
width: 71px;
height: 71px;
transform: rotate(45deg);
z-index: 1;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}
.box-text:before {
right: 0;
bottom: 22px;
width: 47px;
box-shadow: 2px 2px 3px 1px #777;
transform: skewY(-45deg);
}
Method 3: I got an idea from the previous method - demo. I think the previous one looks slightly nicer though...
CSS that has changed:
.box:before {
bottom: -24px;
right: -7px;
width: 35px;
height: 70px;
box-shadow: inset 2px 0 3px 1px #999;
transform: rotate(45deg);
z-index: 1;
background: #ccc;
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}
.box-text:before {
bottom: -27px;
right: -10px;
width: 35px;
height: 70px;
transform: rotate(45deg);
background: #ccc;
}
Method 4: Uses just 2 pseudo-elements, both on the box - demo
.box:before, .box:after {
position: absolute;
z-index: 2;
content: '';
}
.box:before {
right: -8px;
bottom: 22px;
width: 65px;
box-shadow: 2px 2px 5px 1px #777, 0 25px 0 25px #ccc;
transform: rotate(-45deg);
}
.box:after {
bottom: 0;
right: 0;
border: solid 23px #f9f0f0;
border-bottom-color: transparent;
border-right-color: transparent;
box-shadow: -1px -1px 2px #777;
z-index: 4;
}