一本大道香蕉久在线播放29

    <em id="ii1f9"></em>

    <ruby id="ii1f9"><p id="ii1f9"><tt id="ii1f9"></tt></p></ruby>
      <li id="ii1f9"></li>
      1. <rp id="ii1f9"></rp>

        <s id="ii1f9"><strike id="ii1f9"><u id="ii1f9"></u></strike></s>

        1. <tbody id="ii1f9"><center id="ii1f9"></center></tbody>
        2. Menu

          将半色调效果与代码结合的示例

          <返回列表

          半色调图案,那些浓密的斑点图案,是印刷品和网页设计的支柱。同时传统上作为一种在印刷品中忠实再现图像的手段,它也成为一种独特的风格。

          今天,半色调图案被用作背景,或者为图像提供一些超现实的特效。而且,随着CSS和JavaScript的发展,设计者也找到了一种将效果集成到代码中的方法。结果是惊人的。

          让我们看看如何通过代码实现半色调的一些示例。正如您将看到的,有许多不同的方法和技术将这个经典的模式带到web上。

          半色调您的猫(或非猫)照片

          这可能是最熟悉的半色调实现。它包括将效果添加到现有照片(在本例中是一只猫)。但是这个片段也是完全可定制的。例如,可以将点替换为表情符号或文本。此外,还可以更改每个点的大小。而且,是的,你可以把猫换成一张脸——但为什么呢?

          看到钢笔了吗
          中间调ycw提供

          按半色调

          这里有一个非常有创意的使用半色调。有一个微妙的模式显示在这个按钮上,稍微粗体悬停效应. 但点击会打开一个高对比度的图案,肯定会吸引你的注意力。

          看到钢笔了吗
          半色调按钮泰勒·亨特

          泄露秘密

          这个手电筒这种效果在最近一段时间很流行。在这里,它与半色调模式相结合,“照亮”隐藏文本。这是一个有趣的互动,模式带来了一点复古/野蛮的氛围。

          看到钢笔了吗
          显示隐藏文本泰勒·德雷特

          以更微妙的语气

          没有法律规定半色调一定要响亮,这个片段就是证据。半色调效果完美地融合到一个交叉线图案中。结果是独特而微妙的。使用纯CSS构建的奖励点数。

          看到钢笔了吗
          半色调交叉图案德文·普莱斯

          远距悬停效果

          这是科幻片里的片段。一张蓝底黑的半色调照片从屏幕的另一边凝视着我们。把你的光标放在上面,图像的一部分就会消失。

          看到钢笔了吗
          半色调像差颗粒状的吉尔

          无BS视差

          另一个超现实的效果,这张照片的特点是令人目眩的彩色点阵列。更重要的是,移动光标会带来一个3D视差效果,在主图像上方显示一个微妙的轮廓。增加的维度使效果更加有趣。

          看到钢笔了吗
          半色调视差作者:埃里克·杰克逊·伍德

          二人一组

          多亏了CSS混合模式,半色调效果可以添加到任何东西。在这个例子中,一个美丽的混合放置在各种照片的顶部。悬停在其中一个上面就会显露出它的本色。这是一个非常实际的用途,很有说服力,但又不过分。

          看到钢笔了吗
          CSS混合模式作者:Jos van Weesel

          比你的平均文本阴影

          让我们用另一个实际用例来结束这件事。这里我们有一些基本的轮廓排版利用偏移阴影。前两个示例使用纯色阴影,效果很好。但第二组的特点是半色调图案,这提供了一个更艺术的感觉。

          看到钢笔了吗
          笔划、阴影半色调效果按标记

          创新模式

          将代码与经典图像效果相结合的伟大之处在于它打开了一个全新的可能性世界。当然,我们可以在设计元素中添加半色调图案,但为什么要到此为止呢?

          设计师们正在为这些效果找到新的聪明的用途。在上面的代码片段中,半色调的使用既传统又创新。旧的界限只有在我们想要的时候才存在。

          想看看更多的半色调图案的例子吗?看看我们的CodePen系列用于其他创造性用途


          最新网站设计资讯
          企业网站建设

          企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

          联系我们

          电话:18868949445QQ:1611387063 邮箱:[email protected]

          联系云轩总监微信

          微信
          一本大道香蕉久在线播放29