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 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2012
    Posts
    2
    Member #
    33816
    Hello! I am trying to design my website where the font changes depending on the background. Similar to what I have attached as the image. I have a white graphic on the left hand side of my webpage, and I want the links to go over it but invert from white to black or black to white depending on what is behind it. Is this possible to do?

    Thank you so much to anyone that can help me!Screen Shot 2012-11-14 at 5.19.34 PM.png

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Not with plain text for the simple reason that plain text is relative and resizeable. To do what you want, the simplest way is to create the "off" and "over" graphics in Photoshop and use CSS image swapping to pull off the effect.

    http://brassblogs.com/css/css-image-swap

    There are more complex methods, but this would suffice for now.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Will require some not entirely supported CSS3, but here's one idea:
    Overlay two of the same link on top of one another. The top set will be in its own div that has black text, and the div is tall and narrow with the white bg. Then, use CSS transform rotate to rotate it as you have it in the image you posted. Set overflow:hidden on the top set, and rotate the text opposite what you rotated the div to put it back straight. Then, the bottom set has white text against the black page bg. In browsers that don't support CSS transform, the div just won't be angled.
    Do the sizing in the CSS yourself, but here's the basic gist:
    HTML Code:
    <nav class="top"><ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    </nav>
    <nav class="bottom"><ul>
    <li>HOME</li>
    <li>PORTFOLIO</li>
    </nav>
    Code:
    .top, .bottom{
     position:absolute;
     top:0;
    }
    .top{
     background:white;
     color:black;
     overflow:hidden;
     transform:  rotate(-4deg);
     /*don't forget vendor prefixed versions*/
     width: /*something narrow*/;
     z-index:10;
    }
    .top li{
     transform:  rotate(4deg);
     /*don't forget vendor prefixed versions*/
    }
    .bottom{
     background:black;
     color:white;
     z-index:0;
    }
    Tweak it from there, but that's the basic idea.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Nov 2012
    Posts
    2
    Member #
    33816
    Thanks! I'll give that a try then.

  6. #5
    Senior Member kralcx's Avatar
    Join Date
    Jan 2010
    Location
    3rd Planet from the Sun
    Posts
    140
    Member #
    20799
    Liked
    18 times
    Keep your plain text! For individual letter control use the jQuery lettering.js. Then you would merely change the color of the "H' and the "P".


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
  •  

Search tags for this page

bootstrap invert colors
,
css invert color
,
css invert color on background
,

css invert text color

,
css3 set color based on background color
,

html invert color

,

invert background color based on image below

,
invert text based on background color
,
invert text colourhtml
,
wpf invert color based on background
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:03 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com