this is my CSS of a DIV Tag for a Marker /ToolTip .
<div class="flotr-mouse-value">
position:absolute;
z-index:1;
background: #FFD772;
height: 75px;
-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
position: absolute;
box-shadow: 3px 3px 3px #666;
left: 50px;top: 50px;
width: 150px;
height: 80px;
</div>
Waht i want is that , to have a down arrow at the bottom of the border similar to as shown here
http://www.tiikoni.com/tis/view/?id=fa381ec
I have tried modifying the below attribute , but of no use
border-bottom:
You can make a triangle by using code like:
border-color: #ff0 transparent transparent transparent;
It looks like this:
Here's the code for that example http://jsfiddle.net/hyH48/
There are a lot of limitations (for isntance the box shadow won't work for the triangle), but it doesn't use any images, and is pure CSS.
I used #RichBradshaw's answer but elaborated on it. While he's correct in that it's not possible (or at least very difficult) to add a shadow to the arrow, I achieved the effect by utilizing the :before and :after pseudo elements. Use Rich's code within a :after selector, and then in the :before selector, create the same arrow, offset in the direction you want your shadow, with a transparent color.
Here is an example! jsfiddle
yes, you can do it from css check this
arrow with border on it:
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
}
Related
I have a block of text that is outlined the way I want. Now I want a shadow effect around that outline. When I apply a box-shadow, it affects the lines, which I don't want. Is there any way to apply to the outer rim only?
https://jsfiddle.net/6nrzkodu/
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
}
Here is a snippet of the shadowing outside the text I'm looking for:
So you want one outline around the block?
Try displaying it as an inline-block:
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display: inline-block;
}
Just add display:block to your element, so it will still be inline, but now it is a block of element.
You probably want to use <mark> instead of <span> for that. For HTML semantics and so...
cheers ;)
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display:inline-block;
}
I have a table with rounded corners on the bottom, created with:
border-bottom-left-radius:pixel;
and same for the right bottom.
When I add:
bottom-border-dotted;
border-bottom-color:white;
the dotted white border appears correctly (rounded), but the table bottom reverts back to a rectangle. I have a solid background color in this table. When I replace" bottom-border-dotted, with border-bottom-solid, with the same white color everything is fine.
I just love the dotted border, especially at Christmas.
I think you have some errors in the CSS. F.e.: bottom-border-dotted; is not valid CSS. You should use border-bottom: 3px dotted black; or border-bottom-style: dotted;.
Try this example (see JSFiddle)
HTML
<div></div>
CSS
div {
display: inline-block;
width: 300px;
height: 300px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 3px black;
background-color: #cccccc;
border-bottom: 3px dotted black;
}
Result
Above code will create something like this:
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
My border is not showing up around my image, I'm not quite sure what the issue could be. I just need a small black border around the photo. My website is http://www.welovetile.com. I can't figure out what the problem could be. Thanks.
CSS:
#kitchen {
height:250px;
width:346px;
background-image:url(images/kitchenbg.jpg);
}
#kitchen img
{
top: 50%;
left: 50%;
width: 316px;
height: 228px;
margin-top:11px;
margin-left:15px;
border-color:#000000;
border-width:thin;
}
HTML:
<div id="kitchen">
<img src="images/kitchen.jpg" alt="Kitchen Tile Job"/>
</div>
Borders have three main pieces: a width, a style, and a color; the style is required for any of the others to work.
Try adding the style:
border-style: solid;
Also, you can specify all these in the same line of css:
border: thin solid black;
Updated
As pointed out by Wesley, border-style is the only required one.
From http://www.w3schools.com/css/css_border.asp :
None of the border properties will have ANY effect unless the border-style property is set!
You're missing:
border-style: solid;
You can put border width/style/color in one row like this:
Border: 1px solid black;
try this:
border: 1px solid #F4F1E8;
box-shadow: 1px 1px 3px #4C4843;
Add a border style property as well, for example border-style: solid;.
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)