Here's the code I got from a css button generator I was wondering how to make them all the same size instead of the button adjusting to the text length.
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#42aaff 0%,
#003366);
background: -webkit-gradient(
linear, left top, left bottom,
from(#42aaff),
to(#003366));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.5);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
Just give them all a fixed width according to your largest content.
You can either do it with fixed px or percentage. But the trick is to then do text-align:center and also I'd throw them into a list:
http://codepen.io/anon/pen/CfjcG
well... you need to make an element out of it, that code is to just give you the effects you need for whatever you designed on the button creator, you need to apply it to an element that has a specific size.. for example
.buttons{
width:60px;
height:30px;
float:left;
(all the button stuff)
}
if you want it a different size just change the value of the width and height... this should do it.. let me know if it works.. :)
Related
So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.
CSS Box-Shadow adds arbitrary white border to Div
To show specifically what I want removed:
The little small white border on the left of the blue.
Here is a JSFiddle and the code:
https://jsfiddle.net/pg5omtqq/
.floating-card {
background-color: white;
border-left: 5px solid blue;
box-shadow: 0px 0px 10px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.
This will remove the shadow on the left
-webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
You can adjust this by using this generator box shadow.
source: https://www.cssmatic.com/box-shadow
Add to your CSS
box-shadow: none;
remove left box-shadow by using below css.
.floating-card{
background-color: white;
border-left: 5px solid blue;
-webkit-box-shadow: 0px 0px 10px 0px grey;
-moz-box-shadow: 0px 0px 10px 0px grey;
box-shadow: 0px 0px 10px 0px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
I have an HTML input range set up with a bunch of CSS changes to the appearance, and I was wondering if there was any way to make it smoothly change from wherever it is to where the user changes?
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 20px;
border-radius: 5px;
border: 1px solid;
background: none;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
transition: 0.4s all ease-out;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
background-color: #CCC;
border: solid 1px #333;
border-radius: 4px;
box-shadow: 0px 0px 8px 0px #555, 0px 0px 25px 0px #555 inset;
cursor: pointer;
transition: 0.4s all ease-out;
}
input[type=range]:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0px 0px 13px 0px #444, 0px 0px 20px 0px #444 inset;
}
input[type=range]:hover::-webkit-slider-thumb {
border: solid 1px #444;
box-shadow: 0px 0px 15px 0px #444, 0px 0px 20px 0px #444 inset;
}
input[type=range]:focus {
background: rgba(255, 255, 255, 0.4);
box-shadow: 0px 0px 18px 0px #333, 0px 0px 15px 0px #333 inset;
}
input[type=range]:focus::-webkit-slider-thumb {
border: solid 1px #333;
box-shadow: 0px 0px 22px 0px #333, 0px 0px 15px 0px #333 inset;
}
<input type="range" id="brightness_slider" value="90" step="1" min="30" max="100">
These are the things that affect the smoothness:
The width of the banner
The min/max range
The size of steps
So if you have:
1000px wide range input
0 - 1000 range
Step size of 1
Each step will be just 1px, and it will be quite smooth.
If you have:
1000px wide range input
0 -100 range
Step size of 25
It will snap between the allowable values, appearing less fluid.
This is really a feature of the interaction between your step size and your range, and provides useful feedback to the user on what values are acceptable.
I realize this is quite old at this point but the solution I came up with I found was pretty elegant and easy to do so I thought I would share it.
First I had an indexed scroller to make it easier. For example, I had an array of values like the following:
myArray = [0, 100, 1000, 10000, 100000]
I set my input range min to 0, max to the number of items in the array 4. Then I set the step to .01 to get smooth scrolling.
On the input event I did the following:
index = Math.round(event * 1);
value = myArray[index];
And that's basically it, as you scroll it will be smooth, and the values will change in between the ranges as you would expect.
I have this problem where I want to have a border and a box-shadow, but the shadow must be over the border.
The box-shadow property starts when the border ends, is it possible to move it over the border?
.border
{
border: solid rgba(128,42,42,.98) 16px;
}
.img-box-shadow
{
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
My HTML:
<img class="border img-box-shadow" src="img.png">
Already tried inset in my box shadow, but it didn't work!
I'm looking for this effect:
And I'm getting this result:
I think this would be much more easily achieved with two overlayed box shadows
Something like this approaches what you're looking for
box-shadow: 0 0 20px 5px #000000,
0 0 0 16px rgba(128,42,42,.98);
Seem like you want an inset box shadow, then you can use:
box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;
Fiddle Demo
How about this one?
.ds-bottom {
position:relative;
overflow:hidden;
border-bottom:1px solid #ddd;
}
.ds-bottom:before {
content: "";
position:absolute;
z-index: 1;
width:96%;
bottom: -10px;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
You can try using inset and then lowering the alpha value of your border. It may not exactly be what you want, but it's close.
.border
{
border: solid rgba(128,42,42,.5) 4px;
}
.img-box-shadow
{
-moz-box-shadow: inset 0px 0px 20px #000000;
-webkit-box-shadow: inset 0px 0px 20px #000000;
box-shadow: inset 0px 0px 20px #000000;
}
Alternate option (borrowed from this question). Don't use the .border and just use this (you can play around with pixel values):
.img-box-shadow
{
box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
}
Here's a JSFiddle
First, you have mistake in box shadow format.
box-shadow: 0px 0px 20px #000000;
Change to
box-shadow: 0px 0px 20px 0 #000000;
Due to the right format of Box Shadow Properties
box-shadow: horizontal-length vertical-length blur-radius
spread-radius;
Next, to make it works with your requirement you must wrap your image inside div. Box-shadow wont works over border.
Here's the style
div {
display:inline-block;
padding:4px; /* Act as border width */
background:rgba(128,42,42,.98); /* Act as border color */
}
.img-box-shadow
{
box-shadow: inset 0px 0px 20px 0 #000000;
-webkit-box-shadow: inset 0px 0px 20px 0 #000000;
-moz-box-shadow: inset 0px 0px 20px 0 #000000;
}
And the HTML Markup
<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>
Check live demo http://jsbin.com/hex/1/edit
The first Click here for a Demo button of this site has text-shadhow applied to it but it doesn't show:
http://www.chineselearnonline.com/ver7
Here's the CSS:
#content .call-to-act a {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: bold;
color: #ffffff;
padding: 15px 21px;
width: auto;
height: auto;
text-align: center;
}
background: -moz-linear-gradient(
top,#e45b2d 0%,#e34e18);
background: -webkit-gradient(linear, left top, left bottom,from(#e45b2d),
to(#e34e18));
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
border: 1px solid #a04830;
-moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
-webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
box-shadow:0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 3px rgba(255,255,255,0);
text-shadow: 1px 1px 1px #000;
}
and HTML:
<div class="call-to-act">
Click here for a Demo
</div>
What could be the problem?
I don't see any problem. Works for me in Chrome and Firefox. I noticed in your code an extra } maybe thats the problem (but with that the css wouldn't work at all.
P.S. You don't need the -webkit- or -moz-.
I'm almost sure that it's not possible to create shadows like that in CSS3 but I'm asking just in case anybody tried that and found a way:
I have sidebar to the right (limited height) and longer content the the left. The shadow fades in at the beginning and fades out at the end. Can this shadow be purely procedural (no raster images at all)?
You can use radial gradients like so:
#leftshadow
{
margin-left: 10px;
height: 200px;
width: 20px;
border-left:1px solid #ebebeb;
border-left:1px solid rgba(0,0,0,0.4);
background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),to(rgba(0,0,0,0)));
-webkit-mask-box-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
background-image:-moz-radial-gradient(left,ellipse farthest-side,rgba(0,0,0,.3),rgba(0,0,0,0));
}
jsFiddle here
Different tweak is here
Original Answer
If you require a "simple" inset shadow you can also achieve this like so:
#leftshadow
{
-webkit-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
box-shadow: inset inset 5px 0px 5px -2px rgba(0,0,0,0.4);
}
jsFiddle here
here's the trick I talked about, that is, layering a secondary div with a white shadow:
http://jsfiddle.net/dmezK/
it is not perfect but you can tweak it to fit your needs, I think.
here's the HTML:
<div id="main">
<div id="cheat"></div>
</div>
here's the CSS:
#main
{
width: 100px;
height: 300px;
-webkit-box-shadow: inset 10px 0px 5px -2px #888 ;
position: relative;
}
#cheat {
width: 300px;
height: 300px;
-webkit-box-shadow: inset 10px 0px 5px -50px white ;
position: absolute;
left: -100px;
}
note: maybe you could use multiple box shadows, but it isn't as widely supported.
This is the closest I could make:
div {
width: 300px;
height: 600px;
border: solid 1px;
box-shadow:
inset 0px 10px 10px #fff,
inset 0px -10px 10px #fff,
inset 10px 0px 20px rgba(0, 0, 0, .3);
}
Live demo: Tinkerbin
try this
http://jsfiddle.net/6QSEc/1/
div{
height:200px;
width:100px;
background-color:white;
border:1px solid #f1f1f2;
box-shadow:10px 0px 20px -10px rgba(0,0,0,0.5) inset;
}
.box {
z-index: 100;
border: none;
padding: 0 0 0 10px;
background-image: url("images/topShadow"), url('images/bottomShadow'), url('images/shadow');
background-position: 0 top, left top, 0 bottom;
background-repeat: no-repeat, repeat-x, no-repeat;
}
Ok this is untested but should work with some tweaking that I don't have time for at the moment. You have 3 images, top, middle, and bottom. You use CSS3 multiple background images to use this as your left border, just add some padding to the left of the box. The order is important as it handles the layering of the images. The 1st one will be on top of all the others. The order acts as z-index for the images.