I tried to get a background blur effect to a text using:
backdrop-filter: blur;
It works, but I want the padding to be smaller. How can I do that?
P.S: I'm new to all that things
Use the CSS padding property on the same element that you've applied backdrop-filter to. You can set the amount of padding in pixels. The following will apply 20 pixels of padding to each side of your element:
padding: 20px;
When you style the background of the body element, why does the styling affect the entire screen and not just the body element itself? Let's say I create the following rule:
body {
width: 700px;
height:200px;
border: 5px dotted red;
background-color: blue;
}
I find that the border shows up as 700px wide as I would expect, but the background color occupies the entire browser viewport. Why?
Quote from http://www.w3.org/TR/CSS21/colors.html
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border).
From CSS: The Definitive Guide by Eric Meyer
In CSS values are never propagated
upward; that is, an element never
passes values up to its ancestors.
There is an exception to the upward
propagation rule in HTML: background
styles applied to the body element
can be passed to the html element,
which is the document's root element
and therefore defines its canvas.
So when you add the background-color: blue; declaration to the body element, this value is propagated to the html element (which is also the root element). Add this declartion to see it for yourself.
html {
background-color: grey;
}
When you set the background color of <body>, the browser interprets this as the background color for the entire window, even if you've forced the <body> to be smaller with CSS. Otherwise, what color would the outside of the <body> tag be?
This is why it's a good idea to use containers. Such as:
<body>
<div id="container">
</div>
</body>
Example here: http://jsfiddle.net/Shaz/2FqqV/
You cannot set a width on the <body> element itself, that's why the entire screen appears to be blue versus just a 700px area.
It must set the entire background, because you cannot define parts of the page that are "not" the body.
One of those mysteries of CSS, I guess.
A better idea is to place your content inside of a <div> element and style that instead of trying to style the whole <body> tag.
A div which contains an image has rounded corners using border-radius and overflow:hidden.
The div also contains another div with an orange background and some white text.
When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?
Fiddle: http://jsfiddle.net/nq9Jv/
Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.
I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.
I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.
http://jsfiddle.net/nq9Jv/4/
Is that what you want?
Is it possible to have a continuous border around adjacent html elements that have different heights?
I have tried overlapping the elements by the border width and setting the left border of the second element to white, but this creates a black/white bevel on the corner (http://jsfiddle.net/h4FwJ/). I would like to achieve the same look as in that fiddle, but without the bevelling.
Change the div1 style to this
border-left-width:0px;
margin-left: -10px;
background-color:White;
The background color of list is not displayed properly. This problem started after I floated left and right. How to fix this.
Here is the fiddle
Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath . here is fiddle
Add to the CSS:
ol {overflow:hidden;}
and (2nd question):
.wrapper {overflow:hidden;}