Box Shadow not working after placing an overlay

Box Shadow not working after placing an overlay - html

I'm using effect 7 for my project which I grabbed from here https://css-tricks.com/almanac/properties/b/box-shadow/
The only effect applied is the one inside the effect7 class. But the :before and :after are not showing.
http://prntscr.com/ln6hm2
http://prntscr.com/ln6hzh
.effect7 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
}
.effect7:before,
.effect7:after {
content: "";
position: absolute !important;
z-index: -1 !important;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
top: 0 !important;
bottom: 0 !important;
left: 10px !important;
right: 10px !important;
-moz-border-radius: 100px / 10px !important;
border-radius: 100px / 10px !important;
}
.effect7:after {
right: 10px !important;
left: auto !important;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg) !important;
}
<div class="effect7">
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
... effect7 ...<br>
</div>

Related

How can i convert box shadow to filter drop shadow?

Is there a way to convert box-shadow property value to filter drop-shadow?
I have tried doing this:
.boxes-container {
display: flex;
justify-content: center;
}
.boxshadow-box,
.filter-dropshadow-box {
display: block;
background-color: green;
margin: 50px;
padding: 50px;
width: 150px;
box-sizing: border-box;
}
.boxshadow-box {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.filter-dropshadow-box {
filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.2)) drop-shadow(8px 10px 1px rgba(0, 0, 0, 0.14)) drop-shadow(3px 14px 2px rgba(0, 0, 0, 0.12));
}
<div class="boxes-container">
<div class="boxshadow-box"></div>
<div class="filter-dropshadow-box"></div>
</div>
But I can't reach the same results for drop-shadow as box-shadow.

Can you please check the below code? Hope it will work for you. By Mistake, you passed the wrong value in filter drop-shadow.
.boxes-container {
display: flex;
justify-content: center;
}
.boxshadow-box,
.filter-dropshadow-box {
display: block;
background-color: green;
margin: 50px;
padding: 50px;
width: 150px;
box-sizing: border-box;
}
.boxshadow-box {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.filter-dropshadow-box {
-webkit-filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14));
filter: drop-shadow( 0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow( 0px 8px 10px rgba(0, 0, 0, 0.14));
}
<div class="boxes-container">
<div class="boxshadow-box"></div>
<div class="filter-dropshadow-box"></div>
</div>

how to put multiple background to a button without conflict with css

I have a 3D button with different background styles. I want to set a small icon to it. But some ways it wont show and other ways the background colors changes or disappears
.button {
text-decoration: none;
color: white;
padding: 18px;
width:170px;
text-transform: uppercase;
display: inline-block;
text-shadow: -2px 2px 0 rgba(0, 0, 0, 0.2);
font-weight: bold;
padding-right: 50px;
margin: 10px;
margin-top:15px;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
/*
Kinda replicates keyline but looks dumb.
#include filter(
drop-shadow(0 1px 0 rgba(blue, 0.2))
drop-shadow(0 -1px 0 rgba(blue, 0.2))
);
*/
}
.button.blue {
background: -moz-linear-gradient(top, #a2d3e9, #7abedf);
background: -webkit-linear-gradient(top, #a2d3e9, #7abedf);
background: linear-gradient(to bottom, #a2d3e9, #7abedf) ;
box-shadow: -1px 0px 1px #6fadcb, 0px 1px 1px #54809d, -2px 1px 1px #6fadcb, -1px 2px 1px #54809d, -3px 2px 1px #6fadcb, -2px 3px 1px #54809d, -4px 3px 1px #6fadcb, -3px 4px 1px #54809d, -5px 4px 1px #6fadcb, -4px 5px 1px #54809d, -6px 5px 1px #6fadcb, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow {
background: -moz-linear-gradient(top, #f2d851, #ecc92b);
background: -webkit-linear-gradient(top, #f2d851, #ecc92b);
background: linear-gradient(to bottom, #f2d851, #ecc92b);
color: black;
text-shadow: -2px 2px 0 rgba(255, 255, 255, 0.3);
box-shadow: -1px 0px 1px #d9b826, 0px 1px 1px #b1961d, -2px 1px 1px #d9b826, -1px 2px 1px #b1961d, -3px 2px 1px #d9b826, -2px 3px 1px #b1961d, -4px 3px 1px #d9b826, -3px 4px 1px #b1961d, -5px 4px 1px #d9b826, -4px 5px 1px #b1961d, -6px 5px 1px #d9b826, -6px 7px 0 rgba(0, 0, 0, 0.05), -5px 8px 0 rgba(0, 0, 0, 0.05), -3px 9px 0 rgba(0, 0, 0, 0.04), -2px 10px 0 rgba(0, 0, 0, 0.04), -1px 11px 0 rgba(0, 0, 0, 0.03), 0px 12px 0 rgba(0, 0, 0, 0.03), 1px 13px 0 rgba(0, 0, 0, 0.02), 2px 14px 0 rgba(0, 0, 0, 0.02), 3px 15px 0 rgba(0, 0, 0, 0.01), 4px 16px 0 rgba(0, 0, 0, 0.01), 5px 17px 0 rgba(0, 0, 0, 0.01), 6px 18px 0 rgba(0, 0, 0, 0.01), inset 0 4px 5px -2px rgba(255, 255, 255, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.3);
}
.button.yellow:after, .button.yellow:before {
background: black;
}
.button.yellow:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button.yellow:before {
-webkit-filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, 0.35));
}
.button.yellow .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
filter: drop-shadow(-2px 0 0 rgba(255, 255, 255, 0.4));
}
.button:active {
box-shadow: none;
-moz-transform: translate3d(-6px, 6px, 0);
-ms-transform: translate3d(-6px, 6px, 0);
-webkit-transform: translate3d(-6px, 6px, 0);
transform: translate3d(-6px, 6px, 0);
}
.button .arrow {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after {
-webkit-filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
filter: drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.2));
}
.button:after, .button:before {
position: absolute;
content: " ";
right: 15px;
top: 14px;
width: 6px;
height: 18px;
background: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
display: block;
z-index: 2;
}
.button:before {
height: 14px;
top: 26px;
right: 16px;
z-index: 3;
-moz-transform: rotate(-137deg);
-ms-transform: rotate(-137deg);
-webkit-transform: rotate(-137deg);
transform: rotate(-137deg);
-webkit-filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
filter: drop-shadow(0 -2px 0 rgba(0, 0, 0, 0.15));
}
<div class="row">
CARDLESS<br>
VIDEO CONFERANCE<br>
</div>
when i add background: url();
to .button.blue {}
if i add it before the last background nothing happens
if i add it after it , the background color disappear and the image appear

Try this
background: linear-gradient( rgba(122, 122, 126, 1), rgba(122, 122, 126, 0.65) ), url(../images/bg/bg10.jpg) no-repeat top center fixed;

i added this to html and it worked
<div class="" style="height:13%;width:100%;bottom:0;left:0;position:absolute;opacity:1;background-color:Silver;z-index:1000">
<div class="row">
<a href="#" class="button blue" onclick="javascript:onKeyPress('B')">
<img src="images/gesture.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt="">CARDLESS<br>
</a>
<a href="#" class="button yellow" >
<img src="images/call.png" style="position:absolute;right:50;width:50px;height:50px;top:02;background-color:" alt=""> VIDEO CONFERANCE<br>
</a>
</div>

Is it possible to add box shadowing to inputs in forms css?

I have been trying to add some snazzy effects to my input boxes and one I found was box shadowing, I looked at the w3schools tutorial for box shadowing and tried multiple things to add it to my input box:
.l_input {
box-shadow: 10px;
}
That didn't seem to work for my code. I also tried to use it using a hover pseudo effect and it again didn't work for that, the pseudo code I tried doing:
.l_input {
box-shadow: 5px;
}
.l_input:hover {
box-shadow: 10px;
transition: 2s;
}
And again that didn't seem to work, if this is the right syntax for how the code should work or I am doing a small mistake thanks in advance, I have thought that maybe it isn't supported for inputs, but that sounded weird.

.l_input {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: 0.3s ease-in-out;
}
/* hover effect */
.l_input:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
<div class="l_input"> Content <div>

You can give box shadow like following way:
.l_input {
box-shadow: 5px 5px 5px #000;
}
You should give at least first two value.
First two describe horizontal shadow and vertical shadow. Third one is blur and color.
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Reference link:
Working Fiddle
And you can give effect to shadow following way.
.l_input {
box-shadow: 5px 5px 5px #000;
}
.l_input:hover {
box-shadow: 10px 10px 10px #000;
transition: 2s;
}
Fiddle

It should be worked with below code.If your class is .l_input then it will be worked.Its depends on your mark.
.l_input {
box-shadow: 5px 5px 5px #000;
}
If not then try below code:
You can see in JSFIDDLE .
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
/*==================================================
* Effect 1
* ===============================================*/
.effect1 {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2 {
position: relative;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 3
* ===============================================*/
.effect3 {
position: relative;
}
.effect3:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/*==================================================
* Effect 4
* ===============================================*/
.effect4 {
position: relative;
}
.effect4:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5 {
position: relative;
}
.effect5:before,
.effect5:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 6
* ===============================================*/
.effect6 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before,
.effect6:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect6:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before,
.effect7:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect7:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 8
* ===============================================*/
.effect8 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before,
.effect8:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 10px;
bottom: 10px;
left: 0;
right: 0;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect8:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
<div class="box effect1">
<h3>Effect 1</h3>
</div>
<div class="box effect2">
<h3>Effect 2</h3>
</div>
<div class="box effect3">
<h3>Effect 3</h3>
</div>
<div class="box effect4">
<h3>Effect 4</h3>
</div>
<div class="box effect5">
<h3>Effect 5</h3>
</div>
<div class="box effect6">
<h3>Effect 6</h3>
</div>
<div class="box effect7">
<h3>Effect 7</h3>
</div>
<div class="box effect8">
<h3>Effect 8</h3>
</div>

Try This
.l_input {
box-shadow: 3px 3px 2px #666;
transition: 0.2s all linear;
border:1px solid #999;
}
.l_input:hover {
box-shadow: 0 5px 15px #666;
transition: 0.2s all linear;
}
<input type="text" class="l_input">

how to create css gradients and shadow

I am trying to create a border bottom gradient similar to the image below.. Just wondering if this can be achieved using css ?

.myshadow
{
position:relative;
width: 100px;
height: 80px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.myshadow:before, .myshadow:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.myshadow:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
<div class="myshadow"></div>

3D effect with shadow effects on CSS3

am trying to realize this 3D effect using css3,
This is what i've try so far :
border-radius: 12px;
box-shadow: 0px 0px 11px #000000;

To make a shadow like above image you have to use after before CSS3 tag and apply to div.
.effect
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect:before, .effect:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
visit to stupidcodes.com for more example...

.shadow-bottom {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Box Shadow not working after placing an overlay - html

Related

How can i convert box shadow to filter drop shadow?

how to put multiple background to a button without conflict with css

Is it possible to add box shadowing to inputs in forms css?

how to create css gradients and shadow

3D effect with shadow effects on CSS3

Categories

Resources