I am trying to create this style directly through CSS. I have the whole button figured out except the tail on the top left corner. How do I add that through CSS? Here is what I want it to look like;
You can use pseudo css/html elements for this
:before and :after
See this hyperlink for a fuller understanding https://css-tricks.com/almanac/selectors/a/after-and-before/
Basically the opening paragrap states
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
div::before {
content: "before";
}
div::after {
content: "after";
}
this makes your HTML have fake elements that can be styled in the HTML
<div>
before
<!-- Rest of stuff inside the div -->
after
</div>
You can use the border css attribute on the :before pseudo element
HTML example
** DISCLAIMER ** the following CSS was borrowed from Code Pen https://codepen.io/RajRajeshDn/pen/QpYqMW and this user rajeshdn deserves the credit
<div class="speechBubble">
Will do!
</div>
.speechBubble {
padding: 20px;
background-color: #888;}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 0px;}
.speechBubble {
padding: 20px;
background-color: #888;
width: 25%}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 8px;}
<div class="speechBubble">
Will do!
</div>
How does it work
By using the border and position property and clever use of color (or colour if your British but that doesn't work in HTML/Web design - have to use the American spelling)
every (most) HTML elements can have a border - even pseudo (fake) elements
the position attribute is set to 'absolute' see css positioning
it is postioned or steered into position using the top and left attributes (I use trial and error to get the right location though smarter people probably calculate the positioning)
as each element has 4 borders: top, right, left, bottom you have to manipulate them so the result ends up looking like a triangle using color and transparency (set the color to the same background coolor as your main speech bubble)
It takes (me anyway) a bit of time to get these things looking perfect and sometimes there are cross browser or device issues (PCs, phones, tablets etc) so sometimes a small effect can require heaps of work
Related
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
I have a very simple JavaScript and CSS hover menu setup apart of the menu on my website. It works great almost everywhere, EXCEPT - there is an issue with the z-index on IE8.
.rolloverMenu {
background-color: #4A5508;
border-bottom: 1px solid #AC4718;
border-left: 1px solid #AC4718;
border-right: 1px solid #AC4718;
box-shadow: 2px 2px 2px #AC4718;
float: left;
margin-left: -15px;
margin-top: -12px;
padding: 10px 10px 6px;
position: absolute;
width: 200px;
z-index: 1000;
}
It goes behind my content and doesn't stay on top of, as supposed to. I know theres different stacking rules in IE, so any suggestions??
(Also have tried setting to z-index:9999;)
Set the z-index to the div that your menu is hiding behind to a lower z-index than your menu.
The solution for this is:
Add z-index to parent container (div, table, ul... etc).
Example:
<div class="menu_container">
menu here..
</div>
<div class="other_content">
other data here
</div>
The div.menu_container should have a z-index value to make its content goes over the other divs.
I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).
I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.
CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.
Is there a way to do this?
Thanks
I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.
Look at the simple example below in your browser:
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.
You can read more about it here:
Border
Outline
Try the outline property CSS Outline
Outline will not interfere with widths and lenghts of the elements/divs!
Please click the link I provided at the bottom to see working demos of the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!
You can also combine borders with outlines, and if you like, box-shadows (also shown via link)
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:
div {border: inset solid 1px black};
But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.
Hope this helps
PS: I also was inspired to make this for you : Using borders, outlines, and box-shadows
IsisCode gives you a good solution. Another one is to position border div inside parent div. Check this example http://jsfiddle.net/A2tu9/
UPD: You can also use pseudo element :after (:before), in this case HTML will not be polluted with extra markup:
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
Demo: http://jsfiddle.net/A2tu9/191/
Why not simply using background-clip?
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
See:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
I shared two solutions depending on your needs:
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
example: https://codepen.io/danieldd/pen/gObEYKj
Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.
See below, JSFiddle here.
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
Put your div inside another div, apply the border to the outer div with n amount of padding/margin where n is the space you want between them.
How to give border to any element using css without adding border-width to the whole width of element?
Like in Photoshop we can give stroke- Inside , center and outside
I think default css border properties is center like center in photoshop, am i right?
I want to give border inside the box not outside. and don't want to include border width in box width.
outline:1px solid white;
This won't add the extra width and height.
Check out CSS box-sizing...
The box-sizing CSS3 property can do this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box. You can now safely declare your element to be of 100% width, including pixel-based padding and border, and accomplish your goal perfectly.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
I'd suggest creating a mixin to handle this for you. You can find more information on box-sizing at W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Depending on your intended browser support you can use the box-shadow property.
You can set the blur value to 0 and the spread to what ever thickness you're after. The great thing about box shadow is that you can control whether it is drawn outside (by default) or inside (using the inset property).
Example:
box-shadow: 0 0 0 1px black; // Outside black border 1px
or
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
One great advantage of using box shadow is you can get creative by using multiple box shadows:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
The only thing I can't say is what difference this will make rendering performance wise. I would assume it might become an issue if you had hundreds of elements using this technique on the screen at once.
I ran into the same issue.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
This answer allows you to specify one single side. And would work in IE8+ - unlike using box-shadow.
Of course change your pseudo elements properties as you need to single out a specific side.
* New and Improved *
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
This allows ability to use border and hit multiple sides of a box.
Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.
Use outline to create a border OUTSIDE a div without modifying div width.
Here an example:
https://jsfiddle.net/4000cae9/1/
Notes:
border-box currently it is not supported by IE
Support:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
As abenson said, you can use an outline but one gotcha is that Opera might draw a "non-rectangular shape". Another option that seems to work is to use negative margins, such as this css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
With this html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
One other less clean option is to add extra markup to the html. For example, you set the width of an outer element and add the border to the inner one. The CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
And the html:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
Use padding when there is no border. Remove padding when there is a border.
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
Essentially, just replace the 2px padding with 2px borders. Div size remains the same.
Usually, layout shifting is the problem.
If you don't need border-radius then outline: 1px solid black; works.
If you do, make the border transparent and change its color when it's supposedto show:
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}
<button class="pretty my-div">
Button
</button>
In your case can you fudge it by subtracting half the border from the padding? (-2.5 from the padding if your border is 5px wide, you can't have negative padding so to go smaller reduce the overall width of the box). You can add an extra 2.5px to the margin to keep the overall box the same size.
I really don't like this suggestion, but I don't think there is a way do handle this cleanly.
Thus, you're trying to achieve the same as the well known IE box model bug? That's not possible. Or you want to support clients with IE on Windows only and choose a doctype which forces IE into quirksmode.
Another option, if your background color is solid:
body { background-color: #FFF; }
.myDiv {
width: 100px;
height: 100px;
border: 3px solid #FFF; // Border is essentially invisible since background is also #FFF;
}
.myDiv:hover {
border-color: blue; // Just change the border color
}
outline:3px solid black || border:3px solid black
div{
height:50px;
width:150px;
text-align:center;
}
div{ /*this is what you need ! */
outline:1px solid black
}
<div>
hello world
</div>