.hr-line {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid;
box-shadow: 0 20px 20px -20px;
width: 95%;
}
this is this line (highlighted in the screenshot)
you need to make the shadow up, as in the photo, just the opposite.
Please help, im newbie :DDDD
I'm sure there are other options, but makes sense to rotate it 180 degrees.
.hr-line {
margin: 30px auto -30px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid;
box-shadow: 0 20px 20px -20px;
width: 95%;
transform: rotate(180deg);
background: transparent;
}
text before
<div class="hr-line"></div>
text after, play with the margin: 30px auto -30px;
Related
I have a small "floating_Note_DIV" which I want to display on top of a textarea, as shown in the pictures. As well, I want to show a yellow_DIV below the textarea, flushed with the bottom edge of the textarea. If I do not display the floating_Note_DIV, the textarea is flushed with yellow_DIV (seen below in Image_1).
However, if I display the floating_Note_DIV, a gap appears between the textarea and the yellow_DIV ; i.e., I was thinking that if I put position: relative, and top and left/right I would get the f_N_DIV to fly over the textarea. It does seem to work however it looks like a gap is left where the "footprint" of the f_N_Div is left behind, at it's "supposed-to-be" position between tomato_DIV and yellow_DIV (see below Image_2).
If I use position "Absolute" it gets positioned w.r.t to the whole page, I am expecting the tomato_DIV to move around and so the f_N_DIV will have to be positioned w.r.t the textarea or tomato_DIV.
Any workaround? Thanks, all help appreciated ! !
the HTML is:
<div id='tomato_DIV' >
<textarea id="textarea_main" cols="40" rows="3" maxlength="300"></textarea>
<div id="floating_Note_DIV">Your Thoughts!!</div>
<div id="yellow_DIV"></div>
</div>
the relavant CSS is:
#tomato_DIV
{ background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px; }
#textarea_main
{ box-sizing: border-box;
margin: 5px 5px 0px 5px; padding: 2px; /* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none; outline: none;
border: 1px solid #737d96; border-radius: 3px; }
#floating_Note_DIV
{ margin: 0px 0px 0px 0px;
padding: 0px 2px 0px 0px;
position: relative; /* how to do this bit? */
right: -232px;
top: -14px;
width: 70px;
height: 11px;
font-size: 8px; font-style: normal; font-weight: bold; color: black;
text-align: right; border: 1px solid #737d96; }
#yellow_DIV
{ margin: 0px 5px 5px 5px; /* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
border-radius: 3px;
width: calc(100% -10px);
height: 30px; background-color: #fdffb6; }
Is this what you are trying to achieve?
HTML : Put the #floating_Note_DIV element inside #yellow_DIV. You could leave it where it is, but setting top CSS property would have been difficult.
CSS :
Change position property of #floating_Note_DIV from relative to absolute.
Set position property of #yellow_DIV to relative.
Set right to 0.
Set bottom to 100%.
I modified the margin-bottom to 5px to align it perfectly.
#tomato_DIV {
background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px;
}
#textarea_main {
box-sizing: border-box;
margin: 5px 5px 0px 5px;
padding: 2px;
/* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none;
outline: none;
border: 1px solid #737d96;
border-radius: 3px;
}
#floating_Note_DIV {
margin: 0px 0px 5px 0px;
padding: 0px 2px 0px 0px;
position: relative;
position: absolute;
right: 0;
bottom: 100%;
width: 70px;
height: 11px;
font-size: 8px;
font-style: normal;
font-weight: bold;
color: black;
text-align: right;
border: 1px solid #737d96;
}
#yellow_DIV {
margin: 0px 5px 5px 5px;
/* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
position: relative;
border-radius: 3px;
width: calc(100% -10px);
height: 30px;
background-color: #fdffb6;
}
<div id='tomato_DIV'>
<textarea id="textarea_main" cols="40" rows="3" maxlength="300">
</textarea>
<div id="yellow_DIV">
<div id="floating_Note_DIV">Your Thoughts!!</div>
</div>
</div>
Is there a way to create a trapezoid shadow effect underneath a image such as the one in the image?
I only know create trapezoid with border. What i've came up with so far is this:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
Thanks in advance.
I've created a jsFiddle that demonstrates a way to do it. In essence: give the image a shadow, overlay a transparent div on it that hides left, top and right border of the shadow. Because of these white borders this trick will not work if you use a complex background.
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
I want the double round border around my image that is actually square image.
I tried creating. here is the js fiddle . The exact that i want is this
Here is the code
CSS
.home_boxes {
background: none repeat scroll 0 0 #f1917b;
color: #ffffff;
padding: 40px 0;
text-align: center;
}
img {
border: 5px solid #ffffff;
border-radius: 50%;
margin: 20px;
outline: 2px solid #ffffff;
outline-offset: 9px;
}
img:before {
border: 5px double #ff0000;
border-radius: 50%;
bottom: 10px;
content: "";
left: 10px;
position: relative;
right: 10px;
top: 10px;
}
HTML
<div class="home_boxes">
<div class="col-md-4">
<img src="http://placehold.it/310x311">
</div>
</div>
Please any help is really appreciated.
Use box-shadow. It can have several values:
img {
/* first white ring */
border: 5px solid #ffffff;
/* background 5px ring + ring link border */
box-shadow: 0 0 0 5px #f1917b, 0 0 0 10px #fff;
border-radius: 50%;
margin: 20px;
}
Fiddle with double circle border.
if the image is not transparent PNG. you can use padding and background , just like below;
img {
border: 5px solid #ffffff;
padding:5px; background:blue;
border-radius: 50%;
margin: 20px;
}
demo here ----> FIDDLE
Does anyone know how to make edgy corners like in the following below? See how the edge wraps around the corner. I would like to know the term as well (if any). cross browser support (IE8 and up, bonus IE7) is a must. Thanks for any help.
Check out this tutorial. I don't know how crossbrowser compatible it is (as it is CSS3), but it achieves the effect you want.
HTML:
<div>
<h2></h2>
</div>
CSS:
div {
width: 200px;
padding: 50px;
margin: 0 auto;
border: 1px solid #333;
}
h2 {
position: relative;
width: 50%;
height: 50px;
margin: 30px 10px 10px -70px;
background-color: orange;
}
h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
JS Fiddle Example
.box{
background: #666;
border: 4px solid #fff;
box-shadow: 0px 0px 20px #000;
width: 200px;
height: 200px;
margin: 40px auto;
position: relative;
}
.ribbon{
background: #FFA500;
position: absolute;
width: 100%;
top: 20px;
left: -20px;
height: 20px;
padding-right: 20px;
}
.ribbon::before{
content: '';
position: absolute;
left: 0px;
top: 20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 16px 10px 0;
border-color: transparent #FFA500 transparent transparent;
z-index: -5;
}
HTML:
<div class="box">
<div class="ribbon"></div>
</div>
(DEMO)
I don't think IE 7/8 support the ::before pseudo-element, so if you want IE compatibility add another element and put ::before styles on it :)
That edgy corner is only a div with a triangle actually, you only need ONE element to do it.
<div id="myCorner"></div>
myCorner will be the div, and myCorner:after will be the triangle.
Check it out : http://jsfiddle.net/Starx/Xp6E7/2/
#myCorner
{
width:100px;
height:70px;
background-color:orange;
-webkit-box-shadow: 0 4px 5px -3px black;
-moz-box-shadow: 0 4px 5px -3px black;
box-shadow: 0 4px 5px -3px black;
position:relative;
}
#myCorner:after
{
content:"";
position:absolute;
left: 0;
top:100%;
width: 0px;
height: 0px;
border-style:solid;
border-width: 5px 10px;
border-color: orange orange transparent transparent;
z-index: -1;
}