{"id":182130,"date":"2014-09-08T08:45:27","date_gmt":"2014-09-08T15:45:27","guid":{"rendered":"http:\/\/css-tricks.com\/?p=182130"},"modified":"2019-08-21T16:55:47","modified_gmt":"2019-08-21T23:55:47","slug":"glitch-effect-text-images-svg","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/glitch-effect-text-images-svg\/","title":{"rendered":"Glitch Effect on Text \/ Images \/ SVG"},"content":{"rendered":"<p>Lucas Bebber&#8217;s <a href=\"http:\/\/codepen.io\/lbebber\/pen\/ypgql\" rel=\"noopener\">Glitch<\/a> is a super cool effect. It&#8217;s like you&#8217;re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.<\/p>\n<p>It&#8217;s bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I&#8217;d explain. Then I ended up making it work for other kinds of content as well as making it into a group of Sass <code>@mixin<\/code>s to make working with it a bit easier.<\/p>\n<p><!--more--><\/p>\n<p class=\"codepen\" data-height=\"368\" style=\"height: 368px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"chriscoyier\" data-slug-hash=\"xxKRQRm\" style=\"height: 368px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Glitched Text\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/xxKRQRm\/\" rel=\"noopener\"><br \/>\n  CSS Glitched Text<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<h3>Three Copies of the Text<\/h3>\n<p>While the HTML is just:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;div class=\"glitch\" data-text=\"GLITCH\"&gt;GLITCH&lt;\/div&gt; <\/code><\/pre>\n<p>Three copies of it are created, via pseudo-elements, and they are positioned right on top of each other.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.glitch {\r\n  position: relative;\r\n}\r\n.glitch::before,\r\n.glitch::after {\r\n  content: attr(data-text);\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n}<\/code><\/pre>\n<p>Producing three unique copies that can be controlled individually:<\/p>\n<figure id='post-182133 media-182133' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/glitch-stacked.png?ssl=1' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Alter the Copies<\/h3>\n<p>Each copy is identical except that:<\/p>\n<ul>\n<li>It&#8217;s offset to the left or right<\/li>\n<li>It has a highlight, in the form of a text-shadow<\/li>\n<\/ul>\n<p>Between the offset and the highlight, it gives it that broken feeling.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.glitch::before {\r\n  \/* ... anything needed to make it identical *\/\r\n\r\n  \/* variation *\/\r\n  left: 2px;\r\n  text-shadow: -1px 0 red;\r\n  \r\n  \/* important: opaque background masks the original *\/\r\n  background: black;\r\n}\r\n.glitch::after {\r\n  \/* ... anything needed to make it identical *\/\r\n\r\n  \/* variation *\/\r\n  left: -2px;\r\n  text-shadow: -1px 0 blue;\r\n  \r\n  \/* important: opaque background masks the original *\/\r\n  background: black;\r\n}<\/code><\/pre>\n<p>So now the three copies are like this:<\/p>\n<figure id='post-182137 media-182137' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/red-blue-overlays.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Clipping the Copies<\/h3>\n<p>You&#8217;d only ever see the top copy if left as-is. Probably the <code>::after<\/code> version, unless you alter with <code>z-index<\/code>. But never fear, we&#8217;re going to be only revealing parts of the top, altered copies with the <code>clip<\/code> <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip\/\">property<\/a>. This property is apparently deprecated in favor of <code>clip-path<\/code>, but at the time of this writing, only <code>clip<\/code> was working for me. I&#8217;m sure that will change in time, so we&#8217;ll have to keep an eye on it, and presumably, Autoprefixer will handle it.<\/p>\n<p class=\"explanation\">Update! August 2019: Plenty of time has past, and <code>clip<\/code> is still generally supported, but deprecated in favor of the (better) <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clip-path\" rel=\"noopener\"><code>clip-path<\/code><\/a>. The <code>clip<\/code> syntax can do what the <code>inset()<\/code> function value is for <code>clip-path<\/code>, so I&#8217;m updating this article to use that. Doesn&#8217;t look like Autoprefixer deals with the conversation. <\/p>\n<p>The syntax for <code>clip<\/code> is kinda weird. For the four values, you might expect something like top\/left\/width\/height, or point-at-top-left\/point-at-bottom-right. But instead, it&#8217;s like margin and padding: top\/right\/bottom\/left<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.glitch::before {\r\n  clip: rect(44px, 450px, 56px, 0);\r\n  \/*\r\n    Essentially a box from 0, 44px\r\n    to 450px, 56px\r\n  *\/\r\n\r\n  \/* clip-path: inset(); needs how far you want to push in from the edges instead *\/\r\n}<\/code><\/pre>\n<p>Here&#8217;s some example clips on those layers, now with fully opaque backgrounds applied (but still rotated and with extra colors so you can see what&#8217;s going on):<\/p>\n<figure id='post-182149 media-182149' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/clipped-layers.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Animate the Clips<\/h3>\n<p>Turns out clip can be animated, so, that clipped box will animate to a new position over time if told to, Here&#8217;s an example of keyframes:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">@keyframes noise-anim {\r\n  0% {\r\n    clip-path: inset(40% 0 61% 0);\r\n  }\r\n  20% {\r\n    clip-path: inset(92% 0 1% 0);\r\n  }\r\n  40% {\r\n    clip-path: inset(43% 0 1% 0);\r\n  }\r\n  60% {\r\n    clip-path: inset(25% 0 58% 0);\r\n  }\r\n  80% {\r\n    clip-path: inset(54% 0 7% 0);\r\n  }\r\n  100% {\r\n    clip-path: inset(58% 0 43% 0);\r\n  }\r\n}<\/code><\/pre>\n<p>Notice the left and right values remain the same, it&#8217;s just the top and bottom that change. And those values are kinda random.<\/p>\n<p>You can generate that pretty easily with Sass, like:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-css\">@keyframes noise-anim {\r\n  $steps: 20;\r\n  @for $i from 0 through $steps {\r\n    #{percentage($i*(1\/$steps))} {\r\n      $top: random(100);\r\n      $bottom: random(101 - $top);\r\n      clip-path: inset(#{$top}% 0 #{$bottom}% 0);\r\n    }\r\n  }\r\n}<\/code><\/pre>\n<p>Because you&#8217;d want two sets of randomized clipping positions, you&#8217;d make two sets of those @keyframes, and apply them to the copies:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.glitch::before {\r\n  ...\r\n\r\n  animation: glitch-anim-1 2s infinite linear alternate-reverse;\r\n}\r\n\r\n.glitch::after {\r\n  ...\r\n\r\n  animation: glitch-anim-2 2s infinite linear alternate-reverse;\r\n}<\/code><\/pre>\n<p>There is where we set the speed (number of keyframes also affects speed) as well as making it run infinitely back and forth.<\/p>\n<p>It&#8217;s pretty fun to watch:<\/p>\n<figure id='post-182150 media-182150' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/glitch-in-action.gif?ssl=1' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Although it should go without saying a little goes a long way.<\/p>\n<h3>Sass @mixins<\/h3>\n<p>I thought it would be neat if the technique was more reusable. Basically, call a <code>@mixin<\/code> with parameters to control the effect and get just what you need.<\/p>\n<pre rel=\"SCSS\"><code class=\"language-css\">.example-one {\r\n  font-size: 100px;\r\n  @include textGlitch(\"example-one\", 17, white, black, red, blue, 450, 115);\r\n}<\/code><\/pre>\n<p>Here&#8217;s my take on it:<\/p>\n<pre rel=\"SCSS\"><code class=\"language-css\">\/*\r\n  (TEXT) PARAMS\r\n  =================\r\n  1. Namespace\r\n  2. Intensity\r\n  3. Text color\r\n  4. Background color (flat)\r\n  5. Highlight #1 color\r\n  6. Highlight #2 color\r\n  7. Width (px)\r\n  8. Height (px)\r\n*\/\r\n\r\n@mixin textGlitch($name, $intensity, $textColor, $background, $highlightColor1, $highlightColor2, $width, $height) {\r\n  \r\n  color: $textColor;\r\n  position: relative;\r\n  $steps: $intensity;\r\n  \r\n  \/\/ Ensure the @keyframes are generated at the root level\r\n  @at-root {\r\n    \/\/ We need two different ones\r\n    @for $i from 1 through 2 {\r\n      @keyframes #{$name}-anim-#{$i} {\r\n        @for $i from 0 through $steps {\r\n          $top: random(100);\r\n          $bottom: random(101 - $top);\r\n          #{percentage($i*(1\/$steps))} {\r\n            clip-path: inset(#{$top}% 0 #{$bottom}% 0);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &amp;::before,\r\n  &amp;::after {\r\n    content: attr(data-text);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    background: $background;\r\n  }\r\n  &amp;::after {\r\n    left: 2px;\r\n    text-shadow: -1px 0 $highlightColor1;\r\n    animation: #{$name}-anim-1 2s infinite linear alternate-reverse;\r\n  }\r\n  &amp;::before {\r\n    left: -2px;\r\n    text-shadow: 2px 0 $highlightColor2; \r\n    animation: #{$name}-anim-2 3s infinite linear alternate-reverse;\r\n  }\r\n}<\/code><\/pre>\n<p>There are a million different ways to approach it, this is just one. Totally depends on how much you want the mixin to do for you, how much customizability you want or need, what you want left in the HTML, etc. <\/p>\n<p>I also made two more mixins, one for applying this effect to images, and on for inline SVG. They are different because they don&#8217;t use pseudo-elements to make the copies, coloring happens in different ways, positioning happens differently, etc. <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/XWrNyZy?editors=0110\" rel=\"noopener\">Here&#8217;s all three of them together. <\/a><\/p>\n<p>And a demo:<\/p>\n<p class=\"codepen\" data-height=\"489\" style=\"height: 489px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-default-tab=\"result\" data-user=\"chriscoyier\" data-slug-hash=\"RwboqMr\" style=\"height: 489px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Glitched Text\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/RwboqMr\/\" rel=\"noopener\"><br \/>\n  CSS Glitched Text<\/a> by Chris Coyier  (<a href=\"https:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Lucas Bebber&#8217;s Glitch is a super cool effect. It&#8217;s like you&#8217;re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It&#8217;s bonafide CSS trick if there ever [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[5021,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/182130"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=182130"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/182130\/revisions"}],"predecessor-version":[{"id":294751,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/182130\/revisions\/294751"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=182130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=182130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=182130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}