Making emboss buttons [closed] - html

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>

Related

Add shadow to a border

As you can see I've created a sideBar:
<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
<p>Content Div</p>
</div>
My css:
#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}
#content p {
margin-left: 20px;
}
Fiddle:
http://jsfiddle.net/of4dcp2u/1/
I've used some inner shadow. The only problem is that I can't get the shadow work in de border lines. The white borders don't have any shadow.
I don't want to use any images for buttons. Is there a solution for this problem?

Sam, Put shadow to the content div like this
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
-webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}

The box-shadow you have set to .button is going in the wrong direction. Use this code:
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}

Why my animated buttons not working in IE8 and How to conert it for IE8

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!

How do I get the box shadow to show up on my content-bg?

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

Pinterest Navigation Bar Box Shadow css

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

Bevel highlight with no additional markup

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