2
I need you to show only 50% of the DIV’s BG, so?
#coberturas legend{
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
padding:10px 20px;
display:block;
position:absolute;
bottom:0;
box-sizing: border-box;
background-color:rgba(55,57,62,0.8);
width:320px;
text-transform:uppercase;
transition:all 0.3s;
-webkit-transition:all 0.3s;
}
this div is superimposed on another;
1
I don’t know if you want it to be 50% of div in terms of being horizontal, or if in terms of 50% being vertical. so I’m going to post here two possible ways to do this both ways.
This will be the supposed HTML to generate the 2 divs. The id container is included only to keep both divs filho within the div pai - container using the property position:relative; which you will see in the CSS code below after the HTML code example:
<div id="container">
<div id="coberturas1"></div>
<div id="coberturas2"></div>
</div>
If you’re looking to do this horizontally, the CSS will be: http://jsfiddle.net/v7ecw3ah/
#container{position:relative;}
#coberturas1 {
background-color: rgba(55,57,62,0.8);
width: 50%;
height: 300px;
}
#coberturas2 {
background-color: #efc94d;
width: 50%;
height: 300px;
/* código para mostrar apenas 50% da div Cinzenta (coberturas1) */
position:absolute;
top:5px; /* muda este valor para "0" - Isto foi apenas mostrar o que está a acontecer por detrás da div */
right:25%; /* 25% significa metade (que neste caso será 50%) do tamanho de ambas as divs */
}
If you’re looking to do it vertically, the CSS will be: http://jsfiddle.net/v7ecw3ah/1/
#container{position:relative;}
#coberturas1 {
background-color: rgba(55,57,62,0.8);
width: 50%;
height: 300px;
}
#coberturas2 {
background-color: #efc94d;
width: 50%;
height: 300px;
/* código para mostrar apenas 50% da div Cinzenta (coberturas1) */
position:absolute;
top:150px; /* 150px significa metade (que neste caso será 50%) do tamanho de ambas as divs */
left:5px; /* muda este valor para "0" - Isto foi apenas mostrar o que está a acontecer por detrás da div */
}
This won’t help me, I need the div to still be there, but only show half, I mean the div will take up all the space, but the background needs to be half, I was wrong, I’m sorry
0
Being a "color" you can use linear-gradient
.horizontal .inner, .vertical .inner, .diagonal .inner {
width:320px;
height: 80px;
margin: 0 0 10px 0;
}
.horizontal .inner {
background: linear-gradient(to bottom, #00f 0%, #00f 50%, #f00 51%, #f00 100%);
}
.vertical .inner {
background: linear-gradient(to right, #00f 0%, #00f 50%, #f00 51%, #f00 100%);
}
.diagonal .inner {
background: linear-gradient(135deg, #00f 0%, #00f 50%, #f00 51%, #f00 100%);
}<div class="horizontal">
<div class="inner">
Olá mundo
</div>
</div>
<div class="vertical">
<div class="inner">
Olá mundo
</div>
</div>
<div class="diagonal">
<div class="inner">
Olá mundo
</div>
</div>If you want compatibility with older browsers, use these properties:
/*Fallback para navegadores sem suporte*/
background: #00f;
/* FF3.6+ */
background: -moz-linear-gradient(left, #00f 0%, #00f 50%, #f00 51%, #f00 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #00f), color-stop(50%, #f00), color-stop(51%,#f00), color-stop(100%,#f00));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(left, #00f 0%, #00f 50%, #f00 51%, #f00 100%);
/* Opera 11.10+ (não webkit/blink) */
background: -o-linear-gradient(left, #00f 0%,#00f 50%,#f00 51%, #f00 100%);
/* IE10+ */
background: -ms-linear-gradient(left, #00f 0%,#00f 50%,#f00 51%, #f00 100%);
/* CSS3*/
background: linear-gradient(to right, #00f 0%,#00f 50%,#f00 51%, #f00 100%);
/* Fallback para IE6 ao IE9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f', endColorstr='#f00',GradientType=1 );
0
You can use this online tool, more useful to emulate your div:
http://makewebsimple.net/cssdivbuilder
To generate the gradient I use this other online tool:
http://www.colorzilla.com/gradient-editor/
Exp
.teste{
width: 200px;
height: 200px;
border: 1px rgb(89,89,89) solid;
background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(35,111,183,1) 24%, rgba(41,137,216,0.66) 50%, rgba(32,124,202,0.65) 51%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(24%,rgba(35,111,183,1)), color-stop(50%,rgba(41,137,216,0.66)), color-stop(51%,rgba(32,124,202,0.65)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(35,111,183,1) 24%,rgba(41,137,216,0.66) 50%,rgba(32,124,202,0.65) 51%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(35,111,183,1) 24%,rgba(41,137,216,0.66) 50%,rgba(32,124,202,0.65) 51%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(35,111,183,1) 24%,rgba(41,137,216,0.66) 50%,rgba(32,124,202,0.65) 51%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(35,111,183,1) 24%,rgba(41,137,216,0.66) 50%,rgba(32,124,202,0.65) 51%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
}<div id="teste" class="teste"></div>In your case it would look something like this:
.teste {
width: 500px;
height: 200px;
border: 1px rgb(89,89,89) solid;
background: -moz-linear-gradient(top, rgba(239,242,48,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(34,125,203,0) 52%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,242,48,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(52%,rgba(34,125,203,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(239,242,48,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(34,125,203,0) 52%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(239,242,48,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(34,125,203,0) 52%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(239,242,48,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(34,125,203,0) 52%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(239,242,48,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(34,125,203,0) 52%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff230', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
}
#coberturas{
font:Lucida Sans;
display:block;
bottom:0;
box-sizing: border-box;
background-color:#FF9911;
width:200px;
}<div id="teste" class="teste">
<h2> Coberturas </h2>
<div id="coberturas" class="coberturas"></div>
<ul>
<a href="fotos.php?id=5"> <li><img src="imagens/01.jpg" width="100" height="100" /> <br/>
<legend> <span>29/05/2015 - TUPACIGUARA MG</span> <br /> <h1>EXPO CAPITU</h1></legend></li></a>
</ul>
</div>Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Could you also post along with your question the code you’re trying to do this with? And if possible add more details, because the question seems to be a little vague...
– Chun
What exactly do you want to do? Who’s inside that div? Set a height with
overflow:hidden;css does not solve? We need more details to help you– Erlon Charles
I will edit the post, with the code
– Gustavo Cardoso
era of this you were looking for @Gustavocardoso ?
– Chun
I voted for reopening, issue 6 seems to have made clear the goal.
– Guilherme Nascimento