/SassMeister-input-HTML.html Secret
Last active
May 19, 2018 22:11
Star
You must be signed in to star a gist
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
> 1% | |
last 2 versions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg class="cloud-1" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-2" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-3" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-4" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-5" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-6" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-7" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<div class='red-box no-filter'></div> | |
<div class='red-box with-filter'></div> | |
<ul class="example-key"> | |
<li>1</li> | |
<li>2</li> | |
<li>3</li> | |
<li>4</li> | |
<li>5</li> | |
<li>6</li> | |
<li>7</li> | |
<li>8</li> | |
<li>9</li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.5.4) | |
// ---- | |
/** | |
Basic example to display broken filter CSS property in | |
Chrome 65, 66, 67 | |
**/ | |
@keyframes cloud-animation { | |
0% { | |
transform: translateY(0); | |
} | |
100% { | |
transform: translateY(2831px); | |
} | |
} | |
/** 1: SVG Cloud with blur and animation **/ | |
.cloud-1 { | |
animation: cloud-animation 502s infinite linear; | |
left: 40px; | |
filter: blur(2.2px); | |
} | |
/** 2: SVG Cloud with no blur and animation **/ | |
.cloud-2 { | |
animation: cloud-animation 502s infinite linear; | |
left: 150px; | |
} | |
/** 3: SVG Cloud with blur and no animation **/ | |
.cloud-3 { | |
left: 260px; | |
filter: blur(2.2px); | |
} | |
/** 4: SVG Cloud with no blur and no animation **/ | |
.cloud-4 { | |
left: 370px; | |
} | |
/** 5: SVG Cloud with minimal blur and no animation **/ | |
.cloud-5 { | |
left: 480px; | |
filter: blur(0.1px); | |
} | |
/** 6: SVG Cloud with blur set to 0 and no animation **/ | |
.cloud-6 { | |
left: 590px; | |
filter: blur(0); | |
} | |
/** 7: SVG Cloud with different filter and no animation **/ | |
.cloud-7 { | |
left: 700px; | |
filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9)); | |
} | |
.red-box { | |
/** 8: Non-SVG content animated with no filter **/ | |
&.no-filter { | |
left: 840px; | |
} | |
/** 9: Non-SVG content animated with with filter **/ | |
&.with-filter { | |
left: 955px; | |
filter: blur(2.2px); | |
} | |
} | |
/** | |
Basic setup start | |
**/ | |
$top-position: 60px; | |
body { | |
background: #004c70; | |
} | |
svg { | |
top: $top-position; | |
width: 86px; | |
height: 50px; | |
position: absolute; | |
border: 1px solid white; | |
} | |
.red-box { | |
animation: cloud-animation 502s infinite linear; | |
width: 20px; | |
height: 20px; | |
background: red; | |
top: $top-position; | |
position: absolute; | |
border: 1px solid white; | |
} | |
.example-key { | |
list-style: none; | |
margin: ($top-position / 3) 0 0 20px; | |
padding: 0; | |
overflow: hidden; | |
li { | |
color: white; | |
font-family: Arial, sans-serif; | |
float: left; | |
width: 110px; | |
text-align: center; | |
} | |
} | |
/** | |
Basic setup end | |
**/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
Basic example to display broken filter CSS property in | |
Chrome 65, 66, 67 | |
**/ | |
@-webkit-keyframes cloud-animation { | |
0% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
100% { | |
-webkit-transform: translateY(2831px); | |
transform: translateY(2831px); | |
} | |
} | |
@keyframes cloud-animation { | |
0% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
} | |
100% { | |
-webkit-transform: translateY(2831px); | |
transform: translateY(2831px); | |
} | |
} | |
/** 1: SVG Cloud with blur and animation **/ | |
.cloud-1 { | |
-webkit-animation: cloud-animation 502s infinite linear; | |
animation: cloud-animation 502s infinite linear; | |
left: 40px; | |
-webkit-filter: blur(2.2px); | |
filter: blur(2.2px); | |
} | |
/** 2: SVG Cloud with no blur and animation **/ | |
.cloud-2 { | |
-webkit-animation: cloud-animation 502s infinite linear; | |
animation: cloud-animation 502s infinite linear; | |
left: 150px; | |
} | |
/** 3: SVG Cloud with blur and no animation **/ | |
.cloud-3 { | |
left: 260px; | |
-webkit-filter: blur(2.2px); | |
filter: blur(2.2px); | |
} | |
/** 4: SVG Cloud with no blur and no animation **/ | |
.cloud-4 { | |
left: 370px; | |
} | |
/** 5: SVG Cloud with minimal blur and no animation **/ | |
.cloud-5 { | |
left: 480px; | |
-webkit-filter: blur(0.1px); | |
filter: blur(0.1px); | |
} | |
/** 6: SVG Cloud with blur set to 0 and no animation **/ | |
.cloud-6 { | |
left: 590px; | |
-webkit-filter: blur(0); | |
filter: blur(0); | |
} | |
/** 7: SVG Cloud with different filter and no animation **/ | |
.cloud-7 { | |
left: 700px; | |
-webkit-filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.9)); | |
filter: drop-shadow(16px 16px 10px rgba(0, 0, 0, 0.9)); | |
} | |
.red-box { | |
/** 8: Non-SVG content animated with no filter **/ | |
/** 9: Non-SVG content animated with with filter **/ | |
} | |
.red-box.no-filter { | |
left: 840px; | |
} | |
.red-box.with-filter { | |
left: 955px; | |
-webkit-filter: blur(2.2px); | |
filter: blur(2.2px); | |
} | |
/** | |
Basic setup start | |
**/ | |
body { | |
background: #004c70; | |
} | |
svg { | |
top: 60px; | |
width: 86px; | |
height: 50px; | |
position: absolute; | |
border: 1px solid white; | |
} | |
.red-box { | |
-webkit-animation: cloud-animation 502s infinite linear; | |
animation: cloud-animation 502s infinite linear; | |
width: 20px; | |
height: 20px; | |
background: red; | |
top: 60px; | |
position: absolute; | |
border: 1px solid white; | |
} | |
.example-key { | |
list-style: none; | |
margin: 20px 0 0 20px; | |
padding: 0; | |
overflow: hidden; | |
} | |
.example-key li { | |
color: white; | |
font-family: Arial, sans-serif; | |
float: left; | |
width: 110px; | |
text-align: center; | |
} | |
/** | |
Basic setup end | |
**/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<svg class="cloud-1" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-2" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-3" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-4" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-5" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-6" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<svg class="cloud-7" xmlns="http://www.w3.org/2000/svg" width="140.6" height="54.6" viewBox="0 0 140.607 54.587" preserveAspectRatio="none"> | |
<path fill="#ffffff" d="M12.8 54.6L0 47.8l11-13.5L13.5 24l12-6.5L38.2 25l25-25 11 .2 6.6 6.4L86 22.2l10-5.6 12.4 2.8L112 30l9-1.4 6.6 6.4 1.6 6.6h2.8l2.6 3.2 1.7 4.3 4.3 3.7-1.3 2H12.8z"/> | |
</svg> | |
<div class='red-box no-filter'></div> | |
<div class='red-box with-filter'></div> | |
<ul class="example-key"> | |
<li>1</li> | |
<li>2</li> | |
<li>3</li> | |
<li>4</li> | |
<li>5</li> | |
<li>6</li> | |
<li>7</li> | |
<li>8</li> | |
<li>9</li> | |
</ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment