Is box-shadow part of box? width of shadow will be included in total width of Block element?
According to box-shadow: shadow effect on elements in css3, no.
box-shadow applies to the outside of the box model unless you specify "inset".
No, width of shadow is not included in the total width of the element.
And even if you specify inset, then the shadow will be inside the element, and in no way can contribute to the total width.
Related
I have a view in which I am using some drop downs like
Access Link
I am unable to show border bottom, I have tried to give border-bottom or border definition manually in that elements CSS but couldn't fix. Any help
It is not that it has no bottom border, but it is just not being shown by your browser.
Your button has a height of 40px. But it is also contained in a div that has a height of 40px and a box-sizing of border-box.
Based on this, when using border-box with box-sizing, the height allocated to the content (in this case, your button) is reduced after considering the border and padding attributes of the element (in this case, your div). I just do not know why the content appears to be being rendered in a way that it overlays the bottom border of your container div.
Note that the box-sizing property in your CSS is applied to all elements, including :before and :after pseudo elements.
You can resolve your issue and show the bottom border if you do any of the following:
Reduce the height of the button element (e.g., set .ms-choice to have height of 38px).
Increase the height of the container div (e.g. set to 42px). This will just mis-align your dropdown menus with your search input.
Change the container div to have a box-sizing of content-box.
Change the background-color of your button to transparent and put the white background color on your div.ms-parent.form-control. (I added this option to show that the button' is actually being rendered such that it overlays the bottom border of the containing div.)
Is it possible to set the size of a child element such that it fills its parent and its parent's (rounded) border? Assuming I cannot simply hardcode everything.
This was my initial code: JSFiddle. The size of the <a> is 80 x 80 pixels vs. 82 x 82 pixels for <li>, because of its border. The difference is noticeable when activating the :hover.
It seems that using outline in place of border would do what I want, but there is no cross-browser outline-radius. That led me to this answer using box-shadow; this works (JSFiddle), but is there a less 'hacky' approach? Semantically, I want a border, not a shadow.
Easiest approach... box-sizing.
* {
box-sizing: border-box;
}
If you don't want to use that, then the only other logical solution is using box-shadow.
box-shadow is probably the most reliable option for cross-browser support, though it's not supported in some older browsers. Setting the shadow to inset has it behave like a border that's inside the element rather than outside, which will should resolve the somewhat 'hacky' look and keep a consistent size.
The way browsers render borders is similar to margin or padding, which can affect the amount of space an element occupies. Using something that's inset (ie, rendered inside an element) avoids this problem.
This approach can be somewhat justified semantically by considering box-shadow shorthand for a border with built in gradient functionality and some new options (like 2D inset positioning).
I want to set a transparent border inside around an image by using CSS. I can't find any way to do this.
here is the link for my image with transparent inside border effects.
That's not an easy task, since images are replaced elements and have quite some restrictions (pseudo-elements not working, inset box-shadow not working,...).
You have several options (there are probably more, I just list two):
Solution 1:
Make your image the background-image of an ordinary div and apply a border - this border will automatically overlap the image. Btw., you can use background-clip and background-origin to alter that behaviour.
Problem:
You need to know the dimensions of the image, to adjust the size of the div accordingly.
Solution 2:
Wrap your image into another element, and declare a pseudo-element to which you apply the borders.
Important are the display:block on the img and position:relative on the wrapper element.
Example fiddle
Use box-shadow
This CSS box-shadow: inset 0 0 0px 8px rgba(255, 16, 16, 0.45);
You can do the thing amazingly he he Enjoy It
http://jsfiddle.net/Q8d6V/3/
I can offer use 4 border-blocks with position:absolute. You can change style of each border. For exaple add shadow for left and top border
Example fiddle
There is what appears to be a 2px bottom padding on the image to the containing element. I am able to resolve this by removing the z-index. I need the z-index arrangement however to provide an inset box shadow on the image.
It can be seen here: http://jsfiddle.net/JkLAP/
just add .photo{display:block}
demo: http://jsfiddle.net/JkLAP/2/
I am trying to give my div and textarea some padding. When I do this, it increases the size of the element, instead of shrinking the content area inside of it. Is there any way to achieve what I am trying to do?
You could add box-sizing:border-box to the container element, to be able to specify a width and height that don't vary when you add padding and/or border to the element.
See here (MDN) for specifications.
Update (copied comment to answer)
Right now, the value border-box is supported in all major browsers, according to MDN Specs
Some browsers of course requires proper prefix i.e. -webkit and -moz as you can clearly see here
According to CSS2 specs, the rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding (left/right margin comes into play as well). If your box has a width of '100%' and also has margin, border and padding, they will affect (increase) the width occupied by the object.
So, if your textarea needs to be 100% wide, assign values to width, margin-left/right, border-left/right and padding-left/right in such a way that their sum equals 100%.
In CSS3 we have three box-sizing models. You can use border-box model:
The specified width and height (and respective min/max properties) on
this element determine the border box of the element. That is, any
padding or border specified on the element is laid out and drawn
inside this specified width and height. The content width and height
are calculated by subtracting the border and padding widths of the
respective sides from the specified ‘width’ and ‘height’ properties.
This was a mess on W3C part and various browsers only added to this complexity with their own versions of box models. Personally, instead of thinking which browser or CSS setting will do the trick I just wrap the box' content in yet another DIV statement and use margins on that DIV, instead of using padding, like this:
<div id="container" style="width: 300px; border: 10px solid red;">
<div id="content" style="width: 250px; margin: 25px;">
Some content
</div>
</div>
Although this only works for fixed size containers
It depends on the browser and it's implementation of the box model. What you are experiencing is the correct behavior.
IE traditionally got it wrong: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
For a more cross-browser solution, you can avoid this behavior, by wrapping whatever tag that needs padding into another tag with fixed width, and giving it width:auto. This way, if the parent has a width of x, and you add padding to the child, the child will inherit the full width of x, applying the padding correctly without modifying the parent width or its own.
A div by default takes the width of its parent container, so to avoid browser compatibility issues, you could add a child div in the specified div then add the required padding to the child div.
N.B - don't specify width to the child div because it would increase if you add padding