Forums

cyneWATCH

-webkit-box-shadow:inset
-moz-box-shadow:inset
box-shadow:inset

don't seem to work in Safari 5.1, though

-webkit-box-shadow:
-moz-box-shadow:
box-shadow:

does work.

Any other way to have an "inner shadow"?

chrisburton

@cyneWATCH - Did you actually add more code than just inset? Where are the colors?

Tip: http://css-tricks.com/snippets/css/css-box-shadow/

cyneWATCH


display: block;
	margin: 0 0 20px;
	width: 122px;
	height: 35px;
	border-right: solid 1px #666666;
	text-align: center;
	font-size: 13px;
	color: #eeeeee;
	font-family: "Myriad Pro", Helvetica, sans-serif;
	line-height: 35px;
	float: left;

	text-shadow:
	0px -1px 0 #444444,
	0px -1px 0 #444444,
	0px 0px 0 #444444,
	0px 0px 0 #444444;
	
	-webkit-border-top-left-radius: 4px;
	-moz-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-khtml-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	-khtml-border-bottom-left-radius: 4px;
	
	background-image: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#878788), to(#676767));
	background-image: -webkit-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);
	background-image: -moz-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);
	background-image: -ms-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);
	background-image: -o-linear-gradient(top, #787878, #777777 49%, #565656 50%, 777777);

	-moz-box-shadow:inset 10px 10px 10px #888888;
	-webkit-box-shadow:inset 10px 10px 10px #888888;
	box-shadow:inset 10px 10px 10px #888888;

	-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px;

joshuanhibbert

The second set of box-shadow rules overrides the first, and they don't have inset declared. Also, no need for the first set of rules as browsers that support box-shadow support rgba/hsla.

cyneWATCH

That's weird; because it did what I wanted in Safari on Snow Leopard.
I guess I could add a class for the insets. Would that work?

chrisburton

@cyneWATCH - If you'd like multiple box-shadows on one element, use a comma.
You can also remove -webkit-border-radius as webkit supports non-prefix.

cyneWATCH

ok thanks

chrisburton

@cyneWATCH - does that solve your issue?

cyneWATCH

yes thank you. You've helped me again.

treehouse : what would you like to learn today?

Forums

box-shadow:inset doesn't work in Safari 5.1?