霜染枫丹 发表于 2025-12-8 22:00

套用马老师代码制作标题图

本帖最后由 霜染枫丹 于 2025-12-9 01:19 编辑 <br /><br /><style>
    /* 标题容器：包含正副标题和原有图形 */
    .title-container {
      width: 800px;
      margin: 30px auto;
      text-align: center;
    }
   /* 正标题样式 */
    .main-title {
      font: bold 2.5em sans-serif;
      color: #333;
      margin: 0 0 10px 0;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    }
    /* 副标题样式 */
    .sub-title {
      font: 1.2em sans-serif;
      color: #666;
      margin: 0 0 20px 0;
      letter-spacing: 2px;
    }
    /* 原有图形样式保持不变 */
    .txtbox {
      margin: 20px auto;
      width: 740px;
      height: 300px;
      color: #eee;
      text-shadow: 1px 1px 2px silver;
      background: linear-gradient(36deg, #1a237e 50%,#90caf9 50.5%,#90caf9 0);
      border: 1px solid gray;
      font: bold 4em sans-serif;
      display: grid;
      place-items: center;
    }
    .txtbox p {
      mix-blend-mode: difference;
    }
</style>

<!-- 标题容器：包含正副标题和图形 -->
<div class="title-container">
    <!-- 正标题 -->
    <h1 class="main-title">人生哲理系列</h1>
    <!-- 副标题 -->
    <h2 class="sub-title">大道至简 · 黑白分明</h2>
    <!-- 原有图形 -->
    <div class="txtbox">
      <p>自古黑白两分明</p>
    </div>
</div>

霜染枫丹 发表于 2025-12-8 22:08

这套代码对我来说就是标题模板，我最喜欢的是文字混合效果，可以根据需要改变颜色，很直观地看到标题的渲染是否符合心中想的结果，简捷可靠。混合模式会让文字颜色与背景进行“差异”计算：在深色背景上 → 文字显示为浅色，在浅色背景上 → 文字显示为深色，在分界线上 → 会产生过渡效果。这些不需要ps的使用，太好用了！！我经常需要制作标题，从不知道还可以这样。感谢马老师，这个一定要收藏好。

红影 发表于 2025-12-8 23:07

枫丹的配色也很好呢，很赞{:4_187:}

霜染枫丹 发表于 2025-12-8 23:26

本帖最后由 霜染枫丹 于 2025-12-8 23:29 编辑

红影 发表于 2025-12-8 23:07
枫丹的配色也很好呢，很赞
谢谢红影的鼓励！这台模板可以随意变化，太奇妙了！他山之石可以攻玉，我在这里专门捡奇石异宝抱回家。很感谢马老师的分享！我经常做ppt,还有视频的开场，凡是需要文字的地方都可以使用，真是好东东！！{:4_204:}{:4_190:}

樵歌 发表于 2025-12-9 06:47

感谢让大姐感谢的@马黑黑 老师{:4_173:}

樵歌 发表于 2025-12-9 06:48

还真是转折界线特别分明，大姐学得很快，大学霸。{:4_190:}

偶然~ 发表于 2025-12-9 09:43

{:4_199:}

霜染枫丹 发表于 2025-12-9 11:20

樵歌 发表于 2025-12-9 06:47
感谢让大姐感谢的@马黑黑 老师

马老师的这组代码构思精巧，简捷好用。谢小樵哥的支持，上午好！{:4_190:}{:4_204:}

霜染枫丹 发表于 2025-12-9 11:20

偶然~ 发表于 2025-12-9 09:43


感谢偶然的临帖鼓励，上午好！{:4_204:}

梦江南 发表于 2025-12-9 11:30

漂亮，学得真快。{:4_199:}

霜染枫丹 发表于 2025-12-9 11:33

梦江南 发表于 2025-12-9 11:30
漂亮，学得真快。

谢梦江南的支持，我有时间挥霍，就能换点空间。祝你冬安！{:4_187:}

偶然~ 发表于 2025-12-9 11:39

霜染枫丹 发表于 2025-12-9 11:20
感谢偶然的临帖鼓励，上午好！

{:4_180:}

吉祥如意

马黑黑 发表于 2025-12-9 12:49

樵歌 发表于 2025-12-9 06:47
感谢让大姐感谢的@马黑黑 老师

{:4_172:}

马黑黑 发表于 2025-12-9 12:50

霜染枫丹 发表于 2025-12-8 22:08
这套代码对我来说就是标题模板，我最喜欢的是文字混合效果，可以根据需要改变颜色，很直观地看到标题的渲染 ...

理解到位，并能应用到自己的场景中，厉害

霜染枫丹 发表于 2025-12-9 16:08

马黑黑 发表于 2025-12-9 12:50
理解到位，并能应用到自己的场景中，厉害

感谢马老师的鼓励，感谢马老师的无私分享。很荣幸能用到这样好的东东，可以随意变化。祝您吉祥快乐！！{:4_204:}{:4_190:}{:4_178:}

马黑黑 发表于 2025-12-9 17:22

霜染枫丹 发表于 2025-12-9 16:08
感谢马老师的鼓励，感谢马老师的无私分享。很荣幸能用到这样好的东东，可以随意变化。祝您吉祥快乐！！{: ...

{:4_191:}

樵歌 发表于 2025-12-9 19:09

霜染枫丹 发表于 2025-12-9 11:20
马老师的这组代码构思精巧，简捷好用。谢小樵哥的支持，上午好！

就是他的代码可操作性强，只可惜我懒汉，学不会{:4_169:}
页: [1]
查看完整版本: 套用马老师代码制作标题图