So earlier, I was trying to figure out how to darken an image with transparency using CSS but when I figured that out, the new question came was how would I place text over that? This is what i have so far... http://jsfiddle.net/PXU6j/3/
<h1> Any Help Will Be appreciated </h1>
Use CSS positioning to draw content (such as text) over other content.
http://jsfiddle.net/j8592/27/
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
position: relative;
display: inline-block;
}
.container img {float: left;}
.foo-background {
background: rgba(0,0,0,0.5);
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.foo-text {
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
color: #f2f2f2;
padding: 20px;
}
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
I have set the background colour to a linear gradient and I want the background colour to be a blur. I have tried a few codes but couldn't make it work.
Here is my code:
body{
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
box-sizing: border-box;
margin: 0;
padding: 0;
height: 200px; /* Make sure the body is visible */
width: 200px;
}
<body>
</body>
I am learning CSS, please help me! Thank you in advance!
Just set background separately from the body, i.e. you can use pseudoelement and filter just this pseudo
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
filter: blur(10px);
}
Just try adding filter: blur(8px);, -webkit-filter: blur(8px);.
Code:
body {
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
box-sizing: border-box;
margin: 0;
padding: 0;
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
}
You may increase the blur by changing 8px into any number you want.
For example, 10px:
filter: blur(10px);, -webkit-filter: blur(10px);.
Learn more in MDN.
You can make the gradient a pseudo element on the body and blur that:
body {
padding: 0;
margin: 0;
position: relative;
box-sizing: border-box;
min-height: 100vh;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(100deg, #3B53D6, #4AFAFA);
filter: blur(5px);
z-index: -1;
}
<body>
<div>
content content content
</div>
</body>
If you add filter: blur() to the body, that will blur all of the children as well.
I'm trying to build a component with sticky header and footer, while the content height is dynamic. I tried to use the FIDDLE example (at the bottom of this post), but the behavior is not the same. When I resize the screen, the window just run over the footer/header.
This is what I'm trying to achieve:
The FIDDLE code example:
http://jsfiddle.net/PGC7D/18/
html,body
{
height: 100%;
}
header,footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}
The grey element, a div with id of #banner is not meant to be sticking out, I gave all the elements inside the div containing the welcome to fusion box, red element, and banner a min-height which adds up to all the min-heights of the elements inside it (welcome to fusion cube, red element, banner).
Basically it's not meant to stick out and I just can't figure out why it is sticking out.
JsFiddle
Not really something productive to ask but I can't figure it out and it's stressful
#main-wrapper{
width: 80%;
height: calc(75.5% - 10px);
margin: 10px auto 0;
min-height: 250px;
}
#page-title {
height: 7%;
font-size: 1.8em;
text-align: center;
padding: 1px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 35px;
}
#content-wrapper {
background: red;
height: 83%;
min-height: 160px;
}
#page-messages {
width: 100%;
height: 20%;
overflow: auto;
}
#banner {
height: 10%;
display: inline-block;
background: grey;
min-height: 55px;
}
footer {
height: 8%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5%;
margin: 20px 0 0;
width: 100%;
display: block;
}
you defined #banner as an inline-block - is that intention? (= not spanning the whole width?). Your fiddle looks quite different from the screenshot you posted...
try making its position: absolute and bottom: 0px;, and give the parent element (#main-wrapper) position: relative, and also a margin-bottom as high as #banner, which prevents content to be hidden by #banner.
(edited, wrong name for parent element)
This question already has answers here:
display: inline-block extra margin [duplicate]
(12 answers)
Closed 8 years ago.
I am trying to achieve this simple structure without using floats: http://cl.ly/image/120w2S12213O
I am new to Web Design so I am a bit lost. Why green and red elements are separated by a white gap? It's not padding, nor margin... I can't understand it. Thank you.
This is the HTML:
<body>
<header></header>
<section></section>
<aside></aside>
<footer></footer>
</body>
And this is the CSS.
body {
width: 1024px;
height: 612px;
margin: 0 auto; }
header {
position: relative;
top: 0;
width: 100%;
height: 100px;
box-sizing: border-box;
background-color: blue; }
section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block; }
aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 28%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block; }
It's because you're declaring them as display: inline-block and then you went on a new row in your code, resulting in a blank space. You can fix it with:
<header></header>
<section></section><!--
--><aside></aside>
<footer></footer>
or
<header></header>
<section></section><aside></aside>
<footer></footer>
see this demo: http://jsfiddle.net/jonigiuro/cE4t5/
Also, I don't see a reason tu use display: inline-block and floats together
The space is due to the fact that the element are inline, and inline elements are sensitive to white space. Simply remove the space in your code and the gap goes away.
<header></header>
<section></section><aside></aside>
<footer></footer>
jsFiddle example
You must use on the section float:left and put width:30% on the aside:
section {
position: relative;
margin: 0;
padding: 0;
width: 70%;
height: 600px;
box-sizing: border-box;
background-color: red;
display: inline-block;
float: left;
}
aside {
position: relative;
margin: 0;
padding: 0;
left: 0;
width: 30%;
height: 600px;
box-sizing: border-box;
background-color: green;
display: inline-block;
}
Watch the demo: http://jsfiddle.net/9kELA/
I'm centering a div inside another div using percentage margins. I do this because the parent div is going to change sizes based on browser size.
See this jsfiddle for a demo.
My CSS:
#test-wrap {
position: absolute;
width: 400px;
height: 250px;
background-color: pink;
}
.white-wrap {
position: absolute;
width: 50%;
height: 50%;
background-color: white;
left: 50%; margin-left: -25%;
top: 50%; margin-top: -25%;
}
This works fine in Safari, but in Chrome the child div is appearing higher than it should.
Perhaps there's a better way to achieve such a thing, that works on all browsers and doesn't rely on pixel margins? Any suggestions would be greatly appreciated!
You should use the attribute margin. So your CSS of white-wrap should be:
.white-wrap {
position: relative;
margin: 0 auto;
width: 50%;
height: 50%;
background-color: white;
}
This is my favorite way to accomplish this (works in all modern browsers and IE8+).
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
And here is a jsFiddle that mimics your example.
Try
#test-wrap {
display: table-cell;
width: 500px;
height: 500px;
background: gray;
vertical-align: middle;
text-align: center;
}
.white-wrap {
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
You should set those properties too :
* {
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
Once you defined a size for a DIV or anything else, the margin, padding and everything will be in the sizing and won't increase the size.