div+Css布局实现首字母下沉效果代码-html代码-BFW代码库

div+Css布局实现首字母下沉效果代码

代码语言：html

代码描述：div+Css布局实现首字母下沉效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  font-family: system-ui, sans-serif;
  font-size: 1.2rem;
}

svg {
  display: none;
}

.text {
  text-wrap: pretty;
  line-height: 1.4;
  width: min(50ch, 100% - 2rem);
  margin: 0 auto;
}

.dp {
  filter: url(#filter);
}
.dp:first-letter {
  --clr: hsl(330 80% 81% / .5);
  color: #e61e82;
  font-weight: 900;
}
.dp:first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}

a {
  color: #5eb0e5;
  text-decoration: 1px wavy underline color-mix(in hsl, currentcolor, #ee7762);
}
</style>


  
  
</head>

<body translate="no">
  <div class="text dp">This is a continution of a pen of mine <a href="" target="_blank">Drop-Caps</a> where I explored multiple ways to do drop-caps. I also expanded one of those out into its own Pen, because I loved how it looked: <a href="" target="_blank">tessellated text</a> . This led to a fork by Ana Tudor to demonstrate how that can be accomplised by using <a href="" target="_blank">SVG</a>. Lets call this a foray into text manipulation using SVG. I am still learning using SVG for that, so it is not as elegant.</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="100">
  <defs>
    <link xmlns="http://www.w3.org/1999/xhtml" href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet" type="text/css" />
    <filter id="filter">
      <feflood flood-color="#FF0000" flood-opacity="0.9" x="0" y="0" height="4.8rem" width=".........完整代码请登录后点击上方下载按钮下载查看