Does anyone know how to get the exact box shadow that appears on the bottom of the fixed position navbar on pinterest.com?
http://pinterest.com/
You might have used any developer tool (Chrome DevTools or Firebug) to find this out:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
Looking at the sites CSS styling in Chrome I got this segment of code for that bar:
#CategoriesBar {
position: absolute;
z-index: 101;
top: 44px;
right: 0;
left: 0;
text-align: center;
font-size: 13px;
color: #8C7E7E;
background-color: #FAF7F7;
border-top: 1px solid #CFCACA;
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
}
These 3 lines should help you out on your style:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
Related
How can I make a rectangle with long shadow like the image below using CSS?
Use this way:
#rectangle {
width: 150px;
height: 250px;
border: 2px solid black;
box-shadow: 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black,
6px 6px black,
7px 7px black,
8px 8px black,
9px 9px black,
10px 10px black;
}
<div id="rectangle"></div>
there.
Have you tried anything yet?
You can use a div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div and you can use box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - but you might need many many box shadows to get that smooth edge. Good luck!
example using linear-gradient
.box_volume {
width: 200px;
height: 300px;
background: linear-gradient(to top, #FFD700, #F0E68C);
box-shadow:
1px 0px rgb(320,163,35), 1px 1px rgb(192,167,7),
2px 1px rgb(319,162,34), 2px 2px rgb(191,166,6),
3px 2px rgb(318,161,33), 3px 3px rgb(190,165,5),
4px 3px rgb(317,160,32), 4px 4px rgb(189,164,4),
5px 4px rgb(316,159,31), 5px 5px rgb(188,163,3),
6px 5px rgb(315,158,30), 6px 6px rgb(187,162,2),
7px 6px rgb(314,157,29), 7px 7px rgb(186,161,1),
8px 7px rgb(313,156,28), 8px 8px rgb(185,160,0),
9px 8px rgb(312,155,27), 9px 9px rgb(184,159,0);
}
<div class="box_volume">
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
height: 160px;
width: 160px;
text-decoration: none;
text-transform: capitalize;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-width: 0px;
border-radius: 20px;
box-shadow: inset 0px -2px 1px rgba(0,0,0,0.8),
inset 0 2px 1px rgba(255,255,255,1);
margin: 15px 5px;
background: linear-gradient(top, #23b224, #23b224);
background: -webkit-linear-gradient(top, #23b224, #23b224);
background: -moz-linear-gradient(top, #23b224, #23b224);
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #23b224), color-stop(100%, #23b224));
The code above will produce the following result:
But what I want to achieve is something like this:
I want my buttons to appear like the buttons in the second picture. How to do it?
Try this and let me know....
input {
padding: 5px 30px;
border: 1px solid darkgreen;
border-radius: 4px;
-webkit-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
-moz-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
background-color: green;
color: white;
text-shadow: 1px 1px 1px black;
}
<input type=button>
Reference:-https://dev.opera.com/articles/beautiful-ui-styling-with-css3/
This is the demo with code
Click Here for Fiddle
This is Full Code with Css.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover { background: #C7FE0A; }
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px; bottom: -6px;
right: -6px; left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
</style>
</head>
<body>
<div class="example-wrapper clearfix">
<h3>Button Styles</h3>
<div class="demo-wrapper">
<a class="modern" href="#">Modern</a>
<a class="modern embossed-link" href="#">Modern embossed</a>
<a class="modern socle" href="#">Modern with socle</a>
</div>
</div>
</body>
</html>
I am trying to put animated button on my Page but when i open it through IE 8 its not working.Its working in Crome.Below is the piece of code:
JSP Page:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="mystyle.css" rel="stylesheet">
<title>JSP Page</title>
</head>
<body>
<button class="depth" type="button">✔</button>
<button class="stat" type="button">✔</button>
</body>
</html>
Css File(mystyle.css) :
html {
-webkit-tap-highlight-color: hsla(0,0,0,0);
tap-highlight-color: hsla(0,0,0,0);
}
body {
background-color: #363636;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)),
linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
background-position:0 0, 2px 2px;
background-size:4px 4px;
padding: 100px;
}
button.depth {
left: 20%;
margin: -40px;
position: absolute;
top: 20%;
}
button.stat {
left: 40%;
margin: -40px;
position: absolute;
top: 40%;
}
button:hover,
button:active {
outline: 0;
}
/* 3D Button */
button {
background: #444;
border: none;
border-radius: 80px;
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 8px hsla(0,0%,0%,.5),
inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
inset 0 1px 1px 8px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 10px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
color: #303030;
cursor: pointer;
font: bold 40px/85px sans-serif;
height: 80px;
padding: 0;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
width: 80px;
}
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
}
button:active {
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 7px hsla(0,0%,0%,.5),
inset 0 5px 15px 7px hsla(0,0%,0%,.15),
inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
inset 0 1px 1px 7px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.1),
inset 0 30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 5px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
line-height: 86px;
}
Please suggest me some method to overcome this issue
In this case CSS3 PIE maybe helpful. as most of CSS3 properties are not supported below IE9
Please find useful link
http://css3pie.com/documentation/getting-started/
in CSS wherever there is CSS3 incompatible property in IE8 you need to add style as
behavior: url(PIE.htc /*path to htc file*/);
example
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
behavior: url(PIE.htc);
}
sidenote: its recommended that .htc file should be use only for degraded browsers and not for modern browsers you may use conditional comment in this case
Hope this helps!
I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
Do you see the thin bevel highlight on top? How do you do this in CSS with only one HTML tag? I'm guessing it has something to do with outline. This is what I have so far without the bevel:
<a class="callToAction">Click here</a>
.callToAction {
border: 1px solid #000;
-moz-border-radius: 0.4em;
background: -moz-linear-gradient(
top,
#ccc,
#999
);
}
To create a bevel you must use a combo of the CSS3 radius and shadow attributes. To get the highlight when hovering over a button you must use the pseudo-selector :hover.
The Button Code from http://www.whitedogdesigngroup.com/blog/entry/a_better_button_with_css3/
callToAction {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 -2px #791c13;
-moz-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
-webkit-box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
box-shadow: 0 1px 1px #ddd, 0 -1px 1px #555;
}
callToAction:hover {
margin-bottom: 1px;
height: 29px;
position: relative;
top: 1px;
color: #eee !important;
-moz-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
-webkit-box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
box-shadow: 0 1px 1px #eee, 0 -2px 1px #555;
}
If you need further explanation...
Explanation of CSS3 borders: http://doctype.tv/borders
Explanation of CSS3 shadows: http://doctype.tv/css3
Just found out that you can specify a shadow to be an inset by inspecting the source of http://html5doctor.com/you-can-still-use-div/:
.inset {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 0 2px rgba(255, 255, 255, 0.3) inset,
0 1px 2px rgba(0, 0, 0, 0.29)
}