{"id":7753,"date":"2022-05-19T04:50:53","date_gmt":"2022-05-19T04:50:53","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7753"},"modified":"2022-05-19T04:50:53","modified_gmt":"2022-05-19T04:50:53","slug":"como-maquetar-un-campo-de-futbol-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/","title":{"rendered":"C\u00f3mo maquetar un campo de futbol con CSS"},"content":{"rendered":"

Como apasionado del futbol y de profesi\u00f3n programador inform\u00e1tico siempre he tenido ideas de proyectos webs relacionados con este deporte pero la ocupaci\u00f3n que me lleva mi profesi\u00f3n no me ha permitido centrarme en mis propias ideas.<\/p>\n

No estoy seguro si es por desgracia o por fortuna pero siempre tengo algo que hacer ya sea para alg\u00fan cliente o alg\u00fan proyecto mucho m\u00e1s serio.<\/p>\n

El caso es que siempre quise pensar en como maquetar un campo de futbol y en esta semana me ha dado por hacerlo y aqu\u00ed estoy con una soluci\u00f3n sencilla usando tecnolog\u00edas modernas como Flexbox<\/strong> y posiciones absolutas<\/strong>.<\/p>\n

No he querido complicarme mucho la vida. He montado un campo de futbol sencillo, con lo b\u00e1sico que permite identificarlo; la grada, el campo con c\u00e9sped artificial, las porter\u00edas, las \u00e1reas, los saques de esquina y el c\u00edrculo central.<\/p>\n

La idea es que te sirva de base para construir algo m\u00e1s completo y al detalle.<\/p>\n

Estructura HTML del campo de futbol<\/h2>\n

He creado una estructura lo m\u00e1s simple posible con contenedores anidados donde cada elemento o contenedor es una caracter\u00edstica del campo de futbol.<\/p>\n

A continuaci\u00f3n se puede observar:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"estadio"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"grada"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"campo"<\/span>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"contenedor-porteria"<\/span>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"porteria porteria-izquierda"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"izquierda"<\/span>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"corner corner-superior"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"area"<\/span>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"area-pequena"<\/span>><\/span>\n                    <\/<\/span>div<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"punto-penalty"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"arco"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"corner corner-inferior"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"circulo-central"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"derecha"<\/span>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"corner corner-superior"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"area"<\/span>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"area-pequena"<\/span>><\/span>\n                    <\/<\/span>div<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"punto-penalty"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"arco"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"corner corner-inferior"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"contenedor-porteria"<\/span>><\/span>\n                <div<\/span><\/a> class<\/span>=<\/span>"porteria porteria-derecha"<\/span>><\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Reglas CSS para la maquetaci\u00f3n del campo de futbol<\/h2>\n
Ir\u00e9 elemento a elemento explicando como he pensado maquetarlo para armar el campo de futbol.<\/p>\n
Estadio<\/h3>\n
El estadio queda representado como el contenedor padre que contiene todo y he decidido centrarlo en la p\u00e1gina de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.estadio<\/span> {<\/span>\n    display<\/span>:<\/span> flex;<\/span>\n    justify-content<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Uso las nuevas tecnolog\u00edas de Flexbox<\/strong> para centrar el estadio en la p\u00e1gina.<\/p>\n
Grader\u00eda<\/h3>\n
Mi campo de futbol tiene una zona de grada donde la gente podr\u00e1 sentarse a ver el partido.<\/p>\n
Al contenedor que representa la grada le aplico los siguientes estilos:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.grada<\/span> {<\/span>\n    border-radius:<\/span> 50px<\/span>;<\/span>\n    background-color<\/span>:<\/span> #212529<\/span>;<\/span>\n    padding<\/span>:<\/span> 5<\/span>%<\/span>;<\/span>\n    width<\/span>:<\/span> 780px<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Le aplico unas esquinas redondeadas, un color de fondo oscuro, un espaciado interior del 5% y un ancho fijo de 780px.<\/p>\n
Campo de futbol<\/h3>\n
La zona m\u00e1s importante del campo de futbol es la cancha o zona de juego, lugar donde se lleva a cabo el partido.<\/p>\n
A este elemento le aplico los siguientes estilos:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.campo<\/span> {<\/span>\n    display<\/span>:<\/span> flex;<\/span>\n    justify-content<\/span>:<\/span> start;<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n    width<\/span>:<\/span> 700px<\/span>;<\/span>\n    height<\/span>:<\/span> 360px<\/span>;<\/span>\n    background-image<\/span>:<\/span> url<\/span>(<\/span>..\/img\/bg-green-grass.jpg<\/span>)<\/span>;<\/span>\n    background-position<\/span>:<\/span> center<\/span>;<\/span>\n    background-size<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    padding<\/span>:<\/span> 40px<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Es importante usar la propiedad display:flex<\/em> donde los elementos que hay dentro van a estar posicionados al inicio. Hago referencia a la parte izquierda y derecha del campo de f\u00fatbol. La idea es que se posicionen uno al lado del otro.<\/p>\n
Indicar que el campo es de posici\u00f3n relativa tampoco es una casualidad ya que es importante para posicionar de forma absoluta algunos elementos dentro del campo.<\/p>\n
He decidido darle un ancho de 700px y una altura de 360px.<\/p>\n
Le aplico una imagen de fondo que he encontrado por Internet. Si buscas \u00abcesped\u00bb en Google podr\u00e1s encontrar un mont\u00f3n de fondos para usar. Yo he elegido el que m\u00e1s me ha gustado y lo he posicionado al centro y con un tama\u00f1o del 100%.<\/p>\n
Finalmente, establezco un espaciado interior para dejar un espacio libre entre la grada y el campo. Con 40px de espaciado interior ya queda bastante bien.<\/p>\n
Debes saber que el campo de futbol est\u00e1 compuesto por 2 partes sim\u00e9tricas que definir\u00e9 como zona izquierda y derecha. Son los lugares donde se ubican cada equipo en el campo en el inicio del juego.<\/p>\n
Campo izquierdo y derecho<\/h3>\n
En el campo izquierdo puede ubicarse el equipo local y en el campo derecho el equipo visitante.<\/p>\n
Le he aplicado los siguientes estilos al contenedor que representa el campo izquierdo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.izquierda<\/span> {<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n    width<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\n    border<\/span>:<\/span> 2px<\/span> solid<\/span> #fff<\/span>;<\/span>\n    border-right<\/span>:<\/span> none<\/span>;<\/span>\n    overflow<\/span>:<\/span> hidden<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Tambi\u00e9n defino una posici\u00f3n relativa porque en el campo izquierdo tambi\u00e9n voy a posicionar algunos elementos en posici\u00f3n absoluta.<\/p>\n
Establezco un ancho del 50%.<\/p>\n
Agrego un borde con ancho de 2px s\u00f3lido y de color blanco para representar las l\u00edneas del campo.<\/p>\n
Para no visualizar un borde duplicado en el centro de la cancha, decido quitar el borde derecho a la parte izquierda.<\/p>\n
El overflow: hidden<\/em> es importante para ocultar las partes no deseadas de los c\u00edrculos que he creado para representar los corners.<\/p>\n
Debido a que el campo derecho es sim\u00e9trico, aplico un estilo muy similar:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.derecha<\/span> {<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n    width<\/span>:<\/span> 50<\/span>%<\/span>;<\/span>\n    border<\/span>:<\/span> 2px<\/span> solid<\/span> #fff<\/span>;<\/span>\n    overflow<\/span>:<\/span> hidden<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Las porter\u00edas del campo de futbol<\/h4>\n
Si te fijas bien en la estructura HTML<\/strong> que ilustr\u00e9 al principio, podr\u00e1s ver que la porter\u00eda est\u00e1 compuesta por 2 contenedores a los que he aplicado los siguientes estilos:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.contenedor-porteria<\/span> {<\/span>\n    display<\/span>:<\/span> flex;<\/span>\n    justify-content<\/span>:<\/span> center<\/span>;<\/span>\n    align-items:<\/span> center<\/span>;<\/span>\n    flex-direction<\/span>:<\/span> column;<\/span>\n}<\/span>\n \n.porteria<\/span> {<\/span>\n    border<\/span>:<\/span> 2px<\/span> solid<\/span> #fff<\/span>;<\/span>\n    width<\/span>:<\/span> 15px<\/span>;<\/span>\n    height<\/span>:<\/span> 50px<\/span>;<\/span>\n}<\/span>\n \n.porteria-izquierda<\/span> {<\/span>\n    border-right<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span>\n \n.porteria-derecha<\/span> {<\/span>\n    border-left<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
El contenedor con class=\u00bbcontenedor-porteria\u00bb<\/em> lo considero importante agregar para poder centrar verticalmente la porter\u00eda en el campo.<\/p>\n
En este caso, sigo utilizando Flexbox<\/strong> para alinear los elementos del contenedor al centro con direcci\u00f3n vertical o en columna.<\/p>\n
Para dibujar la porter\u00eda le aplico un borde de 2px s\u00f3lido de color blanco, un ancho de 15px y una altura de 150px.<\/p>\n
A la porter\u00eda izquierda le quito el borde derecho para que no se vean bordes superpuestos en la l\u00ednea del campo.<\/p>\n
Y a la porter\u00eda derecha le quito el borde izquierdo.<\/p>\n
Los corners<\/em> del campo de futbol<\/h3>\n
Para construir los corners<\/em> ha sido todo un reto pero finalmente he conseguido una soluci\u00f3n bastante atractiva y f\u00e1cil de entender.<\/p>\n
Las esquinas del campo de futbol son los corners<\/em>.<\/p>\n
Con las siguientes reglas de estilo CSS<\/strong> puedo representarlos bastante bien:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.corner<\/span> {<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #fff<\/span>;<\/span>\n    width<\/span>:<\/span> 25px<\/span>;<\/span>\n    height<\/span>:<\/span> 25px<\/span>;<\/span>\n    border-radius:<\/span> 50<\/span>%<\/span>;<\/span>\n}<\/span>\n \n.izquierda<\/span> .corner-superior<\/span> {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    top<\/span>:<\/span> -12px<\/span>;<\/span>\n    left<\/span>:<\/span> -14px<\/span>;<\/span>\n}<\/span>\n \n.izquierda<\/span> .corner-inferior<\/span> {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    bottom<\/span>:<\/span> -12px<\/span>;<\/span>\n    left<\/span>:<\/span> -14px<\/span>;<\/span>\n}<\/span>\n \n.derecha<\/span> .corner-superior<\/span> {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    top<\/span>:<\/span> -12px<\/span>;<\/span>\n    right<\/span>:<\/span> -14px<\/span>;<\/span>\n}<\/span>\n \n.derecha<\/span> .corner-inferior<\/span> {<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    bottom<\/span>:<\/span> -12px<\/span>;<\/span>\n    right<\/span>:<\/span> -14px<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Con la clase corner<\/em> defino unos estilos gen\u00e9ricos para todos los saques de esquina.<\/p>\n
En este caso quedan muy bien con un borde de 1px s\u00f3lido de color blanco, un ancho y alto de 25px y un borde redondeado del 50% para conseguir una redonda.<\/p>\n
Despu\u00e9s, tan solo quedar\u00eda posicionar en el campo cada saque de esquina.<\/p>\n
El corner superior del campo izquierdo queda definido en posici\u00f3n absoluta con un top de -12px y un left de -14px.<\/p>\n
El corner inferior del campo izquierdo queda definido en posici\u00f3n absoluta con un bottom de -12px y un left de -14px.<\/p>\n
El corner superior del campo derecho queda definido en posici\u00f3n absoluta con un top de -12px y un right de -14px.<\/p>\n
El corner inferior del campo derecho queda definido en posici\u00f3n absoluta con un bottom de -12px y un right de -14px.<\/p>\n
Las \u00e1reas del campo de f\u00fatbol<\/h3>\n
Cada parte del campo tambi\u00e9n tiene una zona que se denomina \u00abarea\u00bb.<\/p>\n
Las \u00e1reas del campo las he posicionado de forma absoluta dentro de cada campo de la siguiente forma:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
.area<\/span> {<\/span>\n    width<\/span>:<\/span> 90px<\/span>;<\/span>\n    height<\/span>:<\/span> 160px<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #fff<\/span>;<\/span>\n    top<\/span>:<\/span> 29<\/span>%<\/span>;<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n}<\/span>\n \n.izquierda<\/span> .area<\/span> {<\/span>\n    border-left<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span>\n \n.derecha<\/span> .area<\/span> {<\/span>\n    right<\/span>:<\/span> 0px<\/span>;<\/span>\n    border-right<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
La clase \u00abarea\u00bb es gen\u00e9rica para los 2 campos y queda establecida con un borde de 1px s\u00f3lido de color blanco, un ancho de 90px, una altura de 160px, en posici\u00f3n absoluta al 29% de la parte de arriba.<\/p>\n
Al area del campo izquierdo le elimino el borde izquierdo y al area del campo derecho la posiciono a la derecha y sin borde derecho.<\/p>\n
Resultado<\/h2>\n
\"Campo<\/p>\n
Conclusiones<\/h2>\n
Parece una tonter\u00eda pero haciendo algo que te gusta puedes aprender y desarrollar t\u00e9cnicas de maquetaci\u00f3n que te van a venir muy bien en tus futuros proyectos.<\/p>\n
En este art\u00edculo has aprendido varios trucos, destacando el uso de Flexbox<\/strong> y las posiciones absolutas<\/strong>.<\/p>\n
Te dejo como faena completar este campo de futbol ya que le faltan algunos elementos como el punto de penalti o el semic\u00edrculo del \u00e1rea y todo lo que tu puedas imaginar. Si es de tu agrado, quiz\u00e1 tambi\u00e9n quieras agregar gente en la grada o posicionar jugadores.<\/p>\n
Tambi\u00e9n dejo en tus manos adaptar este campo de futbol a todos los dispositivos ya que tan solo lo he pensado para visualizarlo en pantallas de escritorio.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Como apasionado del futbol y de profesi\u00f3n programador inform\u00e1tico siempre he tenido ideas de proyectos webs relacionados con este deporte pero la ocupaci\u00f3n que me lleva mi profesi\u00f3n no me ha permitido centrarme en mis propias ideas. No estoy seguro si es por desgracia o por fortuna pero siempre tengo algo que hacer ya sea […]<\/p>\n","protected":false},"author":1,"featured_media":7754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[194],"class_list":["post-7753","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-flexbox"],"yoast_head":"\nC\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Como apasionado del futbol y de profesi\u00f3n programador inform\u00e1tico siempre he tenido ideas de proyectos webs relacionados con este deporte pero la ocupaci\u00f3n que me lleva mi profesi\u00f3n no me ha permitido centrarme en mis propias ideas. No estoy seguro si es por desgracia o por fortuna pero siempre tengo algo que hacer ya sea […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-19T04:50:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/\",\"name\":\"C\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png\",\"datePublished\":\"2022-05-19T04:50:53+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png\",\"width\":500,\"height\":500,\"caption\":\"Campo de futbol con CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo maquetar un campo de futbol con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog","og_description":"Como apasionado del futbol y de profesi\u00f3n programador inform\u00e1tico siempre he tenido ideas de proyectos webs relacionados con este deporte pero la ocupaci\u00f3n que me lleva mi profesi\u00f3n no me ha permitido centrarme en mis propias ideas. No estoy seguro si es por desgracia o por fortuna pero siempre tengo algo que hacer ya sea […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2022-05-19T04:50:53+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/","name":"C\u00f3mo maquetar un campo de futbol con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png","datePublished":"2022-05-19T04:50:53+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2022\/05\/Como-maquetar-un-campo-de-futbol-con-CSS.png","width":500,"height":500,"caption":"Campo de futbol con CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-maquetar-un-campo-de-futbol-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo maquetar un campo de futbol con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7753"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7753\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7754"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}