I'm trying to display an inset shadow on two elements and overlay them so they look like well with tab. Everything looks great except for one corner where I cannot figure out how to make it look smooth. (highlighted with yellow).
JsFiddle for test
this is my html:
<div class="container">
<div class="outerWell">
<div class="well" style="padding-top:15px">
text
</div>
</div>
<div class="well" style="margin-top:40px">
test
</div>
</div>
and then I have css that creates shadow and hides one side of shadow with overflow:hidden
(.well class is taken from bootstrap)
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
overflow:hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 0 5px 1px #888;
-webkit-box-shadow: inset 0 0 5px 1px #888;
box-shadow: inset 0 0 5px 1px #888;
}
.outerWell {
width: 200px;
overflow: hidden;
padding-bottom: 10px;
height: 35px;
margin-top: -40px;
position:absolute;
}
Is there an easy way to fix my issue, or maybe a better way to do what I'm trying to achieve?
You could probably pull this off with some creative use of pseudo elements. Have a look at this post on CSS-Tricks.
Related
im trying to add a image that acts as a button and the image is a rounded square where the 4 corners are transparent. I add it to my webpage like this :
<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >
and style it like this:
#LeftButton{
background-color: Transparent;
position:relative;
left:0px;
top:32.5px;
width: 45px;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
height: 45px;
}
I have coloured the background of the div its in red so you can see better in the image
thanks
the box shadow uses information from the box shape to generate the shadow in order to display as intended you will need to add a border-radius to your input
#LeftButton{
background-color: Transparent;
position:relative;
left:0px;
top:32.5px;
width: 45px;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 0px solid #000000;
height: 45px;
}
<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >
and style it like this:
I created a round-image using following HTML
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
and CSS
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
}
I tried adding a new circle around the rounded image, failed eventually. How am I supposed to do this? Should I create a new div and add this rounded image inside it and style that div to make it round? I tried to achieve circled image in this google link https://www.gmail.com/intl/en/mail/help/about.html which is placed right below the slider.
Here is my fiddle of what I've gotten so far http://jsfiddle.net/adityasingh773/rzsmpmc9/
This is not so elegant solution, because it requires extra-html, but looks pretty fine, imho: (didn't experiment with pseudo-elements, maybe similar result can be achieved).
<div class="thumb-wrapper">
<div class="thumb">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
</div>
CSS:
.thumb-wrapper {
width: 170px;
height: 170px;
overflow: hidden;
border-radius: 50%;
background-color:#fefefe;
position:relative;
box-sizing:border-box;
border:1px solid #dedede;
-webkit-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
-moz-box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
box-shadow: -5px 4px 19px 0px rgba(143,143,143,1);
}
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
position:absolute;
left:8px;
top:9px;
box-sizing:border-box;
}
DEMO: http://jsfiddle.net/rzsmpmc9/5/
Tried adding an border?
<div>
<img class="thumb" src="http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="img">
</div>
.thumb{
width: 150px;
height: 150px;
overflow: hidden;
border-radius: 50%;
border:2px solid white;
box-shadow:0 0 0.5em white;
}
Optionally you may use an box shadow to produce a solid shadow, since the shadow doesn't compute within the element positioning and size, avoiding interference in your current layout.
you can simply add a border to your existing css
border: 3px blue solid;
http://jsfiddle.net/rzsmpmc9/2/
You can achieve same style as the link you have provided if u'll use an image, which is the most plausible way, but if you play with box-shadow u will most likely get the same thing.
box-shadow:2px 2px 4px green, -2px -2px 4px red;
check this.
Okay so i have a div with a container and 3 equal columns inside.Every column has a card with fixed height and width inside. However, below 1200px my design for a reason is breaking. What i mean is that when i resize to 1200px columns start to merge together and eventually in smaller sizes they tend to overlap the div and my footer. I know its complicated so here's some code.
----------HTML----------
<!-- 2nd card -->
<div class="col-md-4">
<div class="card">
<div class="cardoverlay">
</div>
</div>
</div>
<!-- 3rd card -->
<div class="col-md-4">
<div class="card">
<div class="cardoverlay">
</div>
</div>
</div>
</div>
</div>
</div>
-----------CSS-----------
.categories {
background-color: #e1e1e1;
height: 800px;
}
.card {
width: 353px;
height: 662px;
-webkit-border-radius: 5px/7px;
-moz-border-radius: 5px/7px;
border-radius: 8px/10px;
background-color: #fff;
-webkit-box-shadow: 0 2px #b8b3b3;
-moz-box-shadow: 0 2px #b8b3b3;
box-shadow: 3px #b8b3b3;
margin-top: 50px;
}
.cardoverlay {
width: 353px;
height: 202px;
-webkit-border-radius: 5px 5px 0 0/10px 10px 0 0;
-moz-border-radius: 5px 5px 0 0/10px 10px 0 0;
border-radius: 5px 5px 0 0/10px 10px 0 0 #f1f1f1;
background-color: #f9f9f9;
-webkit-box-shadow: 0 3px #f1f1f1;
-moz-box-shadow: 0 3px #f1f1f1;
box-shadow: 0 3px #f1f1f1;
The columns at this point are getting merged.
http://imgur.com/dEQzLjb
P.S i am using container instead of container-fluid so i can get the columns the one next to each other.
You are using a specific width rule, meaning the divs will always stay at those sizes. When the browser is re-sized smaller they will run over each other.
If you use a percentage based layout % this will not happen as they will scale relative to the container size.
.card, .cardoverlay {
width: 33%;
}
I would like to create a well area on my page that makes the area look like it is a little bit below the page by a few pixels. My page currently has a white background and a #F5F5F5 well area.
I looked at the well for twitter bootstrap:
http://getbootstrap.com/components/#wells
For me at least this does not look like well at all. Maybe it is because I know the focus of the later version is to create a flat effect.
Does anyone have any examples of how I could add a working well effect?
You can simply inspect bootstrap well example and copy ".well" rule set
Demo:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
<div class="well">
Some Text
</div>
Using a combination of box shadows, and a sensible colour choice, you can make things look like wells quite easily:
Demo:
div {
height: 100px;
width: 200px;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: inset 0 0 10px black, 0 0 10px black;
padding: 10px;
display: inline-block;
margin: 15px;
vertical-align: top;
text-align: center;
}
html,
body {
background: gray;
}
.second {
box-shadow: inset 1px 1px 10px black, 0 0 30px black;
}
.third {
box-shadow: inset 0px 0px 10px black, 0 0 20px black;
}
.forth {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px black;
}
<div>this is deep</div>
<div class="second">I'm slightly different. But still look deep</div>
<div class="third">Don't fall down me!</div>
<div class="forth">Do you, like, wells?</div>
change the boxshadow of the bootstrap well to:
box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
see example here: http://jsfiddle.net/swm53ran/199/
the first two inset parameters are the shadow on the sides and then top and bottom
Well I want to place a caption on the border of my images for a image gallery I am developing.
Basically my images use borders and margins to create a effect around them to make them look like Polaroid photos. I would like to place a caption on top of the border. here is my css.
.column img {
position:relative;
display:inline-block;
width:130px;
height:100px;
margin: auto;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
-moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
box-shadow: 1px 3px 3px rgba(0,0,0,.8);
border: 1px solid #fff;
padding: 5px 5px 35px 5px;
}
.column div {
max-width: 100%;
max-height: 100%;
float: left;
margin: 0 15px 5px 0;
margin-left: 5px;
border-radius: 2px;
overflow:hidden;
}
The border works fine and looks fine but the caption does not display on top of the border any help would greatly be appreciated.
Try using the <fieldset> and <legend> tags to draw a captioned box around the images.
<fieldset>
<legend>Caption Here</legend>
<!-- Image here -->
</fieldset>