I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
Related
I am currently updating/working on this web page "https://www.emergencydentalservice.com/emergency-dentist-by-city" and their is an unwanted box shadow appearing in the body that I can not determine from where or why. On top of the unwanted shadow the site also seems to break after 768px and I can't figure out why. Any help would be greatly appreciated, thank you all. Image of the site breaking after 768px
You have a box shadow set to #inside-main on eds_main.css.
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
box-shadow: 1px -2px 4px #666;
-webkit-box-shadow: 1px -2px 4px #666;
-moz-box-shadow: 1px -2px 4px #666;
-o-box-shadow: 1px -2px 4px #666;
}
becomes
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
}
As for the layout breaking, you have #foot-de-eds, #foot-top-cites on eds_main.css set to:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
max-width: 1028px;
padding-left: 2em;
}
Try removing the max-width: 1028px; - so:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
padding-left: 2em;
}
For the shadow issue:
#inside-main still has a box-shadow property on it from eds_main.css.
Though you didn't really specify which shadows you do and don't want... as there are multiple on the page.
Inspect Element / Dev Tools is your friend. Makes it easy to hunt down properties you may be overlooking.
on <div class="phone-wrap">
remove
background: url(/eds_siteIMGS/phoneBG_seperated.png) repeat-x;
The image have shadow
How can I add a blur effect to my menu bar?
Is it even possible using css?
Its transparent right now but I want to add a blur to it.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
opacity: 0.85;
position: fixed;
top: 0;
left: 0px;
width: 100%;
border-bottom: 100%px solid #737373;
box-shadow: 0 3px 5px rgba(0, 0, 0, 10);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I believe you can use the CSS:
-webkit-filter: blur(5px);
filter: blur(5px);
to add a blur to your menu bar. This is just off the top of my head though
A lot of cool filters (including blur) are used on http://www.cssfilters.co/ so i assume this will work for menu bars as well as images demonstrated.
You can achieve this by using text-shadow in CSS3
li {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
See Pen HERE
You would use the filer: CSS property with the blur(px) attribute. Find more HERE.
You would apply this to your Navigation <div>, whatever container that may be.
Note: You will have to have an opacity above 0 for the effect to work, However setting it to a desirable blurred color wouldn't be hard i.e. White, Black or Grey. You WILL also have create your navigation content OUTSIDE of that div and position it absolute over the blurred div. If not your content will also inherit the blur filter.
The quickest way to demonstrate this is https://jsfiddle.net/9jL30wjh/1/
I have a responsive table that stacks on a mobile device. Pretty simple but I want the white borders on the table to be transparent through to the body background. If I set the borders to transparent then the background of the actual cell is shown so the whole table looks like a block colour (actually an opacity but I don't think this matters). That makes sense I guess but since I cant have a margin on the table cells, I can't decide how to work around this or even if I can in this setup. Can anyone shed any light?
I am using the following CSS for a display: table layout.
body {
background-color: #3498db;
color: #fff;
}
.pcp-table {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
padding: 10px 0 3px 0;
}
.pcp-table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid;
background: transparent;
}
.pcp-table__cell {
display: table-cell;
background: rgba(255, 255, 255, 0.4);
height: 30px;
line-height: 30px;
padding: 0 10px;
border-right: 7px solid;
border-bottom: 1px solid;
}
I belive I achieved your desired effect. See this fiddle.
All that I do was add the following lines of code
.pcp-table {
border-spacing: 1px;
}
.pcp-table__cell {
border: 0;
}
#media screen and (max-width: 768px) {
.pcp-table {
border-spacing: 0;
}
.pcp-table__cell {
margin-bottom: 1px;
}
}
The trick was not to use an actual border but to simulate it using either border-spacing or margins.
Later edit: Another cool way to achieve this effect is by using background-clip: padding-box; combined with border-color: transparent;. You can see this example in this fiddle.
From background-clip docs:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
I have a problem positioning an inputfield with variable size and a post button with fixed size inside of a div with fixed "outer-margin".
I've provided a jfiddle example where you can see the wrong version.
Here you can see my problem:
Wrong version: Actual website
"Should-be" version: This is what it should look like
Textual description:
As you can see in the 2nd picture, it's important for me that the bottom-part always sits on the bottom...
.submitform {
display: block;
position: fixed;
bottom: 0;
...more on jfiddle...
}
... and the post-button always on the right. The bottom-part should have the same gap on the left and right as the upper-part. The difficult thing is, that the inputfield should have flexible size but should take all the space between left gap and post-button.
I hope you can help me because hours of trying and searching on the web didn't brought me the right solution.
Try this: http://jsfiddle.net/jgHAA/1/
.submitform {
background: white;
display: block;
position: fixed;
/* Instead of applying margin and width, simply set the bottom, left,
and right properties to 13px */
bottom: 13px;
left: 13px;
right: 13px;
/*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
padding: 7px;
overflow:hidden;
box-sizing:border-box;
}
to have the textbox fill the width, you can use the same technique: http://jsfiddle.net/jgHAA/2/
.submitform #post_input {
display: block;
font-size: 18px;
border: none;
outline: none;
padding: 3px;
/* set left and right, and z-index to make it appear behind the button.*/
left:7px;
right:7px;
position:absolute;
z-index:-1;
}