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;
}
Related
I have a div that containing a inner box shadow, but these shadow is coverd by another div, i tried with postion:relative but nothing is changed.
Here is a example
CODE EXAMPLE
example-div{
background:#fff;
color:#000;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
width:260px;
height:250px;
border-radius: 100%;
border:6px solid red;
position: relative;
-webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}
Thanks in advance !
2 things you need to do - change the z-index of your picture so that it is behind your circular div, and then change the background of your circular div so that it is transparent instead of white.
.example-div{
background: transparent; /*this way you can see behind the circle*/
color:#000;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
width:260px;
height:250px;
border-radius: 100%;
border:6px solid red;
position: relative;
-webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}
.example-div img{
width:260px;
height:250px;
border-radius: 100%;
position: relative; /*needed for z-index*/
z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}
<div class="example-div">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>
how to get a good shadow (AT THE border-right OF THE SMALL DIV) that is equal to the shadow of the large div but that does cut of as it reaches the border-bottom of the small div / the border-top of the large div.
NOTE: I CANNOT use Z-index, I have a website way more complicated. Also, Spread CANNOT be used here because that doesnt cut off when it reaches the border-bottom/border-top, it won't look 3d anymore.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="small"></div>
<div id="large"></div>
</body>
</html>
And here, the CSS:
#small {
border: 1px solid black;
width: 200px;
height: 50px;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
I also have a JS Bin: http://jsbin.com/vijujaweja/edit
-I know, the question is formatted a bit bad, but I hope you understand my question.-
Why not just add background color to the divs?
JS Bin Here
#small {
border: 1px solid black;
width: 200px;
height: 50px;
background-color:#fff;
}
#large {
width: 300px;
border: 1px solid black;
height: 100px;
background-color:#fff;
}
.dropshadow {
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
Do you want it like this? http://jsbin.com/xohomaraqe/1/edit I have updated some code.
Updated
This should work then
#small{
-webkit-box-shadow: 9px 1px 3px -1px rgba(50, 50, 50, 0.75);
}
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/
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;
}
So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.
See for yourself here http://jsfiddle.net/976a3/2/
CSS:
body
{
margin: 0px 0px 0px 0px;
background:rgba(75, 75, 75, 1);
color:#c0c0c0;
}
#container
{
margin:0px auto;
padding:0px 0px 0px 0px;
width:300px;
height:350px;
}
#contact_info
{
margin:0px 0px 0px 75px;
padding:15px 15px 15px 15px;
width:270px;
height:150px;
border:1px solid black;
color:black;
background:rgba(200,200,200,1);
border-radius:20px;
box-shadow:7px 7px 12px rgba(0,0,0,1);
}
.title
{
font-size:1.3em;
margin:-10px 0px 0px -30px;
padding:4px 0px 0px 10px;
width: 235px;
height:30px;
color:white;
background:rgba(22,22,22,1);
border-top-right-radius:10px;
border-bottom-right-radius:10px;
text-shadow:0 0 3px rgba(192, 192, 192, 1);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
0 5px 10px rgba(0, 0, 0, 0.5) inset,
0 4px 6px rgba(255, 255, 255, 0.2) inset,
1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
0pt 1px 0px rgba(0, 0, 0, 0.2);
}
.title:after
{
top:40px;
left:-163px;
position:relative;
z-index:-2;
content: "";
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid rgba(22, 22, 22, 1);
}
Html:
<div id="container">
<div id="contact_info">
<p class="title">CONTACT INFO</p>
<br />
</div>
</div>
Any fixes or ideas?
Thanks
Instead of giving the .title:after position:relative, you can try giving it position:absolute; and give .title position:relative;
http://jsfiddle.net/976a3/3