<section class="poster-1">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >
<defs>
<filter id="filtered-1">
<!-- COLORS -->
<feFlood flood-color="#551C0B" result="COLOR-outline" />
<!-- COLORS END -->
<!-- OUTLINE -->
<feMorphology in="SourceAlpha" operator="dilate" radius="5" result="OUTLINE_10" />
<feComposite in="COLOR-outline" operator="in" in2="OUTLINE_10" result="OUTLINE_20" />
<!-- OUTLINE END -->
<!-- LIGHTING EFFECTS -->
<feGaussianBlur stdDeviation="8" in="SourceAlpha" result="LIGHTING-EFFECTS-10"/>
<feSpecularLighting surfaceScale="9" specularConstant="0.9" specularExponent="10" lighting-color="#blue" in="LIGHTING-EFFECTS-10" result="LIGHTING-EFFECTS-20">
<fePointLight x="-100" y="-200" z="100" />
</feSpecularLighting>
<feComposite operator="in" in="LIGHTING-EFFECTS-20" in2="SourceAlpha" result="LIGHTING-EFFECTS-30"/>
<feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS-30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS-40"/>
<!-- LIGHTING EFFECTS END-->
<!-- COLOR EFFECTS -->
<feComponentTransfer in="LIGHTING-EFFECTS-40" result="COLOR-EFFECTS_10">
<feFuncR id="RedT" type="table" tableValues="0 6 1 0 3"/>
<feFuncG id="GrnT" type="table" tableValues="2 0 1 3 2"/>
<feFuncB id="BluT" type="table" tableValues="1 -1 0 1 1"/>
</feComponentTransfer>
<feColorMatrix type="matrix"
values="0.6 0.2 0 -0.3 0,
-0.5 1 0 -0.1 0,
-0.4 0.5 0.7 0 0,
0 0 0 1 0" in="COLOR-EFFECTS_10" result="COLOR-EFFECTS_20" />
<!-- COLOR EFFECTS END-->
<feMerge>
<feMergeNode in="OUTLINE_20" />
<feMergeNode in="COLOR-EFFECTS_20"/>
</feMerge>
</filter>
</defs>
<text class="filtered-1" x="20" y="140">BLOP!</text>
</svg>
</section>
<section class="poster-2">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >
<defs>
<filter id="filtered-2" >
<!-- COLORS -->
<feFlood flood-color="#551C0B" result="COLOR-outline" />
<!-- COLORS END-->
<!-- OUTLINE -->
<feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10" />
<feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20" />
<!-- OUTLINE END -->
<!-- LIGHTING EFFECTS -->
<feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"/>
<feSpecularLighting surfaceScale="5" specularConstant="0.8" specularExponent="7.5" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
<fePointLight x="-250" y="-50" z="300" />
</feSpecularLighting>
<feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30"/>
<feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS_30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS_40"/>
<!-- LIGHTING EFFECTS END -->
<!-- COLOR EFFECTS -->
<feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
<feFuncR type="gamma" offset="-0.3" amplitude="1.1" exponent="4.84"/>
<feFuncG type="gamma" offset="-0.3" amplitude="3.1" exponent="4.84"/>
<feFuncB type="gamma" offset="13.3" amplitude="0.1" exponent="1.84"/>
</feComponentTransfer>
<!-- COLOR EFFECTS END -->
<feMerge>
<feMergeNode in="OUTLINE_20" />
<feMergeNode in="COLOR-EFFECTS_10"/>
</feMerge>
</filter>
</defs>
<text class="filtered-2" x="20" y="140">BLOP!</text>
</svg>
</section>
<section class="poster-3">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180" >
<defs>
<filter id="filtered-3" height="220%">
<!-- COLORS -->
<feFlood flood-color="#551C0B" result="COLOR-outline" />
<!-- COLORS END-->
<!-- OUTLINE -->
<feMorphology operator="dilate" radius="3" in="SourceAlpha" result="OUTLINE_10" />
<feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20" />
<!-- OUTLINE END -->
<!-- LIGHTING EFFECTS -->
<feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"/>
<feSpecularLighting surfaceScale="5" specularConstant="0.5" specularExponent="7.5" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
<fePointLight x="750" y="-50" z="300" />
</feSpecularLighting>
<feComposite in2="SourceAlpha" operator="in" in="LIGHTING-EFFECTS_20" result="LIGHTING-EFFECTS_30"/>
<feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40"/>
<!-- LIGHTING EFFECTS END -->
<!-- COLOR EFFECTS -->
<feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
<feFuncR type="gamma" offset="-1.3" amplitude="10" exponent="4.84"/>
<feFuncB type="gamma" offset="-1.3" amplitude="10.1" exponent="40.84"/>
</feComponentTransfer>
<!-- COLOR EFFECTS END -->
<feMerge>
<feMergeNode in="OUTLINE_20" />
<feMergeNode in="COLOR-EFFECTS_10"/>
</feMerge>
</filter>
</defs>
<text class="filtered-3" x="20" y="140">BLOP!</text>
</svg>
</section>
<section class="poster-4">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 180">
<defs>
<filter id="filtered-4" height="220%">
<!-- COLORS -->
<feFlood flood-color="#551C0B" result="COLOR-outline" />
<feFlood flood-color="#551C0B" flood-opacity="0" result="TRANSPARENT" />
<!-- COLORS END-->
<!-- OUTLINE -->
<feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10" />
<feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20" />
<!-- OUTLINE END-->
<!-- LIGHTING EFFECTS -->
<feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10" />
<feSpecularLighting surfaceScale="7" specularConstant="0.8" specularExponent="7" lighting-color="#white" in="LIGHTING-EFFECTS_10" result="LIGHTING-EFFECTS_20">
<fePointLight x="-100" y="-150" z="200" />
</feSpecularLighting>
<feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30" />
<feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40" />
<!-- LIGHTING EFFECTS END-->
<!-- COLOR EFFECTS -->
<feComponentTransfer in="LIGHTING-EFFECTS_40" result="COLOR-EFFECTS_10">
<feFuncR id="RedT" type="table" tableValues="13 6 1 0 3"></fefuncr>
<feFuncG id="GrnT" type="table" tableValues="2 0 0 1"></fefuncg>
<feFuncB id="BluT" type="table" tableValues="1 0 0 -8"></fefuncb>
</feComponentTransfer>
<!-- COLOR EFFECTS END-->
<femerge>
<feMergeNode in="OUTLINE_20" />
<feMergeNode in="COLOR-EFFECTS_10" />
<feMergeNode in="TRANSPARENT" />
</femerge>
</filter>
</defs>
<text class="filtered-4" x="20" y="140">BLOP!</text>
</svg>
</section>@import "https://fonts.googleapis.com/css?family=Sniglet:800";
$bg-path: "https://www.w3cplus.com/sites/default/files/blogs/2015/1506/" !default;
html,
body{
height: 100vh;
width: 100vw;
}
body{
background: white;
}
svg{
display: block;
position: absolute;
width:100%;
max-width: 500px;
max-height: 180px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden;
background-size: cover;
}
.filtered-1,
.filtered-2,
.filtered-3,
.filtered-4{
font: 800 140px/1 'Sniglet', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 140px;
}
.filtered-1{
filter: url(#filtered-1);
color: #0040FF;
fill: #0040FF;
}
.filtered-2{
filter: url(#filtered-2);
color: #EF7349;
fill: #EF7349;
}
.filtered-3{
filter: url(#filtered-3);
color: #EF7349;
fill: #EF7349;;
}
.filtered-4{
filter: url(#filtered-4);
color: #FA0D5D;
fill: #FA0D5D;
}
.poster-1,
.poster-2,
.poster-3,
.poster-4{
position: relative;
float: left;
width: 50vw;
height: 50vh;
background: #D9A300 url(#{$bg-path}drops.jpg) center center;
overflow: hidden;
background-size: cover;
}
.poster-2{
background: #56B597 url(#{$bg-path}orange.jpg) center center;
}
.poster-3{
background: #0085B2 url(#{$bg-path}water.jpg) center center;
}
.poster-4{
background: #FF7A4D url(#{$bg-path}jelly.jpg) center center;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.