What I am looking for:
设置一个 HALF 字符的方法 . (在这种情况下,一半字母是透明的)
What I have currently searched for and tried (With no luck):
-
为一半字符/字母设置样式的方法
-
使用CSS或JavaScript设置角色的一部分
-
将CSS应用于角色的50%
以下是我想要获得的一个例子 .
是否存在CSS或JavaScript解决方案,或者我将不得不诉诸图像?我宁愿不去图像路线,因为这个文本最终会动态生成 .
UPDATE:
因为很多人都问过为什么我想要为一半角色设计风格,这就是原因所在 . 我的城市最近花了25万美元为自己定义一个新的"brand" . 他们想出了这个 logo . 许多人抱怨简单性和缺乏创造力,并继续这样做 . 我的目标是把这个 website 作为一个笑话 . 输入'Halifax',你会明白我的意思 . :)
18 回答
如果你对此感兴趣,那么Lucas Bebber的Glitch是一个非常相似和超酷的效果:
使用简单的SASS Mixin创建
Chris Coyer's CSS Tricks和Lucas Bebber's Codepen page的更多细节
我刚刚玩@ Arbel的解决方案:
这可以通过CSS
:before
选择器和content property value
来实现 .>> See on jsFiddle
我刚刚完成了插件的开发,每个人都可以使用它!希望你会喜欢它 .
在GitHub上查看项目 - 查看项目网站 . (所以你可以看到所有的分割风格)
用法
首先,确保包含
jQuery
库 . 获取最新jQuery版本的最佳方法是更新头标记:下载文件后,请确保将它们包含在项目中:
标记
您所要做的就是将类
splitchar
,然后是包含文本的元素所需的样式 . 例如完成所有这些后,只需确保在文档就绪文件中调用jQuery函数,如下所示:
自定义
为了使文本看起来完全符合您的要求,您所要做的就是应用您的设计:
而已!现在你已经设置了
Splitchar
插件 . 关于它的更多信息,请点击http://razvanbalosin.com/Splitchar.js/ .FWIW,这是我对此的看法,仅使用CSS:http://codepen.io/ricardozea/pen/uFbts/
几点说明:
我这样做的主要原因是测试自己,看看我是否能够完成造型的一半角色,同时实际上为OP提供了有意义的答案 .
我知道这不是一个理想的或最具可扩展性的解决方案,而且这里人们提出的解决方案对于“真实世界”场景来说要好得多 .
我创建的CSS代码基于我想到的第一个想法和我个人对问题的处理方法 .
我的解决方案仅适用于X,A,O,M等对称字符 . **它不适用于不对称字符,如B,C,F,K或小写字母 .
**然而,这种方法创造了非常有趣的'shapes',具有不对称字符 . 尝试将X更改为K或小写字母,如CSS中的h或p :)
HTML
SCSS
现在在GitHub上作为插件!
随意分叉和改进 .
演示|下载Zip | Half-Style.com(重定向到GitHub)
单个字符
Pure CSS
JavaScript用于跨文本或多个字符的自动化
为盲人或视障人士的屏幕阅读器保留文本可访问性
第1部分:基本解决方案
Demo: http://jsfiddle.net/arbel/pd9yB/1694/
这适用于任何动态文本或单个字符,并且都是自动化的 . 您需要做的就是在目标文本上添加一个类,其余的都要处理 .
此外,对于盲人或视障人士的屏幕阅读器,保留了原始文本的可访问性 .
Explanation for a single character:
纯CSS . 您需要做的就是将
.halfStyle
类应用于包含您想要半个样式的字符的每个元素 .对于包含该字符的每个span元素,您可以创建一个数据属性,例如
data-content="X"
,并且在伪元素上使用content: attr(data-content);
,因此.halfStyle:before
类将是动态的,您不需要为每个实例对其进行硬编码 .Explanation for any text:
只需将
textToHalfStyle
类添加到包含文本的元素即可 .(JSFiddle demo)
第2部分:高级解决方案 - 独立的左右部分
With this solution you can style left and right parts, individually and independently .
一切都是一样的,只有更高级的CSS才能实现 .
(JSFiddle demo)
第3部分:混合匹配和改进
现在我们知道什么是可能的,让我们创建一些变化 .
-水平半部件
没有文字阴影:
文本阴影的可能性每半个部分独立:
(JSFiddle demo)
-垂直1/3零件
没有文字阴影:
文本阴影的可能性为每1/3部分独立:
(JSFiddle demo)
-水平1/3零件
没有文字阴影:
文本阴影的可能性为每1/3部分独立:
(JSFiddle demo)
-HalfStyle由@KevinGranger改进
(JSFiddle demo)
@SamTremaine
-PelelingStyle对HalfStyle的改进
(JSFiddle demo和samtremaine.co.uk)
第4部分:准备 生产环境
可以在同一页面上的所需元素上使用自定义的不同半风格样式集 . 您可以定义多个样式集并告诉插件使用哪个样式集 .
该插件在目标
.textToHalfStyle
元素上使用数据属性data-halfstyle="[-CustomClassName-]"
,并自动进行所有必要的更改 .因此,只需在包含文本的元素上添加
textToHalfStyle
类和数据属性data-halfstyle="[-CustomClassName-]"
. 该插件将完成剩下的工作 .CSS样式集的类定义也与上面提到的
[-CustomClassName-]
部分匹配,并且链接到.halfStyle
,所以我们将.halfStyle.[-CustomClassName-]
(JSFiddle demo)
我最近可以得到:
演示:http://jsfiddle.net/9wxfY/2/
这是一个只使用一个 Span 的版本:http://jsfiddle.net/9wxfY/4/
是的,你可以只用一个字符,只用CSS .
但是,仅限Webkit(和Chrome):
http://jsbin.com/rexoyice/1/
在视觉上,所有使用两个字符的示例(通过JS,CSS伪元素或只是HTML)看起来很好,但请注意,所有这些都会向DOM添加可能导致可访问性的内容 - 以及文本选择/剪切/粘贴问题 .
Limited CSS and jQuery Solution
我不确定这个解决方案有多优雅,但它将所有内容减少到一半:http://jsfiddle.net/9wxfY/11/
否则,我已经为您创建了一个很好的解决方案......您需要做的就是为您的HTML提供:
Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/
至于CSS,它非常有限......你只需要将它应用到
:nth-child(even)
JSFiddle DEMO
我们只使用CSS伪选择器来做到这一点!
此技术适用于动态生成的内容和不同的字体大小和宽度 .
HTML:
CSS:
要包装动态生成的字符串,可以使用如下函数:
您可以使用以下代码 . 在这个例子中,我使用了
h1
标签并添加了一个属性data-title-text="Display Text"
,它将在h1
标签文本元素上显示不同的颜色文本,这将生成半色调文本,如下例所示这是一个丑陋的画布实现 . 我尝试了这个解决方案,但结果比我预期的要糟糕,所以无论如何它都在这里 .
如果您愿意,也可以使用SVG执行此操作:
http://codepen.io/nicbell/pen/jGcbq
http://experimental.samtremaine.co.uk/half-style/
你可以将这段代码撬开来做各种有趣的事情 - 这只是我的同事和我昨晚想出来的一个实现 .
如此短的文字怎么样?
如果您使用循环执行某些操作,使用JavaScript重复这些字符,它甚至可以用于更长的文本 . 无论如何,结果是这样的:
一个很好的WebKit解决方案,利用
background-clip: text
支持:http://jsfiddle.net/sandro_paganotti/wLkVt/另一个仅限CSS的解决方案(如果您不想编写特定于字母的CSS,则需要数据属性) . 这个更全面的工作(测试IE 9/10,Chrome最新和FF最新)
它可能是无关紧要的,也许不是,但不久前,我创建了一个jQuery函数,它可以执行相同的操作,但是是横向的 .
我叫它"Strippex" For 'stripe' 'text',demo:http://cdpn.io/FcIBg
我不是说这是任何问题的解决方案,但我已经尝试将css应用于一半的角色,但横向,所以这个想法是一样的,实现可能是可怕的,但它的确有效 .
啊,最重要的是,我很开心创造它!