{"id":10636,"date":"2020-09-28T21:00:18","date_gmt":"2020-09-28T19:00:18","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=10636"},"modified":"2020-12-23T11:42:47","modified_gmt":"2020-12-23T09:42:47","slug":"efecto-glitch-para-texto-solo-con-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/","title":{"rendered":"Efecto Glitch para texto solo con CSS"},"content":{"rendered":"

Glitch significa \u00abfalla\u00bb. Existe una tendencia en dise\u00f1o que se llama Glitch Art, o el arte Glitch y podemos crear efecto Glitch con CSS.<\/p>\n

\u00bfQue es el arte Glitch?<\/h2>\n

Es un estilo visual que se caracteriza por utilizar errores digitales o anal\u00f3gicos con fines est\u00e9ticos. Ya sean intencionales (es decir, \u00abfingir fallos\u00bb y obtener una est\u00e9tica similar a trav\u00e9s del dise\u00f1o) o por accidente (una verdadera manifestaci\u00f3n dentro del sistema sin intervenci\u00f3n humana).<\/p>\n

Estos felices accidentes han demostrado que las tecnolog\u00edas electr\u00f3nicas siguen siendo medios abiertos para la expresi\u00f3n y la creatividad. Y han creado otra v\u00eda para que los dise\u00f1adores reinventen productos, logotipos, tipograf\u00eda y mucho m\u00e1s.<\/p>\n

T\u00e9cnicas de dise\u00f1o de arte Glitch<\/h2>\n

Hay efectos t\u00e9cnicos que a menudo vemos como fallos, y vamos a querer replicar estas t\u00e9cnicas para crear un dise\u00f1o art\u00edstico de fallos convincente.<\/p>\n

Que el fallo sea intencional o no, las im\u00e1genes \u00abrotas\u00bb provienen de datos rotos, y este error es lo que est\u00e1 tratando de comunicar a trav\u00e9s de medios artificiales.<\/p>\n

Los estilos m\u00e1s comunes de dise\u00f1o de arte glitch<\/strong> son la pixelizaci\u00f3n, los degradados de colores, las Filtraciones de luz, la Exposici\u00f3n doble, las texturas y las letras Glitch.<\/p>\n

\"arte\"glitch<\/div>\n

Estamos acostumbrados a que los dise\u00f1adores, trabajen esos efectos con programas como Photoshop<\/a> o After Effect. Pero como dise\u00f1adores web, podemos tambi\u00e9n participar de esta tendencia creando por ejemplo efectos glitch a texto con CSS<\/strong>.<\/p>\n

Y vamos a ver ahora como crear un efecto Glitch para texto solo con CSS.<\/p>\n

1-Configuraci\u00f3n para empezar nuestro efecto Glitch<\/h3>\n

En HTML solo voy a tener un p\u00e1rrafo con una class Glitch:<\/p>\n

<p class=\"glitch\">Glitch Effect<\/p><\/pre>\n
En CSS, vamos a introducir algunas propiedades a la class Glitch. Y para dar un efecto Glitch, una de las t\u00e9cnicas que podemos utilizar es el text-shadow:<\/p>\n
body {\r\n  background: #222;\r\n  min-height: 100vh;\r\n  display: grid;\r\n  place-items: center;\r\n  color: white;\r\n  font-family: sans-serif;\r\n}\r\n\r\n.glitch {\r\n  font-size: 8rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  position: relative;\r\n\r\n  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),\r\n    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),\r\n    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);\r\n}\r\n\/* text-shadow: offset-x | offset-y | blur-radius | color *\/\r\n\/*Aqu\u00ed aplicamos multiples text-shadow al p\u00e1rrafo con valores distintos*\/\r\n<\/pre>\n
El offset-x especifica la distancia horizontal, el offset-y especifica la distancia vertical, y el blur-radius (opcional) es el radio de difuminaci\u00f3n.<\/p>\n
En este caso, hemos creado 3 text-shadow<\/strong> de color: rojo, verde y azul. Pongamos a cada uno un offset-x distinto para que no se solapen. Y utilizamos la unida de medida em y no pixeles porque em es una unidad relativa. A decir que si cambio el tama\u00f1o de fuente del texto, el text-shadow se ajustara, crecer\u00e1 o se encoger\u00e1 en proporci\u00f3n al nuevo font-size.<\/p>\n
\"text<\/a><\/p>\n
 <\/p>\n
2-Animaci\u00f3n Text-shadow<\/h3>\n
De 0% a 100%, hay que crear varios puntos de la animaci\u00f3n con valores diferentes de text-shadow, se puede jugar con esos valores para afinar el efecto buscado.<\/p>\n
.glitch {\r\n  font-size: 8rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  position: relative;\r\n\r\n  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),\r\n    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),\r\n    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);\r\n\r\n  animation: glitch 500ms infinite;\r\n}\r\n@keyframes glitch {\r\n  0% {\r\n    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),\r\n      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),\r\n      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);\r\n  }\r\n  \r\n  15% {\r\n    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),\r\n      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),\r\n      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);\r\n  }\r\n  \r\n  50% {\r\n    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),\r\n      0.05em 0 0 rgba(0, 255, 0, 0.75), \r\n      0 -0.05em 0 rgba(0, 0, 255, 0.75);\r\n  }\r\n  \r\n  100% {\r\n    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),\r\n      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),\r\n      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);\r\n  }\r\n}<\/pre>\n
La animaci\u00f3n, a este punto, funciona pero hay como una animaci\u00f3n entre cada punto y vamos a querer corregir ese defecto.
\nPara eso, podemos crear otros puntos dentro de la animaci\u00f3n al 14% con los valores del 0%, al 49% con los valores del 15%, al 99% con los valores del 50%.
\nDe esta manera de 0 a 14%, los valores ser\u00e1n los mismos y la animaci\u00f3n har\u00e1 un salto al 15%, el mismo proceso se repetir\u00e1 por los otros puntos de la animaci\u00f3n.<\/p>\n
3-Crear un efecto roto<\/h3>\n
As\u00ed que hemos conseguido el primer paso para obtener un efecto Glitch para nuestro texto. Pero queremos que tenga un aspecto un poco m\u00e1s roto. Podr\u00edamos utilizar pseudo-elementos, ::before y ::after, para aportar m\u00e1s texto que nos va a ayudar a crear ese efecto roto, pero no sabemos exactamente c\u00f3mo los lectores de pantalla van a tratar este texto.<\/p>\n
Otra soluci\u00f3n, puede ser de abrir dos etiquetas <span> con el texto repetido. El texto ser\u00e1 repetido 3 veces y para evitar que un lector de pantalla lo lea 3 veces, a\u00f1adimos el atributo aria-hidden<\/strong> con el valor true dentro de las etiquetas <span>. Y luego hay que posicionar esos span en relaci\u00f3n al texto<\/p>\n
para que se pongan detr\u00e1s de el:<\/p>\n
<p class=\"glitch\">\r\n  <span aria-hidden=\"true\">Glitch Text<\/span>\r\n  Glitch Text\r\n  <span aria-hidden=\"true\">Glitch Text<\/span>\r\n<\/p>\r\n<\/pre>\n
.glitch span {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}<\/pre>\n
Ahora vamos a querer animar cada texto de manera distinta y por eso vamos a utilizar la misma animaci\u00f3n pero con una velocidad distinta cada vez:<\/p>\n
.glitch span:first-child {\r\n\tanimation: glitch 650ms infinite;\r\n }\r\n .glitch span:last-child {\r\n \tanimation: glitch 375ms infinite;\r\n }<\/pre>\n
El aspecto visual empieza a ser impactante pero aun nos falta el efecto roto, . Para hacer eso, vamos a utilizar unos clip-path<\/strong> para recortar parte de los span y utilizaremos la propiedad transform para desplazar un poco los span del texto original:<\/p>\n
.glitch span:first-child {\r\n\tanimation: glitch 650ms infinite;\r\n  \tclip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);\r\n  \ttransform: translate(-0.025em, -0.0125em);\r\n  \tcolor: green; \r\n  \tz-index: 1;\r\n  \topacity: 0.8;\r\n }\r\n .glitch span:last-child {\r\n \tanimation: glitch 375ms infinite;\r\n  \tclip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);\r\n  \ttransform: translate(0.0125em, 0.025em);\r\n  \tcolor: red; \r\n  \tz-index:2;\r\n  \topacity: 0.8;\r\n }\r\n\/*Una vez comprobado con los clip-path est\u00e1n bien hecho, podemos quitar el color y el z-index*\/<\/pre>\n
El resultado, antes de quitar el z-index y el color a los span, es el siguiente:\"clip<\/p>\n
Para crear los clip-path, nos podemos ayudar del generador clippy:<\/a><\/p>\n
\"clippy<\/a><\/p>\n
Una vez que quitamos las propiedades de z-index y color, ahora si! Hemos conseguido el efecto roto animado, y es muy Glitchy!
\nPod\u00e9is consultar el c\u00f3digo entero aqu\u00ed<\/a>.<\/p>\n
\"efecto<\/a><\/p>\n
Os animo a probar esos efectos ya que el arte glitch es una tendencia moderna llamativa, y no desaparecer\u00e1 pronto.\u00a0Porque cuanto m\u00e1s avance la tecnolog\u00eda, m\u00e1s oportunidades habr\u00e1 para que esa tecnolog\u00eda se descomponga y para que los dise\u00f1adores reinterpreten estos defectos visualmente.\u00a0De hecho es plenamente incluido en las nuevas tendencias en dise\u00f1o web.<\/a><\/p>\n
As\u00ed que a\u00a0 medida que avanzan la tecnolog\u00eda y el arte glitch, siempre se presentar\u00e1n nuevos territorios hacia lo desconocido en este campo del dise\u00f1o web en constante expansi\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
Glitch significa \u201cfalla\u201d. Existe una tendencia en dise\u00f1o que se llama Glitch Art, o el arte Glitch y podemos crear efecto Glitch con CSS. <\/p>\n","protected":false},"author":33,"featured_media":11110,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-10636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nEfecto Glitch para texto solo con CSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Efecto Glitch para texto solo con CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-28T19:00:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-23T09:42:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"Efecto Glitch para texto solo con CSS\",\"datePublished\":\"2020-09-28T19:00:18+00:00\",\"dateModified\":\"2020-12-23T09:42:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\"},\"wordCount\":886,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\",\"name\":\"Efecto Glitch para texto solo con CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png\",\"datePublished\":\"2020-09-28T19:00:18+00:00\",\"dateModified\":\"2020-12-23T09:42:47+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png\",\"width\":1000,\"height\":500,\"caption\":\"efecto glitch para texto css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Efecto Glitch para texto solo con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Efecto Glitch para texto solo con CSS - Blog Escola Espai","description":"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"Efecto Glitch para texto solo con CSS - Blog Escola Espai","og_description":"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.","og_url":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2020-09-28T19:00:18+00:00","article_modified_time":"2020-12-23T09:42:47+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","type":"image\/png"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"Efecto Glitch para texto solo con CSS","datePublished":"2020-09-28T19:00:18+00:00","dateModified":"2020-12-23T09:42:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/"},"wordCount":886,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/","url":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/","name":"Efecto Glitch para texto solo con CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","datePublished":"2020-09-28T19:00:18+00:00","dateModified":"2020-12-23T09:42:47+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"Aprenda como crear un efecto increible para tus proyectos web, el efecto Glitch para texto con solo CSS, utilizando metodos avanzados de CSS.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","width":1000,"height":500,"caption":"efecto glitch para texto css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2020\/09\/efecto-glitch-para-texto-solo-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Efecto Glitch para texto solo con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/09\/efecto-glitch-para-texto-css.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=10636"}],"version-history":[{"count":55,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10636\/revisions"}],"predecessor-version":[{"id":11111,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10636\/revisions\/11111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/11110"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=10636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=10636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=10636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}