Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member sopiaz57's Avatar
    Join Date
    Sep 2003
    Posts
    41
    Member #
    3058
    If you goto

    http://www-us.computershare.com/inve...ate.asp?bhjs=1

    and look at the grey/blue navigation, how did they do this?? the curved corner is neat

    thanks
    "It's very important not to embellish on your order. No extraneous comments. No questions. No compliments."
    - Jerry, in "The Soup Nazi"

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    They did it with a CSS background image, I imagine.

  4. #3
    Member Skotster's Avatar
    Join Date
    Jan 2004
    Posts
    43
    Member #
    4675
    i get a 404 on the link

    to get curved edges though, in ps
    1. go to Chanels
    2. create new chanel
    3. rectangular marquee, fill white
    4. Guassin blur to get disered roundness (i know it's blurry, that will be fixed in next step)
    5. Ctrl+L (Cmd+L for Mac users)
    6. Drag both sides toward the center (the top with all the vertical lines, not the botom with the gradient) until the image is crisp again

    hope that helped
    Rembember, You're Unique
    Just Like Everybody Else

  5. #4
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    But in deviantart they have that but for the buttons... HTH do they do that?
    http://www.deviantart.com/
    See the "login,etc" buttons

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Not really sure exactly what yall are seeing in those sites (in terms of them looking orgional).. but in the computershare site that could be nothing more then a small 5 pixle image with the rounded corner set as the background image tucked in the corner of the <li> tags. In fact here is the css that shows that:
    Code:
    #secNav ul li a {
    	background: #ADADAD;
    	width:145px;
    	padding:4px 0 7px 9px;
    	margin:0;
    	color:#fff;
    	text-decoration:none;
    	display:block;
    	background-image:url("/Themes/CPU/Img/tabCnr.gif");
    	font:10px verdana;
    	background-position:0px;
    }
    Notice the background-image property.

    And for the deviant art, this is the bit of css that gives the form buttons that look
    Code:
    input.button {
    	border:1px solid #000;
    	padding:0 .1em;
    	cursor:pointer;
    	color:#000;
    	background-color:#A6B0A6;
    	border-radius:.4em
    }
    Notice the 'border-radius' property.


  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I don't see where they're using border-radius on deviantart, but it's a cool CSS effect. How is compatibility with it, though?

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    It is not officially supported yet. Its part of the upcomming CSS3 specification. Some browsers like mozilla already support some of it.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:56 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com