{"id":1511,"date":"2020-11-10T10:10:28","date_gmt":"2020-11-10T13:10:28","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=1511"},"modified":"2022-09-14T21:43:04","modified_gmt":"2022-09-15T00:43:04","slug":"como-hacer-un-flipcard-con-html-y-css","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/","title":{"rendered":"C\u00f3mo hacer un flipcard con HTML y CSS"},"content":{"rendered":"<div class='booster-block booster-read-block'><\/div><p>Hoy les traigo un poco de c\u00f3digo para hacer un flipcard utilizando solo HTML y CSS. Es \u00fatil para a\u00f1adir informaci\u00f3n extra sin ocupar espacio, adem\u00e1s que le da dinamismo y movimiento a una secci\u00f3n est\u00e1tica.<\/p>\n<p>Como ver\u00e1n, es una t\u00e9cnica muy simple y no requiere JS o JQuery. La estructura principal HTML tambi\u00e9n es muy simple: el contenedor general (flip-container), el recuadro (card), el frente y el dorso (front y back respectivamente). Luego, el CSS hace su parte y la magia sucede: la propiedad <strong><em>transform<\/em><\/strong> entran en acci\u00f3n. Esta propiedad de CSS3 es la que permite a un elemento cambiar su forma, tama\u00f1o o posici\u00f3n. Existen dos tipos de transformaciones: las 2D que suceden en un plano, y las 3D que parecieran moverse en el espacio.<\/p>\n<p>El cuadro el ejemplo gira en forma horizontal. Pero si se fijan en la parte de c\u00f3digo comentado, est\u00e1 la t\u00e9cnica para que el cuadro gire de forma vertical. Simplemente cambien una clase por otra y ver\u00e1n el resultado.<\/p><div id=\"alear-1406587711\" class=\"alear-test-placement-from-wizard-2991262163 alear-entity-placement\"><div class=\"meli-ads\">\r\n<a href=\"https:\/\/meli.la\/2Aq1yXG\" target=\"blank\"><img decoding=\"async\" src=\"https:\/\/http2.mlstatic.com\/D_NQ_NP_2X_968337-MLA100567674726_122025-F.webp\" alt=\"Samsung Galaxy Tab A11 Color Gris Capacidad 64 GB Ram 4GB - Llevalo hoy al mejor precio\"><\/a>\r\n<span>Samsung Galaxy Tab A11 Color Gris Capacidad 64 GB Ram 4GB | $256.090<\/span>\r\n<p><a href=\"https:\/\/meli.la\/23gCjpA\" target=\"blank\">Ver m\u00e1s productos <i class=\"far fa-caret-right\"><\/i><\/a><\/p>\r\n<\/div><\/div>\n<p>La utilic\u00e9 en la secci\u00f3n <a href=\"https:\/\/aleare.design\/#services\" target=\"_blank\" rel=\"noopener noreferrer\">Servicios<\/a> de mi web principal, para que cada \u00edtem tuviera una descripci\u00f3n sin agregar espacio extra. Y tambi\u00e9n la apliqu\u00e9 en el \u00faltimo proyecto web lanzado el mes pasado: <a href=\"https:\/\/doctorcarlosruiz.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web del Dr. Carlos Ruiz Zepeda<\/a>.<\/p><div class=\"alear-contenido_2 alear-entity-placement\" id=\"alear-2996273663\"><div id=\"alear-2851609382\" style=\"margin-top: 15px;margin-bottom: 15px;\"><a href='https:\/\/collaborator.es?ref=x44a3s' title='\u0421ollaborator' target='_blank'><img src='https:\/\/collaborator.pro\/images\/referral\/promo\/es\/2.png' width='728' height='90' alt='\u0421ollaborator'\/><\/a><\/div><\/div>\n<p>He aqu\u00ed el c\u00f3digo:<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Ejemplo Flip\" src=\"https:\/\/codepen.io\/aleare-design\/embed\/OJNQKyo?height=265&amp;theme-id=light&amp;default-tab=css,result\" height=\"420\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/aleare-design\/pen\/OJNQKyo\">Ejemplo Flip<\/a> by aleare-design<br \/>\n(<a href=\"https:\/\/codepen.io\/aleare-design\">@aleare-design<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Aqu\u00ed les comparto otro ejemplo de flipcard, tambi\u00e9n hecho puramente en HTML y CSS. Es un ejemplo responsivo, m\u00e1s avanzado. El toque que me gust\u00f3: ese llamativo efecto de \u00abrelieve\u00bb cuando el cuadro gira.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Pure CSS clickable flip cards\" src=\"https:\/\/codepen.io\/kparzecki\/embed\/RYzZwG?height=265&amp;theme-id=light&amp;default-tab=html,result\" height=\"405\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/kparzecki\/pen\/RYzZwG\">Pure CSS clickable flip cards<\/a> by Kacper Parz\u0119cki<br \/>\n(<a href=\"https:\/\/codepen.io\/kparzecki\">@kparzecki<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Por supuesto, pueden ir a los respectivos perfiles de Codepen y modificar el c\u00f3digo para probar modificaciones antes de aplicar a sus proyectos. Hay muchas t\u00e9cnicas que se pueden aplicar a los flipcards, algunas m\u00e1s sofisticadas, con animaci\u00f3n y efectos incre\u00edbles. En esta <a href=\"https:\/\/codepen.io\/collection\/XdzNzL\" target=\"_blank\" rel=\"noopener noreferrer\">colecci\u00f3n de Codepen<\/a> reun\u00ed algunos ejemplos.<\/p>\n<p>\u00a1Espero que les haya gustado y lo puedan aplicar a sus proyectos!<\/p>\n<div id=\"alear-1642508712\" class=\"alear-despues-del-contenido-2 alear-entity-placement\" style=\"margin-top: 15px;margin-bottom: 15px;\"><a href='https:\/\/collaborator.es?ref=x44a3s' title='\u0421ollaborator' target='_blank'><img src='https:\/\/collaborator.pro\/images\/referral\/promo\/es\/2.png' width='728' height='90' alt='\u0421ollaborator'\/><\/a><\/div><div id=\"alear-1072175034\" class=\"alear-despues-del-contenido alear-entity-placement\" style=\"margin-top: 30px;margin-bottom: 30px;\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5464693981010234\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5464693981010234\" \ndata-ad-slot=\"2927777050\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Hoy les traigo un poco de c\u00f3digo para hacer un flipcard utilizando solo HTML y CSS. Es \u00fatil para a\u00f1adir informaci\u00f3n extra sin ocupar espacio, adem\u00e1s que le da dinamismo y movimiento a una secci\u00f3n est\u00e1tica. Como ver\u00e1n, es una t\u00e9cnica muy simple y no requiere JS o JQuery. La estructura principal HTML tambi\u00e9n es [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1512,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[63,29],"tags":[128,100,269],"class_list":["post-1511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-desarrollo-web","tag-desarrollo-web","tag-html","tag-trucos-y-consejos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design<\/title>\n<meta name=\"description\" content=\"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Aleare Design\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/aleare.design\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-10T13:10:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-15T00:43:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1406\" \/>\n\t<meta property=\"og:image:height\" content=\"808\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Alejandra Arellano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:site\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alejandra Arellano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/\"},\"author\":{\"name\":\"Alejandra Arellano\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\"},\"headline\":\"C\u00f3mo hacer un flipcard con HTML y CSS\",\"datePublished\":\"2020-11-10T13:10:28+00:00\",\"dateModified\":\"2022-09-15T00:43:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/\"},\"wordCount\":367,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/screen-capture.gif\",\"keywords\":[\"Desarrollo web\",\"HTML\",\"Trucos y Consejos\"],\"articleSection\":[\"CSS\",\"Desarrollo Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/\",\"name\":\"C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/screen-capture.gif\",\"datePublished\":\"2020-11-10T13:10:28+00:00\",\"dateModified\":\"2022-09-15T00:43:04+00:00\",\"description\":\"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/screen-capture.gif\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/screen-capture.gif\",\"width\":1406,\"height\":808,\"caption\":\"Flip card en HTML y CSS -- El blog de aleare.design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/como-hacer-un-flipcard-con-html-y-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer un flipcard con HTML y CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"name\":\"El Blog de Aleare Design\",\"description\":\"dise\u00f1o gr\u00e1fico | dise\u00f1o web | programaci\u00f3n | ecommerce | email marketing | redes sociales\",\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"alternateName\":\"El Blog de Aleare Design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\",\"name\":\"Aleare Design Estudio Creativo\",\"alternateName\":\"Aleare Design\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"width\":840,\"height\":600,\"caption\":\"Aleare Design Estudio Creativo\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/aleare.design\",\"https:\\\/\\\/x.com\\\/alearedesign\",\"https:\\\/\\\/instagram.com\\\/aleare.design\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\",\"name\":\"Alejandra Arellano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Alejandra Arellano\"},\"description\":\"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\\\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.\",\"sameAs\":[\"https:\\\/\\\/aleare.com.ar\\\/\"],\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/author\\\/aleare\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design","description":"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.","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:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design","og_description":"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.","og_url":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/","og_site_name":"El blog de Aleare Design","article_publisher":"https:\/\/facebook.com\/aleare.design","article_published_time":"2020-11-10T13:10:28+00:00","article_modified_time":"2022-09-15T00:43:04+00:00","og_image":[{"width":1406,"height":808,"url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif","type":"image\/gif"}],"author":"Alejandra Arellano","twitter_card":"summary_large_image","twitter_creator":"@alearedesign","twitter_site":"@alearedesign","twitter_misc":{"Escrito por":"Alejandra Arellano","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#article","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/"},"author":{"name":"Alejandra Arellano","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e"},"headline":"C\u00f3mo hacer un flipcard con HTML y CSS","datePublished":"2020-11-10T13:10:28+00:00","dateModified":"2022-09-15T00:43:04+00:00","mainEntityOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/"},"wordCount":367,"commentCount":0,"publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif","keywords":["Desarrollo web","HTML","Trucos y Consejos"],"articleSection":["CSS","Desarrollo Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/","url":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/","name":"C\u00f3mo hacer un flipcard con HTML y CSS - El blog de Aleare Design","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#primaryimage"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif","datePublished":"2020-11-10T13:10:28+00:00","dateModified":"2022-09-15T00:43:04+00:00","description":"C\u00f3mo hacer un flipcard utilizando solo HTML y CSS. Muy \u00fatil para a\u00f1adir informaci\u00f3n extra, dinamismo y movimiento a una secci\u00f3n est\u00e1tica.","breadcrumb":{"@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#primaryimage","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2020\/11\/screen-capture.gif","width":1406,"height":808,"caption":"Flip card en HTML y CSS -- El blog de aleare.design"},{"@type":"BreadcrumbList","@id":"https:\/\/aleare.com.ar\/blog\/como-hacer-un-flipcard-con-html-y-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/aleare.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer un flipcard con HTML y CSS"}]},{"@type":"WebSite","@id":"https:\/\/aleare.com.ar\/blog\/#website","url":"https:\/\/aleare.com.ar\/blog\/","name":"El Blog de Aleare Design","description":"dise\u00f1o gr\u00e1fico | dise\u00f1o web | programaci\u00f3n | ecommerce | email marketing | redes sociales","publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"alternateName":"El Blog de Aleare Design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aleare.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/aleare.com.ar\/blog\/#organization","name":"Aleare Design Estudio Creativo","alternateName":"Aleare Design","url":"https:\/\/aleare.com.ar\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","width":840,"height":600,"caption":"Aleare Design Estudio Creativo"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/aleare.design","https:\/\/x.com\/alearedesign","https:\/\/instagram.com\/aleare.design"]},{"@type":"Person","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e","name":"Alejandra Arellano","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","caption":"Alejandra Arellano"},"description":"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.","sameAs":["https:\/\/aleare.com.ar\/"],"url":"https:\/\/aleare.com.ar\/blog\/author\/aleare\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":0,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media\/1512"}],"wp:attachment":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}