Poster type [CSS Snippets]

Developer
Ma Luong
Size
2,869 Kb
Views
4,048
  1. Poster type [CSS Snippets] Previews
  2. Poster type [CSS Snippets] HTML Codes
  3. Poster type [CSS Snippets] CSS Codes

How do I make an poster type [css snippets]?

What is a poster type [css snippets]? How do you make a poster type [css snippets]? This script and codes were developed by Ma Luong on 31 January 2023, Tuesday.

Poster type [CSS Snippets] Previews
IQ Test

Poster type [CSS Snippets] - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Poster type [CSS Snippets]</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Sniglet:800" rel="stylesheet" type="text/css">
<section class="poster-1"> <svg> <text class="filtered-1" x="20" y="140">BLOP!</text> <defs> <filter id="filtered-1"> <!-- COLORS --> <feFlood flood-color="#551C0B" result="COLOR-outline"></feFlood> <!-- COLORS END --> <!-- OUTLINE --> <feMorphology in="SourceAlpha" operator="dilate" radius="5" result="OUTLINE_10"></feMorphology> <feComposite in="COLOR-outline" operator="in" in2="OUTLINE_10" result="OUTLINE_20"></feComposite> <!-- OUTLINE END --> <!-- LIGHTING EFFECTS --> <feGaussianBlur stdDeviation="8" in="SourceAlpha" result="LIGHTING-EFFECTS-10"></feGaussianBlur> <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"></fePointLight> </feSpecularLighting> <feComposite operator="in" in="LIGHTING-EFFECTS-20" in2="SourceAlpha" result="LIGHTING-EFFECTS-30"></feComposite> <feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS-30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS-40"></feComposite> <!-- 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"></feFuncR> <feFuncG id="GrnT" type="table" tableValues="2 0 1 3 2"></feFuncG> <feFuncB id="BluT" type="table" tableValues="1 -1 0 1 1"></feFuncB> </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"></feColorMatrix> <!-- COLOR EFFECTS END--> <feMerge> <feMergeNode in="OUTLINE_20"></feMergeNode> <feMergeNode in="COLOR-EFFECTS_20"></feMergeNode> </feMerge> </filter> </defs> </svg>
</section>
<section class="poster-2"> <svg> <text class="filtered-2" x="20" y="140">BLOP!</text> <defs> <filter id="filtered-2"> <!-- COLORS --> <feFlood flood-color="#551C0B" result="COLOR-outline"></feFlood> <!-- COLORS END--> <!-- OUTLINE --> <feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10"></feMorphology> <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20"></feComposite> <!-- OUTLINE END --> <!-- LIGHTING EFFECTS --> <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"></feGaussianBlur> <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"></fePointLight> </feSpecularLighting> <feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30"></feComposite> <feComposite in="SourceGraphic" in2="LIGHTING-EFFECTS_30" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="LIGHTING-EFFECTS_40"></feComposite> <!-- 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"></feFuncR> <feFuncG type="gamma" offset="-0.3" amplitude="3.1" exponent="4.84"></feFuncG> <feFuncB type="gamma" offset="13.3" amplitude="0.1" exponent="1.84"></feFuncB> </feComponentTransfer> <!-- COLOR EFFECTS END --> <feMerge> <feMergeNode in="OUTLINE_20"></feMergeNode> <feMergeNode in="COLOR-EFFECTS_10"></feMergeNode> </feMerge> </filter> </defs> </svg>
</section>
<section class="poster-3"> <svg> <text class="filtered-3" x="20" y="140">BLOP!</text> <defs> <filter id="filtered-3" height="220%"> <!-- COLORS --> <feFlood flood-color="#551C0B" result="COLOR-outline"></feFlood> <!-- COLORS END--> <!-- OUTLINE --> <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="OUTLINE_10"></feMorphology> <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20"></feComposite> <!-- OUTLINE END --> <!-- LIGHTING EFFECTS --> <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"></feGaussianBlur> <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"></fePointLight> </feSpecularLighting> <feComposite in2="SourceAlpha" operator="in" in="LIGHTING-EFFECTS_20" result="LIGHTING-EFFECTS_30"></feComposite> <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40"></feComposite> <!-- 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"></feFuncR> <feFuncB type="gamma" offset="-1.3" amplitude="10.1" exponent="40.84"></feFuncB> </feComponentTransfer> <!-- COLOR EFFECTS END --> <feMerge> <feMergeNode in="OUTLINE_20"></feMergeNode> <feMergeNode in="COLOR-EFFECTS_10"></feMergeNode> </feMerge> </filter> </defs> </svg>
</section>
<section class="poster-4"> <svg> <text class="filtered-4" x="20" y="140">BLOP!</text> <defs> <filter id="filtered-4" height="220%"> <!-- COLORS --> <feFlood flood-color="#551C0B" result="COLOR-outline"></feFlood> <feFlood flood-color="#551C0B" flood-opacity="0" result="TRANSPARENT"></feFlood> <!-- COLORS END--> <!-- OUTLINE --> <feMorphology operator="dilate" radius="5" in="SourceAlpha" result="OUTLINE_10"></feMorphology> <feComposite operator="in" in="COLOR-outline" in2="OUTLINE_10" result="OUTLINE_20"></feComposite> <!-- OUTLINE END--> <!-- LIGHTING EFFECTS --> <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="LIGHTING-EFFECTS_10"></feGaussianBlur> <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"></fePointLight> </feSpecularLighting> <feComposite operator="in" in="LIGHTING-EFFECTS_20" in2="SourceAlpha" result="LIGHTING-EFFECTS_30"></feComposite> <feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in="SourceGraphic" in2="LIGHTING-EFFECTS_30" result="LIGHTING-EFFECTS_40"></feComposite> <!-- 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> <feMergeNode in="COLOR-EFFECTS_10"></feMergeNode> <feMergeNode in="TRANSPARENT"></feMergeNode> </feMerge> </filter> </defs> </svg>
</section>
</body>
</html>

Poster type [CSS Snippets] - Script Codes CSS Codes

svg { display: block; position: relative; width: 100%; max-width: 300px; max-height: 250px; top: 40%; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin: 0 auto; overflow: hidden; background-size: cover;
}
.filtered-1,
.filtered-2,
.filtered-3,
.filtered-4 { font-family: 'Sniglet', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx - font-smoothing: grayscale; font-size: 5em;
}
.filtered-1 { filter: url(#filtered-1); -webkit-filter: url(#filtered-1); color: #0040FF; fill: #0040FF;
}
.filtered-2 { filter: url(#filtered-2); -webkit-filter: url(#filtered-2); color: #EF7349; fill: #EF7349;
}
.filtered-3 { filter: url(#filtered-3); -webkit-filter: url(#filtered-3); color: #EF7349; fill: #EF7349; ;
}
.filtered-4 { filter: url(#filtered-4); -webkit-filter: url(#filtered-4); color: #FA0D5D; fill: #FA0D5D;
}
.poster-1,
.poster-2,
.poster-3,
.poster-4 { position: relative; float: left; width: 50%; height: 50%; background: #D9A300; overflow: hidden;
}
.poster-2 { background: #56B597;
}
.poster-3 { background: #0085B2;
}
.poster-4 { background: #FF7A4D;
}
html, body { margin: 0; padding: 0; height: 100%; font-size: 1em;
}
Poster type [CSS Snippets] - Script Codes
Poster type [CSS Snippets] - Script Codes
Home Page Home
Developer Ma Luong
Username maluong
Uploaded January 31, 2023
Rating 3
Size 2,869 Kb
Views 4,048
Do you need developer help for Poster type [CSS Snippets]?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ma Luong (maluong) Script Codes
Name
A Pen by Ma Luong
Mobile Grids
Css basic intro
Multi Languages
BxSlider Test
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!