• 0

[CSS] How do I achieve this effect?

Asked by heffer86,

 Share

Question

11 answers to this question

Recommended Posts

  • 0
Grand Master

BGM

Posted
Posted
I have the this menu on my site: http://www.stunicholls.com/menu/pro_dropdown_2.html. I am wondering how they achieve the effect when you hover and the Background image will dynamically change width depending on the length of the text.

javascript :)

  • 0
Mentor

GreenMartian

Posted
Posted

I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

post-69069-1227187599.png

  • 0
Grand Master

Kudos Veteran

Posted
  • Veteran
Posted
I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

(Y) Great answer!

  • 0
Proficient

rson451

Posted
Posted
There's a pretty good article about this (called the "sliding doors technique") at A List Apart:

http://www.alistapart.com/articles/slidingdoors/

Very similar, but not quite the same. That technique uses two images where the above mentioned one uses only one larger image. Same idea though :)

  • 0
Community Regular

heffer86

Posted
  • Author
Posted
I don't think he meant the menu and all the javascript involved. Just the background-changing during hover.

It goes somewhere along these lines.. (gross oversimplification from the original CSS on the site, but you should get the idea)

a { padding-left: 12px; }
a span { padding-right:12px; }
a:hover { background: url('bg.jpg') top left; }
a:hover span { background: url('bg.jpg') top right; }

<a href="something"><span>Hi There</span></a>

This image might help a bit:

Thanks! That is a very good explanation of the effect I am trying to achieve.

  • 0
Community Regular

heffer86

Posted
  • Author
Posted

I implemented the sliding door effect. It is working great except the hover don't work right yet. The right corner is rounded, but the left one isn't. Any ideas?

post-236909-1228921306.jpg

post-236909-1228921313.jpg

My html markup is:

<div id="headerTabs">
<ul>
<li><a href="#>Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>

CSS

#headerTabs {
	background-image:url(bg_tabs.gif);
	Z-INDEX: 10;
	BORDER-BOTTOM: 0px;
	POSITION: relative;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	PADDING-LEFT: 20px;
	WIDTH: 967px;
	PADDING-RIGHT: 0px;
	HEIGHT: 22px;
	MARGIN-LEFT: auto;
	BORDER-TOP: 0px;
	TOP: -44px;
	MARGIN-RIGHT: auto;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}
#headerTabs UL {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px;
	PADDING-LEFT: 0px;
	WIDTH: 987px;
	PADDING-RIGHT: 0px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}
#headerTabs LI {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_right.gif) #333 no-repeat right top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}

#headerTabs LI:hover {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_left_hov.gif) #333 no-repeat left top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}


#headerTabs LI.selected {
	BORDER-BOTTOM: 0px;
	BORDER-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 1px;
	PADDING-LEFT: 0px;
	/*WIDTH: 83px;*/
	PADDING-RIGHT: 0px;
	DISPLAY: block;
	BACKGROUND: url(tab_right_sel.gif) #333 no-repeat right top;
	FLOAT: left;
	FONT-SIZE: 18px;
	BORDER-TOP: 0px;
	BORDER-RIGHT: 0px;
	PADDING-TOP: 0px
}

#headerTabs LI A {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #333;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_left.gif) no-repeat left top;

}

#headerTabs LI A:hover {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #333;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_right_hov.gif) no-repeat right top;

}


#headerTabs .selected A {
	TEXT-ALIGN: center;
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	DISPLAY: block;
	COLOR: #fff;
	FONT-SIZE: 11px;
	FONT-WEIGHT: normal;
	TEXT-DECORATION: none;
	PADDING-TOP: 3px;
	background:url(tab_left_sel.gif) no-repeat left top;

}

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Microsoft releases major feature updates for stock Windows 11 apps

      By PurSpyk · Posted

      Anyway to download these versions without being on the Experimental builds?
    • Microsoft about to radically change how often your Edge browser updates

      By testman · Posted

      Nothing is stopping you from continuing with your testing cadence. If updates are released every 2 weeks instead of 4, and you test once every 4 weeks, the exact same amount of patches will still be available for you in those 4 weeks. For example: Before 4th week - patch 1, 2, 3, 4 After 2nd week - patch 1 and 2 4th week - patch 3 and 4 Still the same amount after 4.
    • Microsoft about to radically change how often your Edge browser updates

      By testman · Posted

      Everyone else has said it. I'm gonna say it - you don't know what you're talking about. I do. I have two laptops. One work, one personal. I have access to two more laptops - both personal. At home I manually update my personal laptop when I see on Neowin that there is an update - I carry on and only apply the updates when I am ready. My work one only updates when my workplace decides to send it - I carry on and only apply the updates (when they actually arrive, which is usually days after the release) when I switch off the laptop at the end of the day as usual. The two other personal laptops only get updated when I get to it which is rarely - the people who own them carry on using them until I get to it and update them. All of the browsers on all laptops are configured to restore the tabs when launched. Google and Microsoft have changed from 6 weeks to 4, and it looks like it's going to move to 2. None of these changes affect how any of these browsers on the laptops are used. Not one jot. My advice to you is stop panicking whenever you see an update. Just carry on with what you're doing. This even benefits you in a way - from your comment you sound like you don't like the changes or the frivolous new features - great - then carry on as before!
    • Lethal fake phone chargers are still being sold on Amazon and eBay, UK watchdog warns

      By Brian Miller · Posted

      AMAZON needs to take total accountability for this.
    • Windows Server gets DNS over HTTPS (DoH) support

      By binaryzero · Posted

      Server Summit had a heap of announcements, ADCS changes are baller.

  • Recent Achievements

    • Week One Done
      Jeroen Wilms earned a badge
      Week One Done
    • Week One Done
      rolfus earned a badge
      Week One Done
    • One Month Later
      Leroy Jethro Gibbs earned a badge
      One Month Later
    • Conversation Starter
      flexorcist earned a badge
      Conversation Starter
    • One Month Later
      AndreaB earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      +Edouard
      198
    3. 3
      PsYcHoKiLLa
      138
    4. 4
      ATLien_0
      90
    5. 5
      Steven P.
      80
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!