标签云

微信群

扫码加入我们

WeChat QR Code

What I am looking for:A way to style one HALF of a character. (In this case, half the letter being transparent)What I have currently searched for and tried (With no luck):Methods for styling half of a character/letterStyling part of a character with CSS or JavaScriptApply CSS to 50% of a characterBelow is an example of what I am trying to obtain.Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.UPDATE:Since many have asked why I would ever want to style half of a character, this is why. My city had recently spent $250,000 to define a new "brand" for itself. This logo is what they came up with. Many people have complained about the simplicity and lack of creativity and continue to do so. My goal was to come up with this website as a joke. Type in 'Halifax' and you will see what I mean.


Comments are not for extended discussion; this conversation has been moved to chat.

2019年05月23日37分31秒

They were asking "why" because they wanted to know why you would use CSS and not use SVG or an image editor. Nothing to do with the business decisions about their logo. As per your link to their logo, why didn't you just crop the X?

2019年05月24日37分31秒

Comments are not for extended discussion; this conversation has been moved to chat.

2019年05月23日37分31秒

This is very cool. It's worth noting that this technique breaks word-wrapping, white-space, and character-spacing CSS.

2019年05月24日37分31秒

As of right now, your solution is the easiest to implement for multiple characters, but still not 100% there.

2019年05月24日37分31秒

This has problems with text wrapping which is exhibited even in the latest fiddle. When one character wraps, it essentially splits into two. Should be a trivial fix, though.

2019年05月24日37分31秒

MathewMacLean Check this out: link :)

2019年05月23日37分31秒

Don't depend on jquery-latest.min.js, it can make your sites break without warning if jQuery is updated and the plugin does not work with the newer one. Instead: use a specific version and check compatibility when updating.

2019年05月23日37分31秒

You might want to edit your answer to not suggest using jquery-latest.js. As NielsBom mentioned, in the past it could break your site when it was updated. Since July of 2014, it won't do that but that is because it is locked at version 1.11.1 and will never be updated again.

2019年05月23日37分31秒

MathewMacLean our jobs would be so much easier if only IE would die and Firefox started using Webkit. :)

2019年05月23日37分31秒

DA Chrome doesn't use webkit anymore: wired.com/2013/04/blink

2019年05月24日37分31秒

WebKit has a history of rendering bugs that are almost IE6/IE7 levels of bizarre (you could even say that Safari and Chrome are the IE6 of the modern web), and behaving in ways that deviate from the standard for no particular reason. IE has been much better since version 9, so while the ancient versions ought to die already, I don't see any reason for the hate for its recent versions. And I certainly don't see why people support the idea of a WebKit/Blink monoculture (the comments here are probably in jest, but I've heard of people who seriously believe in it).

2019年05月23日37分31秒

That being said, background-clip: text is super awesome and they should consider it (or something similar like text-decoration-background) for a level 4 module.

2019年05月24日37分31秒

This is a far cleaner solution than the hacky libraries above, should be an accepted answer since text gradients are usable nowadays.

2019年05月24日37分31秒

This is neat, but the only issue is the content will be dynamic.

2019年05月24日37分31秒

Results vary depending on the font used. Plus calculating the width seems like a problem.

2019年05月24日37分31秒

MathewMacLean you can write a simple loop function in JS to accomplish the wrapping. I'm adding it to my answer now.

2019年05月23日37分31秒

MathewMacLean Where is the text coming from? wvandaal is right, you can wrap the text yourself.

2019年05月23日37分31秒

MathewMacLean here's an example: jsfiddle.net/CL82F/5

2019年05月23日37分31秒

Luky Vj: Is this account yours? You might want to consolidate all your posts into a single account so you don't run into roadblocks trying to edit your own posts.

2019年05月24日37分31秒

Yeah, in fact, I firstly posted with my old first account.. And I had to add an image, and I wasn't popular enough to post my image..But you're right, I will fix it as soon as possible !

2019年05月23日37分31秒

LukyVj: You can merge your accounts by following the instructions here: stackoverflow.com/help/merging-accounts

2019年05月24日37分31秒

LukyVj I updated your function by adding pointer-events:none to &:nth-child(2) - &:nth-child(5). This makes it so the text can only be highlighted once and you only get one copy of it. You can see it here: codepen.io/anon/pen/upLaj

2019年05月24日37分31秒

BTW, you can use 0.5 for the red colour stop, too.

2019年05月23日37分31秒

$('span').width() just returns the width of the first span it finds; it'd have to be something you did for each pair. Which gives me an idea ...

2019年05月23日37分31秒

This is quite similar to epascarello's example found at jsfiddle.net/9WWsd . As I told him, Your example is a step in the right direction, but, it would be a nightmare to use on a larger scale.

2019年05月24日37分31秒

MathewMacLean, I didn't see that. Why would it be a nightmare? How about this: jsfiddle.net/9wxfY/4

2019年05月23日37分31秒

When you go to implement more than one character it causes problems.

2019年05月24日37分31秒

MathewMacLean that's where the fabulous Lettering.JS comes in.

2019年05月23日37分31秒

Just played with Arbel solution What are the differences with Arbel's solution? It's hard to see if you only copy-pasted some code or improved it.

2019年05月24日37分31秒

This has the same issues that the others have though. This starts getting messy when you try to do it with more than one character.

2019年05月24日37分31秒

MathewMacLean I know :( saw that too. working on it now

2019年05月23日37分31秒

MathewMacLean fixed it, but not sure how clean the JQuery is now. Take a look

2019年05月23日37分31秒

MathewMacLean adding to the webkit version of things you could use a solution like this : jsfiddle.net/wLkVt/1

2019年05月23日37分31秒

MathewMacLean Fixed the error in my script. The reason for the error, was that I was taking the width of the very first element all the time, instead of the letters width.

2019年05月23日37分31秒

Already suggested in DA's answer.

2019年05月24日37分31秒