This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
drop shadow only bottom css3
With CSS3, how would one make a drop shadow only appear on the bottom edge of a DIV? I would like it to work in FF4, IE9, C10.
Setting a positive Y-offset doesn't quite look right - I can still see faint remnants of the shadow the other edges and the shadow on the bottom edge is too stiff.
You can reference the link #thirtydot posted. I would use two div. This would make it exactly like your posted image.
#container{
width: 200px;
height: 210px;
overflow: hidden;
}
#element{
width: 200px;
height: 200px;
background-color:aqua;
box-shadow: 0px 5px 5px #888;
float: left;
}
<div id="container">
<div id="element"></div>
</div>
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 6 years ago.
While following this tutorial, this piece of code is claimed to draw an arrow, but was never explained properly.
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<div class="tooltip">Sample text</div>
Can anybody please explain how's it doing that?
The trick is in the border color and width. Imagine a box with zero height and width, just the borders, those borders are meeting in the exact center. If you draw one border with a color (#333 in this case) and leave the rest as transparent, you get an arrow.
The technique is explained further on CSS Tricks: https://css-tricks.com/snippets/css/css-triangle/#article-header-id-2
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 7 years ago.
Notice that the bottom of the image does not reach the red outline below it, which is the bottom of the containing div.
What's going on here? This is counter-intuitive or not obvious to me anyway.
I'm not looking for a kludge to fix it. This is a made up example. I'm trying to master my understanding of css.
* {
margin: 0px;
padding: 0px;
}
.frame {
outline: 1px solid red;
padding: 0px;
}
.frame img {
/*border: 10px solid yellow;
outline: 10px solid blue;*/
}
<div class="frame">
<img src="http://lorempixel.com/200/300/city/200x300/" />
</div>
Images are inline elements and are, thus, treated like text. They sit on the baseline just as text does so there is a slight padding underneath them. That gap is there to allow for descenders of text.
To remove the gap, add vertical-align:bottom to the CSS for the image.
In order to get rid of this, just add this style to your <img>:
display: block
This will force the image display not to be inline and so that things like line-height won't apply to it.
This question already has answers here:
Create a slanted edge to a div [duplicate]
(5 answers)
Closed 3 years ago.
Let's say I have a container div with two divs inside. This is the effect I want to get:
<div>
<div></div>
<div></div>
</div>
In addition, I need it to be responsive, width and height in % or viewport units. And I need to fill them with various content, some content might even be partially hidden under one of these divs.
Unfortunately CSS is not THAT advanced re: skew affecting child elements... I am sure what you are looking for is that the content will wrap at the angle that you have created there... I agree that the only way is as #user5151179 pointed out, with the 2D transforms... Just check for browser compatibility with this (There's no easy solution for solving this for all and every browser as you would know).
I think the easiest way would be for you to add a background image to the outer div, and have two rectangular divs where you can add content etc. inside the outer div, thus your text not wrapping at an angle, if that makes sense.
Try the following
<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>
<style>
.container{
height:50px;
width:100px;
position:relative;
overflow: hidden;
}
.div1 {
background: none repeat scroll 0 0 #0000FF;
left: -8px;
}
.div2 {
background: none repeat scroll 0 0 #000000;
right: -7px;
}
.div{
width: 57px;
top: -10px;
transform: rotate(20deg);
position: absolute;
height: 72px;
}
There is no css method to do it. But we can do it by some css tricks like what i did above.
This question already has answers here:
Border with a transparent centred arrow
(3 answers)
Closed 7 years ago.
I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like:
I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the breakdown does not matter (45 and 90 degrees on the sample shown above). I am aware of this CSS triangle trick, but I can't think of a way to apply it to this scenario.
This nice effect can be achieved using the CSS :before and :after properties. It's best to play around with Simon Højberg's online generator at cssarrowplease.
A solution with a transparent arrow background, allowing you to use it with every background:
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
Live demo:
http://jsfiddle.net/85saaphw/
In Firefox (correctly, I believe), no red div is seen due to width: 0 but in Chrome, it is displayed as having 1px width. This seems like an issue with recent versions of Chrome. This fiddle shows the issue.
The code is:
<div id="wrapper">
<div></div>
</div>
#wrapper {
background: yellow;
height: 100px;
width: 100px;
}
#wrapper div {
display: table-cell;
height: 100px;
width: 0px;
background: red;
}
Does anyone know why this happens or a workaround?
Chrome (and other webkit-based browsers) will only allow a table cell to have zero size if it has no content, no background, and no borders. Add any one of those things, and you get the 1px minimum width and height.
In this particular case, you might be able to work around the bug by setting overflow: hidden on the container div and then shifting the table-cell div left 1px via relative positioning. Firefox ignores relative positioning on table cells, so it shouldn't be affected. Don't know about IE, etc.. The downside is that, if any content does ever get added to the table-cell div, its left edge will be cut off by 1px.