Please see here, at the end of the post, the 70px author image from gravatar.com is having a mysterious bottom padding, making the bottom padding a lot more wider than the top, left and right ones.
I looked all 3 browsers, FF11, Chrome and IE9 and all are presenting the same problem. I couldn't find the culprit with Firebug. The extra padding is no padding nor margin of anything!
Any idea?
Try to set a height to the Gravatar wrapper div - http://jsfiddle.net/AMf5N/1/
#post-author .profile-image {
background: none repeat scroll 0 0 #F6F6F6;
border: 2px solid #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
float: left;
height: 70px; /* add this */
margin: 0 15px 5px 0;
padding: 5px;
}
or float the image - http://jsfiddle.net/AMf5N/
Related
Please consider the following CSS:
div {
background: rgba(0,0,0,.05);
width: 200px;
height: 200px;
padding: 50px;
}
div > div {
background: rgba(0,0,0,.2);
width: 200px;
height: 200px;
border-radius: 5px;
padding: 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12);
}
div > div:hover {
border-radius: 5px 5px 0 0;
background: rgba(0,0,255,.2)
}
with the following HAML:
%div
%div
Hovering on the inner element causes the border radius to change, as well as the background color. However, it also affects the box shadow. This should not happen. Please see snippet below:
https://codepen.io/anon/pen/yGvydK?editors=1100
How can this be explained? Is this a bug in Google Chrome? It doesn't appear to be happening in Firefox, IE or Edge. I run Chrome version 71.0.3578.98 on a 64 bit Windows 10 laptop.
EDIT
Behavior in Chrome (incorrect):
Note how the shadow suddenly looks different on the left, top, and right when hovering.
EDIT 2
Behavior in Firefox 64.0 (correct):
It appears that this was a bug in Chrome 71. Updating to Chrome 72 resolved the issue.
How can I make a shadow effect like the one below with pure CSS?
I am new to CSS.
The following is what I have tried so far, but I am unable to come close to what I want. Please advise how I can make it look like the shadow in the image? Thanks!
box-shadow: 1px 1px 5px #999999 inset
This is the closest I could get : Demo. I think it's actually not bad.
It combines a black shadow and a white one on top of it.
.yourclass{
background-color: #fff;
box-shadow: -15px 0px 60px 25px #ffffff inset,
5px 0px 10px -5px #000000 inset;
}
Browsers' shadows smoothing might differ. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
Read the CSS Tricks article about box-shadows to get how they're used.
For two shadows (both sides) you need 4 shadows (demo) :
Result:
.yourclass{
background-color: #fff;
box-shadow: 0px 100px 50px -40px #ffffff inset,
0px -100px 50px -40px #ffffff inset,
-5px 0px 10px -5px rgba(0,0,0,0.5) inset,
5px 0px 10px -5px rgba(0,0,0,0.5) inset;
}
Beware, browsers' shadows rendering/smoothing can differ a lot. I'm using chrome so you might want to tweek the values to get a cross-browser visual effect...
For more info on css shadows, read this article from CSS Tricks
What you want is basically the opposite of a page curl shadow. Take a look at this tutorial - you should be able to easily adapt it.
Here is an example: jsFiddle
div {
position: relative;
width: 250px;
height: 150px;
margin: 100px auto;
border: 1px solid black;
background-color: white;
}
div:after {
position: absolute;
height: 80%;
width: 10px;
content: " ";
right: 0px;
top: 10%;
background: transparent;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
z-index: -1;
}
We insert a pseudo-element, position it below our div and have it cast a shadow. This way, you have control over the shadows height and position.
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
Is it possible to achieve a Fadeout effect with CSS3 Box Shadow?
Here's what I have so far
This only adds inset/inner shadow to the vertical sides but I need to achieve a fade out effect at the top.
-moz-box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
-webkit-box-shadow: inset 5px 0 5px -5px #a4a4a4, inset -5px 0 5px -5px #a4a4a4;
box-shadow: inset 5px 0 7px -5px #a4a4a4, inset -5px 0 7px -5px #a4a4a4;
See the image below to see the Expected Results and what I currently have.
I also needed something like that:
Basically it is about giving the outer div a drop-shadow and placing the inner div with position:relativ to the outer div with a gradient from transparent to the needed background color:
http://jsfiddle.net/vBuxt/1/
Here is a codepen example of how I tackled this for a project I worked on recently:
http://codepen.io/byronj/pen/waOxqM
I added a box-shadow to my main content section. I then added a absolute positioned div at the bottom of my content section that contains a CSS gradient with the content background color on one end and a transparent background on the other end as seen below:
.container {
width: 1024px;
margin: 0 auto;
}
.container article {
background-color: #fff;
margin: -6em auto 10em auto;
padding-top: 2em;
width: 100%;
box-shadow: 0px -2px 20px 2px rgba(0, 0, 0, 0.4);
}
/** GRADIENT **/
.bottom-gradient {
position: absolute;
width: 115%;
height: 60%;
z-index: 1;
bottom: -20px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.59) 10%, white 50%, white 100%);
}
To ensure the content is not covered up by the gradient, I set my "p" elements to position:relative with a z-index of 2, as seen below:
p {
padding: 1em 3em;
position: relative;
z-index: 2;
margin: 1em auto;
font-size: 1.3em;
line-height: 1.5em;
}
For Eric's situation, you would inverse this effect by placing the gradient at the top of the element containing the box-shadow.
Hope this helps.
You can not transition CSS3 styles that contain multiple values -:
You CAN transition from say one color to another in CSS3 but you can NOT transition between gradiens in CSS3 as it gets confused with the multiple values, it will be the same with your multiple shadow values also.
Ah, I think I see what you are trying to achieve. A solution maybe would be to try and reproduce the look you are after without using Shadows - A link below shows a possible solution using borders instead of shadows, see what you think. http://css-tricks.com/examples/GradientBorder/
I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!