I'm trying to figure out how to get this button I've created to be in the exact center of the page (vertically and horizontally). I've gotten it to center on the horizontal plane, but not on the vertical plain. Any help would be appreciated!
input#gobutton{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
cursor:pointer;
padding:5px 25px;
background:#87CEFA;
border:1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}
Input
Text-align: center;
Padding: 50px 0;
http://www.w3schools.com/css/css_align.asp
I'm not sure if it's what you need, but take a look at this JSFiddle example.
The CSS I used is:
input#gobutton{
position: relative;
display: block;
margin: auto;
top: 40%;
cursor:pointer;
padding:5px 25px;
background:#87CEFA;
border:1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}
Change position to absolute or fixed.
Related
I want to add a box shadow to a button with a border radius but the shadow itself should lie below the button and within its width range.
I was able to get the rounded border shadow but when trying to position it within the elements width range the border radius effect was lost and instead I got only the shadow without the border radius.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 25px 0px -10px;
}
<button class="but1">
Click me!
</button>
The example of what I got till now is linked below.
Sample output in jsfiddle
Your box-shadow is being cropped because of the negative spread (the last parameter in your box-shadow declaration)
If what you want is a rounded shadow the exact same width of the element, then setting spread to zero and taking 10px out of the vertical offset to compensate will do.
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
If what you want instead is a shadow that keeps the rounded borders but is shorter than the element width, you can draw a shorter pseudo-element positioned behind it, and apply the box-shadow to the pseudo-element
.but1 {
width: 200px;
height: 100px;
border: none;
background-color: yellow;
border-radius: 10px;
position:relative;
}
.but1:before{
content:"";
position:absolute; top:10px; bottom:10px; left:10px; right:10px;
border-radius:10px;
z-index:-1;
box-shadow: rgba(0, 0, 0, 0.8) 0 15px 0px 0px;
}
<button class="but1">
Click me!
</button>
Add 0px to the box-shadow
.but1 {
width: 100px;
height: 50px;
border: none;
background-color: yellow;
border-radius: 100px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 9px;
}
<button class="but1">
Click me!
</button>
I used :after to achieve this, just an idea, you can play around with the css as wish.
Code:
.but1{
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
position: relative;
/* -webkit-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
-moz-box-shadow: rgba(0,0,0,0.8) 5px 20px 0px;
box-shadow: rgba(0,0,0,0.8) 0px 3px 9px;*/
}
.but1:after {
content: "";
position: absolute;
left: 16px;
width: 84%;
bottom: 37px;
z-index: -1;
border-radius:10px;
transform: scale(.9);
box-shadow: -1px 20px 14px 20px rgba(0,0,0,0.8);
}
<button class="but1">
Click me!
</button>
Update Your Css Like this.
.but1 {
width:200px;
height:100px;
border:none;
background-color:yellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
-moz-box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
box-shadow: rgba(0,0,0,0.8) 0px 7px 8px 1px;
float:left;
}
This is driving me nuts, I've seen it before but can't replicate it or find it or any resources for it. What I am doing is a vertical ribbon with a leather texture and a "stitched pattern". The way the stitches work is simple enough, inner divs with dashed borders, and even the ribbon shape is easy enough using the pseudo :after class, but combining the two is just not going to plan.
This is what I have for css that is working so far (it is all done with css minus the leather texture):
.wrapleather {
width:100px;
height:120px;
float: right;
margin-right:20px;
background-image : url("leather.png");
border-radius: 5px;
-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
position:relative;
}
.wrapleather:after {
content: '';
display: block;
width: 0;
height: 105px;
position: absolute;
top: 0;
left: 0;
border-width: 0 50px 15px 50px;
border-style: solid;
border-color: transparent transparent #cdc0a8;
position:absolute;
top:0;
left:0;
}
.wrapleather .outside {
width:90px;
height:110px;
margin: 4px;
border-radius: 5px;
border: 1px dashed #aaa;
box-shadow: 0 0 0 1px #f5f5f5;
}
.wrapleather .inside {
width:90px;
height:110px;
border-radius: 5px;
}
<div class="wrapleather">
<div class="outside">
<div class="inside">
<p class="font">Leather</p>
</div>
</div>
</div>
Additionally the shadow is remaining in a "square" format and not taking the shape of everything. To clarify I am not asking anyone to debug or anything like that, I am simply asking for alternative or further methods to be shared that could achieve the desired results, css is still something I am in the process of learning so any advice or anything of that nature that you could give would be appreciated, and if you need any additional info please let me know. Thanks!
There is a way to do what you want with CSS only, but it won't work on all browsers. If you want the best browser support, you should probably use an image.
Here is a demo (you may have noticed I only use a single element, as you shouldn't introduce extra markup just for styling): http://jsfiddle.net/joshnh/eUje5/
HTML
<div class="ribbon"></div>
CSS
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-radius: 5px 5px 0 0;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee;
height: 120px;
margin: 0 5px;
position: relative;
width: 90px;
-webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
border-top: 15px solid #eee;
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
}
.ribbon:after {
border-left: 50px solid transparent;
right: -6px;
}
.ribbon:before {
border-right: 50px solid transparent;
left: -6px;
}
So, I wanted to make sure that I wasn't losing my mind and that this ribbon effect is actually possible on modern browsers without relying on webkit specific filters. So here it is for all those who come across this later.
You just need to be more diligent with how you model your box-shadows.
Note that when increasing the width, you'll need to subsequently decrease the angle at which you're rotating and skewing the :before and :after elements.
Example:
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-top: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee,
0 -5px 0 #eee,
5px -5px 0 #eee,
-5px -5px 0 #eee,
5px 1px 5px 5px #888;
height: 120px;
margin: 10px 5px 0 5px;
position: relative;
width: 90px;
z-index: 3;
}
.ribbon:after,
.ribbon:before {
content: '';
position: absolute;
top: calc(100% - 1px);
width: calc(50% + 1px);
border-bottom: 1px dashed #aaa;
}
.ribbon:after {
transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
transform-origin: top right;
right: -1px;
height: 40px;
background-color: #eee;
border-right: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888,
15px 0 5px -5px #888;
}
.ribbon:before {
transform: rotateZ(-20deg) skewX(-20deg);
transform-origin: top left;
left: -1px;
height: 40px;
background-color: #eee;
border-left: 1px dashed #aaa;
box-shadow: -5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888;
}
<div class="ribbon"></div>
I'm trying to place an image (the bamboo) behind a div (contact form) using "z-index".
However, the image is pushing the div out of the way.
Page can be seen here: http://www.abijahchristos.com/sample/springspa
JsFiddle here: http://jsfiddle.net/Abijah/4n9LZ/
you can use a background property to do it.
try this you do not need z-index
.copy_right {
background: url("../images/bamboo1.png") repeat scroll 0 0 transparent;
border: 2px solid #CCCCCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
float: left;
height: 310px;
margin: 0 25px 0 30px;
padding: 5px 0 0;
width: 310px;
z-index: 2;
}
having background image in CSS is valid solution but just incase you dont want background use follwoing.
in case of position absolute you need to have a container with position relative otherwise it will position based on body top left corner.
.copy_right {
position:absolute;
top:0;
width: 310px;
height: 310px;
border: 2px solid #CCC;
margin: 0 25px 0 30px;
padding: 5px 0 0 0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0 3px 10px;
z-index: 2;
}
#bamboo {
position: absolute;
z-index: 1;
right: -17px;
top: 0;
}
I'm working on a site called http://ccrccmo.com and I can't get the box-shadow to show up on the content-bg with css.
nav{
background:url(images/nav-bg2.png);
height:74px;
box-shadow: 0px 3px 5px #222;
}
#content-bg{
background:white;
margin-top:0px;
z-index:-1000;
}
you are missing
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
try
#content-bg {
background: white;
margin-top: 0px;
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
}
I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.
I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?
Here is the code I've been trying to use
-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;
You could use the clip property:
div {
width: 100px;
height: 30px;
margin: 30px;
clip: rect(-15px,115px,45px,0);
position: absolute;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
}
Demo: http://jsfiddle.net/QBQJn/
You can do it with css :after property. Like this:
div{
width:100px;
height:30px;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
margin:30px;
position:relative;
}
div:after{
content:'';
width:10px;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-10px;
}
Check this http://jsfiddle.net/QBQJn/1/
Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/
HTML:
<div id="l">
<div id="v"></div><div id="h"></div>
</div>
CSS:
#l {
padding: 20px;
border: 1px solid red;
float: left;
}
#v, #h {
-moz-box-shadow: 0 0 5px #80abc6;
-webkit-box-shadow: 0 0 5px #80abc6;
box-shadow: 0 0 5px #80abc6;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#v {
width: 48px;
height: 192px;
}
#h {
width: 96px;
height: 48px;
}
#v:after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 38px;
left: 0;
height: 20px;
background: #fff;
}
#h:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 20px;
background: #fff;
}