Comments on: Adobe-like Arrow Headers http://css-tricks.com/adobe-like-arrow-headers/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 23 May 2013 06:28:23 +0000 hourly 1 http://wordpress.org/?v=3.5.1 By: Robert http://css-tricks.com/adobe-like-arrow-headers/#comment-141493 Robert Wed, 11 Jan 2012 13:05:05 +0000 http://css-tricks.com/?p=15624#comment-141493 @Chris Morgan
You’re my hero! I was having the firefox anti aliasing issue when I was creating a CSS speech bubble. I couldn’t figure out for the life of me why firefox was adding extra lines. Using rgba(255,255,255,0) did the trick!

]]> By: T.J. Crowder http://css-tricks.com/adobe-like-arrow-headers/#comment-138812 T.J. Crowder Tue, 03 Jan 2012 11:09:20 +0000 http://css-tricks.com/?p=15624#comment-138812 @Ludwig: The demo page doesn’t degrade nicely on IE6 at all, the links end up below the banners and just generally things don’t look good. But if you’re designing for IE6, you know you’re facing some challenges. :-) Fortunately, most people don’t have to design for IE<8 anymore, and even big corporations and government departments are finally phasing in at least IE8 so even that niche will soon be free of the IE6/7 shackles. Designers for sites targeting China, though, look like still being stuck with them a while longer. But we’re nearly there!

]]> By: Jack Keller http://css-tricks.com/adobe-like-arrow-headers/#comment-137152 Jack Keller Tue, 27 Dec 2011 18:58:16 +0000 http://css-tricks.com/?p=15624#comment-137152 I have to say, I truly dig this sort of stuff. @Paul does it fallback gracefully in IE8? I’d have to fire up a VM to check that out for sure but I’m certain that could be handled through conditionals, or maybe even employing Modernizer?

]]> By: Paul http://css-tricks.com/adobe-like-arrow-headers/#comment-136690 Paul Mon, 26 Dec 2011 08:58:22 +0000 http://css-tricks.com/?p=15624#comment-136690 FYI

The demo doesn’t work in IE8
( it’s sad but true)

]]> By: Chris Morgan http://css-tricks.com/adobe-like-arrow-headers/#comment-136004 Chris Morgan Fri, 23 Dec 2011 13:15:00 +0000 http://css-tricks.com/?p=15624#comment-136004 See my comment below about transparent and how it’s the wrong value. Setting the border-style to “inset” is the wrong solution.

]]> By: cnwtx http://css-tricks.com/adobe-like-arrow-headers/#comment-135712 cnwtx Thu, 22 Dec 2011 15:39:17 +0000 http://css-tricks.com/?p=15624#comment-135712 That difference gets much bigger on a internet connection like mine, at 0.6 mbps.

]]> By: Tapiochre http://css-tricks.com/adobe-like-arrow-headers/#comment-135653 Tapiochre Thu, 22 Dec 2011 11:45:19 +0000 http://css-tricks.com/?p=15624#comment-135653 The following may not be as neat but it provides a gradient arrow. Is this any use to anyone?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Web Developer">
	<!-- Date: 2011-12-22 -->
	<style>
	
	* {margin:0; border:0; padding:0}
	
	.left-arrow-bottom {
	  border-color: transparent transparent #cacaca #cacaca;
	  border-style: solid;
	  border-width:5px;
	  width:0;
	  height:0;
	}
	
	.left-arrow-top {
	  border-color: #cacaca transparent transparent #cacaca;
	  border-style: solid;
	  border-width:5px;
	  width:0;
	  height:0;
	}

	.link-left{
		float:left;
		width:8px;
		margin-left:2px;
		}
		
	.link{
		float:left;
		color:white;
		margin-top:8px;
		background-color:transparent;
		background-image:url("images/vgradient.gif");
		background-position:2px;
		background-repeat: y-repeat;
		width:120px;
		}

	.link-right{
		float:right;
		width:8px;
		}
		
	.button {
		background-color:transparent;
		margin-left:2px;
		padding-left:2px;
		padding-right:4px;
		}
	</style>
</head>
<body bgcolor="#cacaca">
<div class="link">
	<div class="link-left">
		<div class="left-arrow-top"> </div>
		<div class="left-arrow-bottom"> </div>
	</div>
	<span class="button">Home</span>
	</div>
</div>
<div class="link">
	<div class="link-left">
		<div class="left-arrow-top"> </div>
		<div class="left-arrow-bottom"> </div>
	</div>
	<span class="button">About Us</span>
	</div>
</div>
<div class="link">
	<div class="link-left">
		<div class="left-arrow-top"> </div>
		<div class="left-arrow-bottom"> </div>
	</div>
	<span class="button">Contact</span>
	</div>
</div>
</body>
</html>
]]> By: Amos Vryhof http://css-tricks.com/adobe-like-arrow-headers/#comment-135651 Amos Vryhof Thu, 22 Dec 2011 11:44:55 +0000 http://css-tricks.com/?p=15624#comment-135651 Try changing the border style to “inset” on the transparent sides of the element.

]]> By: Tapiochre http://css-tricks.com/adobe-like-arrow-headers/#comment-135640 Tapiochre Thu, 22 Dec 2011 10:49:42 +0000 http://css-tricks.com/?p=15624#comment-135640 As far as gradients go couldn’t you make the arrow transparent and the none arrow elements white then place it in a div with a background gradient? I’m looking into this myself, and really liked your example. Thanks

]]> By: Tallowman http://css-tricks.com/adobe-like-arrow-headers/#comment-135624 Tallowman Thu, 22 Dec 2011 09:51:36 +0000 http://css-tricks.com/?p=15624#comment-135624 Nice touch. Added your site to my morning coffee list :)

]]>