RWD対応、任意のテキストをSVGで書いて背景を切り抜く
Result
RWD対応。SVGでテキストを書いて切り抜いてます。
※CSSというか、HTMLの処理がメインになってます。CSSはRWD対応部分がメイン
css
body {
font-family:'Oswald';
background: url('https://picsum.photos/2500/1800/?random') no-repeat center center fixed;
background-size: cover;
}
.wrapper {
margin-top:50px;
}
.title {
font:700 52pt 'Oswald';
padding:0;
margin:0;
max-width:500px;
margin: 0 auto;
letter-spacing:2px;
}
.knockout {
width:500px;
display:block;
height:270px;
overflow:hidden;
}
.knockout {
fill: rgba(255,255,255,1);
}
.content {
background-color:#fff;
margin:0 auto;
max-width:500px;
}
.innertext {
padding:50px;
}
.responsivetablet, .responsivemobile {
display:none;
}
@media all and (max-width:768px) {
.responsivetablet {
display:block;
}
.responsivedesktop {
display:none;
}
.title {
font-size:45px;
max-width:80%;
}
.content {
max-width:80%;
}
.knockout {
height:200px;
}
.knockout, .wrapper {
width:100%;
}
}
@media all and (max-width:540px) {
.responsivetablet {
display:none;
}
.responsivemobile {
display:block;
}
.title {
font-size:30px;
min-width:320px;
max-width:80%;
}
.knockout {
height:140px;
}
.content {
min-width:320px;
max-width:80%;
}
}
|
html
<h1 class="title responsivedesktop">
<span class="knockout">
<svg id="svgDesktop" class="knockout" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" >
<mask id="text-clip1">
<rect id="bg1" width="100%" height="100%" fill="white" />
<text id="rectWrap1" y="100" width="100%" height="100%" fill="#000">
<tspan x="44" dy="0">かちびと.net</tspan>
<tspan x="44" dy="80">サンプルです</tspan>
<tspan x="44" dy="80">foo bar</tspan>
</text>
</mask>
<rect width="100%" height="100%" mask="url(#text-clip1)" />
</svg>
</span>
</h1>
|
via
multiline, responsive knockout svg text
