This is what I want:
And this is what I have (I want the bottom left box scooted up):
Here is my CSS so far.
.grid {
padding:0px;
margin:10px auto;
width:100%;
background-size: 100%;
}
.grid li {
display: block;
width: 361px;
float: left;
background: #fff;
margin:6px 19px 6px 0px;
margin-top: 12px;
padding: 10px;
font-family: 'Roboto', sans-serif;
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.4);
box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.4);
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Related
Basically I have a div that when hovering on it, the text moves to the right. I would like to achieve some effect as if the text were lost inside the div while moving to the right.
.rectangulo_categoria {
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
}
.rectangulo_categoria:hover .texto_engranen_1 {
transform: translate(168px, 0px);
opacity: 0;
}
.texto_engranen_1 {
line-height: 1;
pointer-events: none;
z-index: 1;
font-size: 12px;
width: auto;
font-weight: 400;
pointer-events: none;
line-height: 1;
transition: 0.5s all ease-out;
opacity: 1;
color: #343434;
}
<div class="rectangulo_categoria" mdbWavesEffect>
<p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>
this is my full code:
https://jsfiddle.net/te0p2fqb/
You can add a overflow: hidden; on the div. Also I re-arranged your classes and removed some duplicate props.
.rectangulo_categoria {
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
overflow: hidden;
}
.texto_engranen_1 {
line-height: 1;
z-index: 1;
font-size: 12px;
width: auto;
font-weight: 400;
pointer-events: none;
transition: 0.5s all ease-out;
opacity: 1;
color: #343434;
}
.rectangulo_categoria:hover .texto_engranen_1 {
transform: translate(168px, -50%);
opacity: 0;
}
<div class="rectangulo_categoria" mdbWavesEffect>
<p class="texto_engranen_1 p-0 m-0">Gestion Recursos de Apoyo Académico</p>
</div>
EDIT
Sure check the code on fiddle for aboslute solution. The main changes are that I removed the flex and its attributes, also reset the margin and padding on the <p>.
add overflow: hidden; to your .rectangulo_categoria class
.rectangulo_categoria{
border-radius: 34px;
border: 2px solid red;
width: 195px;
height: 50px;
display: flex;
justify-content: center;
align-items:center;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 8px 4px 10px -1px rgba(0, 0, 0, 0.75);
overflow: hidden; // this is your solution
}
As you can see I've created a sideBar:
<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
<p>Content Div</p>
</div>
My css:
#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}
#content p {
margin-left: 20px;
}
Fiddle:
http://jsfiddle.net/of4dcp2u/1/
I've used some inner shadow. The only problem is that I can't get the shadow work in de border lines. The white borders don't have any shadow.
I don't want to use any images for buttons. Is there a solution for this problem?
Sam, Put shadow to the content div like this
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
-webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}
The box-shadow you have set to .button is going in the wrong direction. Use this code:
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
I'd like to make this arrows in my site:
How can I make this one using css3 having a transparent background?
Thanks
You could use a font for the arrows and then CSS for the circles.
See working fiddle with Font Awesome:
http://jsfiddle.net/t2UA5/1/
<div class="halfCircleLeft"><i class="fa fa-angle-left"></i></div>
<div class="halfCircleRight"><i class="fa fa-angle-right"></i></div>
CSS
.halfCircleRight{
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:transparent;
-webkit-box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow: 4px 0px 25px 0px rgba(50, 50, 50, 0.75);
position:relative;
z-index:50;
}
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
background:transparent;
-webkit-box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
box-shadow: -4px 0px 25px 0px rgba(50, 50, 50, 0.75);
position:relative;
z-index:50;
}
.fa.fa-angle-left {
color:#27367A;
font-size:30px;
position:relative;
z-index:150;
top:30px;
left:20px;
}
.fa.fa-angle-right {
color:#27367A;
font-size:30px;
position:relative;
z-index:150;
top:30px;
left:15px;
}
I think this code help you :
<div class="arrow-bg">
<div class="arrow">
</div>
</div>
.arrow-bg {
border-radius:30px;
box-shadow:-10px 0 8px #EDEDED;
padding:20px 15px;
width:30px;
}
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
This is the simple arrow and now you can add shadows and so on...
<div id="some_div">some text</div>
<div id="arrow"></div>
#arrow {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid white;
float: left;
height: 1px;
}
I have 2 div's, one 50% width, the other 25%.
They're suppose to both sit centred horizontally on the one line.
I can get this working fine. But when I insert a paragraph they break.
Any idea why?
http://jsfiddle.net/3KuJa/
html:
<section>
<div class="twothird"> </div>
<div class="onethird"><p>test</p></div>
</section>
css:
.onethird {
width: 25%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
.twothird {
width: 50%;
background: white;
min-height: 20em;
display: inline-block;
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
Inline block elements align, by default to baseline
This should fix it if applied to both inline-block divs
CSS
display: inline-block;
vertical-align: top;
Adjusted JSfiddle Demo
You may have to widen the display window to check.
since you have box-shadow, i am proposing a solution supported by IE8+ :
use display :table /table-cell for section and div
section {
display:table; /* make parent table type */
width:60%; /* give width */
margin :0 auto; /* center your section */
border:1px solid green /* just for display */
}
.onethird {
width: 25%;
background: white;
min-height: 20em;
display:table-cell;
/* display: inline-block; changed this value */
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
border:1px solid red;
}
.twothird {
width: 50%;
border:1px solid red;
background: white;
min-height: 20em;
display:table-cell;
/* display: inline-block; changed this value */
margin: 20em 3%;
-webkit-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 2px 6px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 2em;
text-align:left;
}
Keep in mind : your fiddle doesn't have set width and height to html, body...always declare that, it avoids many messy problems later in DOM - rule of thumb :)
Working fiddle
The source of the problem is indeed the interaction of the baseline alignment between the p and the empty inline box to the left of it.
In addition to using vertical-align: top to fix the problem, you can also use overflow:auto applied to .onethird and .twothird, which triggers a new block formatting context which prevents the text lines from the two inline-block containers from interacting with each other.
See demo at: http://jsfiddle.net/audetwebdesign/6vnh3/
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}