{"id":3376,"date":"2026-10-18T19:02:51","date_gmt":"2026-10-18T19:02:51","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=3376"},"modified":"2026-10-18T19:03:18","modified_gmt":"2026-10-18T19:03:18","slug":"animar-variables-css-property","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/animar-variables-css-property\/","title":{"rendered":"Crear animaciones avanzadas en CSS con @property"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Animar variables CSS con <code>@property<\/code> permite pasar de un valor a otro de manera gradual. En este tutorial lo vas a usar para llenar un anillo de progreso y hacer que un contador de pasos suba desde cero, sin escribir JavaScript para esas dos animaciones.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"\ud83d\udd25 CSS AVANZADO: \u00bfUn lenguaje de programaci\u00f3n?\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/7VXYe5i__dI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/youtu.be\/7VXYe5i__dI\" target=\"_blank\" rel=\"noopener\">Ver el video en YouTube<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-callout is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">En este tutorial<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Crear\u00e1s un anillo de progreso con <code>conic-gradient()<\/code>.<\/li>\n\n\n\n<li>Registrar\u00e1s una propiedad porcentual con <code>@property<\/code> para animarlo.<\/li>\n\n\n\n<li>Registrar\u00e1s una propiedad entera para animar un contador CSS.<\/li>\n\n\n\n<li>Ver\u00e1s c\u00f3mo se usa todo en el panel Ritmo.<\/li>\n\n\n\n<li><a href=\"#paso-a-paso\">Ir al paso a paso<\/a>.<\/li>\n\n\n\n<li><a href=\"#codigo-fuente\">Saltar al c\u00f3digo fuente<\/a>.<\/li>\n\n\n\n<li><a href=\"#preguntas-frecuentes\">Ir a las preguntas frecuentes<\/a>.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 vas a construir<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La tarjeta muestra un n\u00famero de pasos y un anillo que se llena alrededor de un icono. El panel final a\u00f1ade otras m\u00e9tricas y un selector de tema. En el video nos concentramos en las dos animaciones: el anillo y la cifra que cuenta hacia arriba. El modo claro y oscuro llega en un pr\u00f3ximo tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2026\/10\/tarjeta-pasos-recorte.webp\" alt=\"Tarjeta de pasos con un anillo de progreso animado con @property\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u00e9 necesitas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Un editor de c\u00f3digo y un navegador actualizado.<\/li>\n\n\n\n<li>Conocer selectores, pseudo-elementos y la sintaxis b\u00e1sica de CSS.<\/li>\n\n\n\n<li>El <a href=\"https:\/\/github.com\/AlexCGDesign\/variables-avanzadas-css\" target=\"_blank\" rel=\"noopener\">repositorio p\u00fablico de la tarjeta de pasos<\/a>, con <code>index.html<\/code>, <code>estilos.css<\/code> y <code>assets\/<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"paso-a-paso\" class=\"wp-block-heading\">Paso a paso<\/h2>\n\n\n\n<div class=\"wp-block-group acg-steps is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Empieza con una custom property normal<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una variable CSS comienza con dos guiones y se consulta mediante <code>var()<\/code>. El proyecto usa este patr\u00f3n para reutilizar colores como <code>--color-coral<\/code>. Si cambias el valor donde se declara, los lugares que usan <code>var(--color-coral)<\/code> se actualizan juntos. Ese es el uso que probablemente ya conoces. El problema aparece cuando intentas pasar suavemente entre dos valores de una variable sin registrar: el navegador no dispone de un tipo declarado para interpolarlos. En el video primero se muestra el salto brusco del progreso para que la diferencia sea visible cuando a\u00f1adamos <code>@property<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>:root {\n  --color-coral: #8a15ea;\n}\n\n.ring {\n  background-image: conic-gradient(\n    var(--color-coral) var(--progreso),\n    var(--color-superficie) 0\n  );\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El nombre conserva \u00abcoral\u00bb aunque el valor del archivo de la demostraci\u00f3n se cambi\u00f3 a morado durante el video.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Dibuja el anillo con <code>conic-gradient()<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>conic-gradient()<\/code> reparte colores alrededor de un punto central. En la tarjeta, el primer color llega hasta <code>var(--progreso)<\/code>; a partir de ah\u00ed se pinta el color de la superficie. Con <code>border-radius: 50%<\/code> la caja se ve circular. Un elemento interior, tambi\u00e9n redondo, tapa el centro del degradado y deja visible solo el borde coloreado. No hace falta una imagen para cada porcentaje: el mismo CSS puede dibujar 0 %, 30 % u 80 % al cambiar la propiedad. En el ejemplo del video el anillo tiene 104 p\u00edxeles de ancho.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.ring {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 104px;\n  aspect-ratio: 1;\n  background-image: conic-gradient(\n    var(--color-coral) var(--progreso),\n    var(--color-superficie) 0\n  );\n  border: 2px solid var(--color-borde);\n  border-radius: 50%;\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Registra el porcentaje con <code>@property<\/code><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora s\u00ed viene la pieza que cambia el comportamiento. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/At-rules\/%40property\" target=\"_blank\" rel=\"noopener\"><code>@property<\/code><\/a> registra <code>--progreso<\/code> y le dice al navegador que su valor es un <code>&lt;percentage&gt;<\/code>. Tambi\u00e9n define si se hereda y cu\u00e1l es el valor inicial. En la demostraci\u00f3n se usa <code>inherits: true<\/code> y <code>initial-value: 0%<\/code>; por eso no necesitamos escribir el cero otra vez en el anillo. En un componente aislado tambi\u00e9n podr\u00edas elegir <code>inherits: false<\/code> para que cada anillo tenga su propio valor inicial. Lo esencial para esta animaci\u00f3n es registrar el tipo porcentual y conservar valores v\u00e1lidos al cambiarlo.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>@property --progreso {\n  syntax: \"&lt;percentage&gt;\";\n  inherits: true;\n  initial-value: 0%;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--warn is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Cuidado<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>syntax<\/code> e <code>inherits<\/code> son obligatorios. Si la sintaxis no es <code>\"*\"<\/code>, tambi\u00e9n necesitas un <code>initial-value<\/code> v\u00e1lido e independiente. Si omites uno, la regla de registro puede ignorarse.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Anima el progreso del anillo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El c\u00f3digo del componente lleva <code>--progreso<\/code> del valor inicial a <code>80%<\/code> durante 1,5 segundos. <code>animation-fill-mode: forwards<\/code> mantiene el estado final una vez termina la animaci\u00f3n. La regla <code>from<\/code> se puede omitir aqu\u00ed porque el registro ya establece <code>0%<\/code> como valor inicial. Esta es la parte que antes daba un salto de golpe: al conocer el tipo porcentual, el navegador puede calcular los valores intermedios y el degradado parece llenarse. Prueba a cambiar <code>80%<\/code> por otro porcentaje y ver\u00e1s que el anillo sigue el mismo recorrido. Si adem\u00e1s quieres animar la entrada de la tarjeta, mira <a href=\"https:\/\/alexcgdesign.com\/blog\/3-caracteristicas-css\/\">3 caracter\u00edsticas modernas de CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.ring {\n  animation: mostrar-circulo 1.5s forwards;\n}\n\n@keyframes mostrar-circulo {\n  to {\n    --progreso: 80%;\n  }\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-cta acg-cta--sponsor is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Patrocinador oficial del curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Publica tus proyectos con Hostinger<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En el video se ve c\u00f3mo subir un ZIP del sitio desde el panel de Hostinger. Si quieres publicar tus proyectos con tu dominio, puedes conocer sus planes desde el enlace de AlexCG Design.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/hostinger.com\/alexcg\" rel=\"sponsored noopener\" target=\"_blank\">Conoce Hostinger<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Usa un contador CSS para mostrar pasos<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">El n\u00famero de pasos no necesita escribirse dentro del pseudo-elemento. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Properties\/counter-reset\" target=\"_blank\" rel=\"noopener\"><code>counter-reset<\/code><\/a> crea o reinicia un contador llamado <code>pasos<\/code>, y <code>content: counter(pasos)<\/code> muestra su valor. Durante la explicaci\u00f3n del video tambi\u00e9n se prueba <code>counter-increment<\/code> con elementos internos. Ah\u00ed aparece un detalle \u00fatil: <code>::before<\/code> se genera antes de esos elementos y no refleja los incrementos posteriores; <code>::after<\/code> s\u00ed aparece despu\u00e9s. Para el contador final simplificamos el ejemplo: el valor viene directamente de una custom property entera, as\u00ed que no hacen falta elementos extra para sumar uno por uno.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>.card__count {\n  counter-reset: pasos var(--contador);\n}\n\n.card__count::after {\n  content: counter(pasos);\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Registra el entero y anima la cifra<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La segunda propiedad registrada acepta un <code>&lt;integer&gt;<\/code> y empieza en cero. El video la lleva a 8680 para demostrar que el n\u00famero visible puede animarse solo con CSS. El pseudo-elemento muestra el contador asociado a <code>--contador<\/code>, mientras <code>@keyframes<\/code> cambia esa propiedad durante 1,5 segundos. En el archivo final del panel se generaliza la idea con <code>--valor<\/code> y <code>--meta<\/code>: cada tarjeta declara sus cifras, <code>--num<\/code> es el entero animado y <code>--progreso<\/code> calcula cu\u00e1nto debe llenarse el anillo. As\u00ed una misma estructura sirve para pasos, agua y minutos activos.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>@property --contador {\n  syntax: \"&lt;integer&gt;\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.card__count {\n  counter-reset: pasos var(--contador);\n  animation: incrementar-pasos 1.5s forwards;\n}\n\n@keyframes incrementar-pasos {\n  to {\n    --contador: 8680;\n  }\n}<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-group acg-step is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Junta las dos animaciones<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed queda todo el CSS de la tarjeta en un solo bloque: las dos propiedades registradas, el anillo, el contador y los dos <code>@keyframes<\/code>. P\u00e9galo en tu hoja de estilos y cambia <code>80%<\/code> y <code>8680<\/code> para probar otros valores.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>@property --progreso {\n  syntax: \"&lt;percentage&gt;\";\n  inherits: true;\n  initial-value: 0%;\n}\n\n@property --contador {\n  syntax: \"&lt;integer&gt;\";\n  inherits: true;\n  initial-value: 0;\n}\n\n.ring {\n  display: grid;\n  place-items: center;\n  flex: none;\n  width: 104px;\n  aspect-ratio: 1;\n  background-image: conic-gradient(\n    var(--color-coral) var(--progreso),\n    var(--color-superficie) 0\n  );\n  border: 2px solid var(--color-borde);\n  border-radius: 50%;\n  animation: mostrar-circulo 1.5s forwards;\n}\n\n.card__count {\n  counter-reset: pasos var(--contador);\n  animation: incrementar-pasos 1.5s forwards;\n}\n\n.card__count::after {\n  content: counter(pasos);\n}\n\n@keyframes mostrar-circulo {\n  to {\n    --progreso: 80%;\n  }\n}\n\n@keyframes incrementar-pasos {\n  to {\n    --contador: 8680;\n  }\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-group acg-callout acg-callout--tip is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-callout__title wp-block-paragraph\">Consejo<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Deja el n\u00famero final tambi\u00e9n en el HTML como texto accesible para lectores de pantalla. El panel completo usa un valor visible generado por CSS y un <code>span<\/code> de solo lectura visual con la cifra real.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 id=\"codigo-fuente\" class=\"wp-block-heading\">C\u00f3digo fuente<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El <a href=\"https:\/\/github.com\/AlexCGDesign\/variables-avanzadas-css\" target=\"_blank\" rel=\"noopener\">repositorio de GitHub<\/a> contiene la tarjeta de pasos que construimos en el video: <code>index.html<\/code>, <code>estilos.css<\/code> y sus recursos. Puedes descargarlo desde <strong>Code \u2192 Download ZIP<\/strong>. El panel Ritmo completo aparece al final del video, pero no forma parte de este repositorio.<\/p>\n\n\n\n<div class=\"wp-block-group acg-download is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">C\u00f3digo de la tarjeta de pasos: HTML, CSS y recursos del ejemplo.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/github.com\/AlexCGDesign\/variables-avanzadas-css\" target=\"_blank\" rel=\"noopener\">Ver c\u00f3digo en GitHub<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 id=\"preguntas-frecuentes\" class=\"wp-block-heading\">Preguntas frecuentes<\/h2>\n\n\n\n<div class=\"wp-block-group acg-faq is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.313), 1.125rem);\">\u00bfPor qu\u00e9 mi variable CSS no se anima con <code>transition<\/code>?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.079), 0.938rem);\">Una custom property declarada solo con <code>--nombre<\/code> no tiene un tipo de valor registrado. Por eso un cambio de <code>0%<\/code> a <code>80%<\/code> suele comportarse como un salto discreto en este caso. Reg\u00edstrala con <code>@property<\/code>, usa <code>syntax: \"&lt;percentage&gt;\"<\/code> y un valor inicial v\u00e1lido; luego aplica la transici\u00f3n o animaci\u00f3n a esa propiedad. Comprueba tambi\u00e9n que los dos valores tengan el mismo tipo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.313), 1.125rem);\">\u00bfQu\u00e9 hace <code>inherits<\/code> dentro de <code>@property<\/code>?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.079), 0.938rem);\">Controla si los hijos reciben por defecto el valor registrado del elemento padre. Con <code>true<\/code>, un hijo puede usar el valor que se estableci\u00f3 arriba en el \u00e1rbol; con <code>false<\/code>, usa su propio valor o el <code>initial-value<\/code> del registro. No decide si la propiedad se puede animar: eso depende del tipo declarado y de los valores entre los que intentas pasar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.313), 1.125rem);\">\u00bfNecesito JavaScript para animar el anillo y el contador?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.079), 0.938rem);\">No para las dos animaciones que muestra este video. <code>conic-gradient()<\/code> dibuja el anillo, <code>@property<\/code> registra el porcentaje y el entero, y <code>@keyframes<\/code> cambia esos valores. El contador CSS imprime la cifra. JavaScript s\u00ed puede ser \u00fatil si los datos cambian por una acci\u00f3n real del usuario o llegan de un servicio; el ejemplo grabado usa valores definidos en el proyecto.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">M\u00e1s proyectos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/3-caracteristicas-css\/\">3 caracter\u00edsticas modernas de CSS: <code>@starting-style<\/code>, transiciones y nesting<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/centrar-en-css\/\">C\u00f3mo centrar en CSS: 7 maneras con Flexbox y Grid<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/alexcgdesign.com\/blog\/css-grid-vs-position-absolute\/\">CSS Grid vs. <code>position: absolute<\/code>: cu\u00e1ndo usar cada uno<\/a>.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group acg-cta is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"acg-cta__eyebrow wp-block-paragraph\">Curso<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sigue practicando CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En el curso completo de CSS encontrar\u00e1s m\u00e1s proyectos para aplicar estas ideas a tus interfaces.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/alexcgdesign.com\/cursocss\">Ver el curso de CSS<\/a><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aprende a animar variables CSS con @property: crea un anillo de progreso y un contador de pasos sin JavaScript. Incluye el c\u00f3digo de la tarjeta.<\/p>\n","protected":false},"author":1,"featured_media":3386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acg_migrated":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-3376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tutoriales"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=3376"}],"version-history":[{"count":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/3376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/3386"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=3376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=3376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=3376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}