3D effect with shadow effects on CSS3 - html

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;
}

Related

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>

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>

Page curl drop shadow also at the top?

Refering to the css effect from: Best way to do this kind of drop shadow?
How (if at all) could it be possible to apply the same effect also on the top of an image?

Try
http://jsfiddle.net/mPnTP/433/
body {
padding:20px 0 30px;
font:14px/1.5 Arial, sans-serif;
text-align:center;
color:#333;
background:#FAF0D9;
}
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-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;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
top:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>

You can put another div arround with png shadow aligned on top, or you can use CSS multiple backgrounds (doesn't work on all browsers)

Chrome Firefox pixels are off CSS

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

How to I get pseudo-selectors to appear behind a transformed box?

I'm trying to implement the rotated box with a shadow found here: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
I'm using the HTML5 Boilerplate if that helps...
The problem is that whenever I try and implement that example myself, everything works fine up until I apply the rotation transform. At this point, the boxes created with the :before and :after pseudo-classes pop in front of the real box, and nothing I can do seems to get them further into the background.
Any ideas why this might be?
Here is my HTML:
<div class="container">
<div class="drop-shadow lifted middle">
<img src="images/polaroid-2.png" />
<p>1</p>
</div>
<div class="drop-shadow lifted middle">
<img src="images/polaroid-2.png" />
<p>2</p>
</div>
<div class="drop-shadow lifted rotated last">
<img src="images/polaroid-2.png" />
<p>3</p>
</div>
<div class="caption">
<p>Caption</p>
<div class="joinnow">Join Now</div>
</div>
</div>
Here is the set up css for the box:
.container {
position:relative;
z-index:1;
width:600px;
padding:20px;
margin:0 auto;
background:#FAF0D9;
}
.container:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;
font-size:0;
}
/* Shared styles */
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-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;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
And here is the code that is supposed to apply the rotation effect.
/* Rotated box */
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-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;
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-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;
}
Thanks so much for the help!