I am trying to structure a media query and for some reason the page is creating a shadow when my mouse is hovering anywhere on the page. It is only doing it on a desktop with the window scaled down to a viewport of 640 or below.
I am referring to this shadow line under the blue container:
This can be seen live at :
http://optimumwebdesigns.com/contact
I believe the cause is a container I have, contact_arrow_box . The code for it is this:
.contact_arrow_box {
position: relative;
background: #88b7d5;
width: 50%;
height: 100%;
float: right;
}
.contact_arrow_box:after, .contact_arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.contact_arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
.contact_arrow_box:before {
border-width: 36px;
margin-top: -36px;
}
My media query alteration for this container:
.contact_arrow_box {
width: 100%;
height: auto;
}
.contact_arrow_box:after, .contact_arrow_box:before {
top: 100%;
left: 50%;
}
.contact_arrow_box:after {
border-width: 30px;
margin-left: -30px;
}
.contact_arrow_box:before {
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
Does anyone see the cause for this?
This is the culprit
.no-touch:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
Disable or overwrite it to remove the box-shadow effect
Related
I've got an issue with menu styling.
Menu looks like this:
And each element is styled as follows:
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:hover:after {
content: " ";
position: absolute;
left: 50%;
/* top: 50%; */
transform: translate(-50%,0%);
top: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
In this way i can achieve such effect:
Still i'm having serious issues making this triangle stay there after a click. Creating jQuery handlers adding classes seems not to work at all since the new class overwrites navi buttons. Have tried playing with :target but without luck. Any ideas?
EDIT:
Added a fiddle: https://jsfiddle.net/a7zs3z6o/
Add a tabindex to each gallery-navi-element element:
<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>
That will allow them to be focused when clicked.
You'll then want to remove the default outline that appears on focused elements, which you can do with:
.gallery-navi-element:focus {
outline: none;
}
Updated Fiddle
Instead of changing the navi links' class, just add a new .hover class that has the same styles as :hover. Then you won't have a problem with lots of overwriting styles.
You would probably have less trouble doing this if you simplified the CSS to only include the transitioned styles in the hover state/added-class state.
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
Note that the only reason for the border-top-width transition is so that your triangle doesn't cover up the bottom of the Y in the first couple links.
Example:
var navLinks = document.getElementsByClassName('gallery-navi-element');
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].addEventListener('click', function(){
for(var i=0,l=navLinks.length;i<l;i++) {
navLinks[i].classList.remove('hover');
}
this.classList.add('hover');
}, false);
}
.gallery-navi {
border-radius: 28px;
width: 950px;
height: 55px;
background-color: rgb(74, 125, 51);
margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
margin: 0 auto;
width: 870px;
}
.gallery-navi-separator {
width: 2px;
background-color: rgba(255, 255, 255, 0.2);
height: 36px;
float: left;
margin-top: 10px;
}
.gallery-navi-element {
position: relative;
float: left;
text-align: center;
font-size: 1.7em;
padding: 0px 60px 0px 60px;
margin-top: 10px;
transition: height .8s ease;
}
.gallery-navi-element:after {
content: " ";
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
top: 30px;
width: 0;
height: 0;
border-style: solid;
/* border-width: 0px 25px 0 25px; */
border-width: 10px 25px 0 25px;
border-color: rgb(74, 125, 51) transparent transparent transparent;
transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
top: 40px;
border-top-width: 20px;
}
<div class="gallery-navi">
<div class="gallery-navi-wrapper">
<div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
<div class="gallery-navi-separator"></div>
<div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
</div>
</div>
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)
}
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
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
I'm trying to position a span so that it will be above it's sibling and "hang over" or be positioned on top of it's parent. The parent is relatively positioned.
Please view my fiddle to get the whole picture
What it currently looks like...
This is what I want it to look like...
The span (tooltip):
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
left: 0;
position: absolute;
top: 40px;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: 20px;
left: 263px;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
top: -26px;
width: 100px;
}
The parent element:
element.style {
display: block;
height: auto;
left: 488px;
outline: 0 none;
top: 100px;
width: 400px;
z-index: 1002;
}
.ui-dialog {
overflow: visible;
padding: 0.2em;
position: absolute;
width: 300px;
}
UPDATE
As suggested by Rohrbs, if I explicitly set the width of the span (tooltip) then it will indeed hang over the form. But this isn't practical since each tooltip could potentially display a different message. So my question now becomes - How can I set the width to be dynamic and still have the span (tooltip) hang over the form?
Style your .grid-window .control-group .controls to be position: relative; then only your absolute positioned .grid-window span.validation-message will work as you want.
See This Fiddle
Update
You wanted to be your tool-tip width variable so I have replaced the position: absolute; to position: relative; in .grid-window span.validation-message and added left: 175px; top: -25px; float: left; and also min-width: 0; max-width: 500px; width: auto; also work. to make this work as you want. Note to float is a must else it won't work.
So, main changes (most important part) are float: left; position: relative; to .grid-window span.validation-message and also you need not to declare position: relative; to .grid-window .control-group .controls
See This Fiddle
If you manually set the width in the class .grid-window span.validation-message to say width: 50%; it will hang over the edge like you want. You will just have to keep the message short enough to ensure proper fitment.
On the .ui-dialog .ui-dialog-content DIV just change the overflow from auto to visible, and it will help
I managed to resolve your issue with only minor changes to your CSS and HTML(class names).
You can see the results via your updated fiddle: http://jsfiddle.net/aNkSw/16/
I added a different class for each span, and tweaked only this CSS bit to:
.grid-window span.validation-message-id:after, .grid-window span.validation-message-name:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content: "";
height: 0;
width: 0;
position: absolute;
bottom: -16px;
left: 10px;
}
.grid-window span.validation-message-id {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -81px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
.grid-window span.validation-message-name {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
line-height: 20px;
overflow: visible;
padding: 10px;
position: absolute;
margin: -41px 0 0 0;
left: 292px;
z-index: 99;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
width: 200px;
}
I can't say I agree with how you coded the whole thing though.
If you could use an extra element here's a solution I use a lot for this kind of positioning:
HTML:
<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>
CSS:
.validation-message-wrapper {
width:0;
position: absolute;
right: 70px;
top: 0;
height: 0;
}
The clue is to create a zero size reference point ( the .validation-message-wrapper ) position it where you want and then position your element in relation to it.
Here's a working demo: DEMO
I also did some other minor CSS changes just to tune it a bit:
.ui-dialog .ui-dialog-titlebar {
padding: 0.4em 1em;
position: relative;
}
.grid-window span.validation-message:after {
border-color: #F2DEDE transparent transparent;
border-style: solid;
border-width: 8px;
content:"";
height: 0;
left: 0;
bottom: -16px;
position: absolute;
width: 0;
}
.grid-window span.validation-message {
background: none repeat scroll 0 0 #F2DEDE;
border: 1px solid #EED3D7;
border-radius: 3px 3px 3px 3px;
box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
color: #B94A48;
font-size: 14px;
height: auto;
left: 0px;
bottom: 0;
line-height: 20px;
padding: 10px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
margin-top: -40px;
width: 200px;
}
I hope that helps.
If you'd like something more generic I've made a jQuery tooltip plugin (tipy) which is pretty easy to use and implement.