Cómo maquetar un campo de futbol con CSS

Como apasionado del futbol y de profesión programador informático siempre he tenido ideas de proyectos webs relacionados con este deporte pero la ocupación que me lleva mi profesión 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 para algún cliente o algún proyecto mucho más serio.

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í estoy con una solución sencilla usando tecnologías modernas como Flexbox y posiciones absolutas.

No he querido complicarme mucho la vida. He montado un campo de futbol sencillo, con lo básico que permite identificarlo; la grada, el campo con césped artificial, las porterías, las áreas, los saques de esquina y el círculo central.

La idea es que te sirva de base para construir algo más completo y al detalle.

Estructura HTML del campo de futbol

He creado una estructura lo más simple posible con contenedores anidados donde cada elemento o contenedor es una característica del campo de futbol.

A continuación se puede observar:

<div class="estadio">
    <div class="grada">
        <div class="campo">
            <div class="contenedor-porteria">
                <div class="porteria porteria-izquierda"></div>
            </div>
            <div class="izquierda">
                <div class="corner corner-superior"></div>
                <div class="area">
                    <div class="area-pequena">
                    </div>
                    <div class="punto-penalty"></div>
                    <div class="arco"></div>
                </div>
                <div class="corner corner-inferior"></div>
            </div>
            <div class="circulo-central"></div>
            <div class="derecha">
                <div class="corner corner-superior"></div>
                <div class="area">
                    <div class="area-pequena">
                    </div>
                    <div class="punto-penalty"></div>
                    <div class="arco"></div>
                </div>
                <div class="corner corner-inferior"></div>
            </div>
            <div class="contenedor-porteria">
                <div class="porteria porteria-derecha"></div>
            </div>
        </div>
    </div>
</div>

Reglas CSS para la maquetación del campo de futbol

Iré elemento a elemento explicando como he pensado maquetarlo para armar el campo de futbol.

Estadio

El estadio queda representado como el contenedor padre que contiene todo y he decidido centrarlo en la página de la siguiente forma:

.estadio {
    display: flex;
    justify-content: center;
}

Uso las nuevas tecnologías de Flexbox para centrar el estadio en la página.

Gradería

Mi campo de futbol tiene una zona de grada donde la gente podrá sentarse a ver el partido.

Al contenedor que representa la grada le aplico los siguientes estilos:

.grada {
    border-radius: 50px;
    background-color: #212529;
    padding: 5%;
    width: 780px;
}

Le aplico unas esquinas redondeadas, un color de fondo oscuro, un espaciado interior del 5% y un ancho fijo de 780px.

Campo de futbol

La zona más importante del campo de futbol es la cancha o zona de juego, lugar donde se lleva a cabo el partido.

A este elemento le aplico los siguientes estilos:

.campo {
    display: flex;
    justify-content: start;
    position: relative;
    width: 700px;
    height: 360px;
    background-image: url(../img/bg-green-grass.jpg);
    background-position: center;
    background-size: 100%;
    padding: 40px;
}

Es importante usar la propiedad display:flex donde los elementos que hay dentro van a estar posicionados al inicio. Hago referencia a la parte izquierda y derecha del campo de fútbol. La idea es que se posicionen uno al lado del otro.

Indicar que el campo es de posición relativa tampoco es una casualidad ya que es importante para posicionar de forma absoluta algunos elementos dentro del campo.

He decidido darle un ancho de 700px y una altura de 360px.

Le aplico una imagen de fondo que he encontrado por Internet. Si buscas «cesped» en Google podrás encontrar un montón de fondos para usar. Yo he elegido el que más me ha gustado y lo he posicionado al centro y con un tamaño del 100%.

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.

Debes saber que el campo de futbol está compuesto por 2 partes simétricas que definiré como zona izquierda y derecha. Son los lugares donde se ubican cada equipo en el campo en el inicio del juego.

Campo izquierdo y derecho

En el campo izquierdo puede ubicarse el equipo local y en el campo derecho el equipo visitante.

Le he aplicado los siguientes estilos al contenedor que representa el campo izquierdo:

.izquierda {
    position: relative;
    width: 50%;
    border: 2px solid #fff;
    border-right: none;
    overflow: hidden;
}

También defino una posición relativa porque en el campo izquierdo también voy a posicionar algunos elementos en posición absoluta.

Establezco un ancho del 50%.

Agrego un borde con ancho de 2px sólido y de color blanco para representar las líneas del campo.

Para no visualizar un borde duplicado en el centro de la cancha, decido quitar el borde derecho a la parte izquierda.

El overflow: hidden es importante para ocultar las partes no deseadas de los círculos que he creado para representar los corners.

Debido a que el campo derecho es simétrico, aplico un estilo muy similar:

.derecha {
    position: relative;
    width: 50%;
    border: 2px solid #fff;
    overflow: hidden;
}

Las porterías del campo de futbol

Si te fijas bien en la estructura HTML que ilustré al principio, podrás ver que la portería está compuesta por 2 contenedores a los que he aplicado los siguientes estilos:

.contenedor-porteria {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
 
.porteria {
    border: 2px solid #fff;
    width: 15px;
    height: 50px;
}
 
.porteria-izquierda {
    border-right: none;
}
 
.porteria-derecha {
    border-left: none;
}

El contenedor con class=»contenedor-porteria» lo considero importante agregar para poder centrar verticalmente la portería en el campo.

En este caso, sigo utilizando Flexbox para alinear los elementos del contenedor al centro con dirección vertical o en columna.

Para dibujar la portería le aplico un borde de 2px sólido de color blanco, un ancho de 15px y una altura de 150px.

A la portería izquierda le quito el borde derecho para que no se vean bordes superpuestos en la línea del campo.

Y a la portería derecha le quito el borde izquierdo.

Los corners del campo de futbol

Para construir los corners ha sido todo un reto pero finalmente he conseguido una solución bastante atractiva y fácil de entender.

Las esquinas del campo de futbol son los corners.

Con las siguientes reglas de estilo CSS puedo representarlos bastante bien:

.corner {
    border: 1px solid #fff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
 
.izquierda .corner-superior {
    position: absolute;
    top: -12px;
    left: -14px;
}
 
.izquierda .corner-inferior {
    position: absolute;
    bottom: -12px;
    left: -14px;
}
 
.derecha .corner-superior {
    position: absolute;
    top: -12px;
    right: -14px;
}
 
.derecha .corner-inferior {
    position: absolute;
    bottom: -12px;
    right: -14px;
}

Con la clase corner defino unos estilos genéricos para todos los saques de esquina.

En este caso quedan muy bien con un borde de 1px sólido de color blanco, un ancho y alto de 25px y un borde redondeado del 50% para conseguir una redonda.

Después, tan solo quedaría posicionar en el campo cada saque de esquina.

El corner superior del campo izquierdo queda definido en posición absoluta con un top de -12px y un left de -14px.

El corner inferior del campo izquierdo queda definido en posición absoluta con un bottom de -12px y un left de -14px.

El corner superior del campo derecho queda definido en posición absoluta con un top de -12px y un right de -14px.

El corner inferior del campo derecho queda definido en posición absoluta con un bottom de -12px y un right de -14px.

Las áreas del campo de fútbol

Cada parte del campo también tiene una zona que se denomina «area».

Las áreas del campo las he posicionado de forma absoluta dentro de cada campo de la siguiente forma:

.area {
    width: 90px;
    height: 160px;
    border: 1px solid #fff;
    top: 29%;
    position: absolute;
}
 
.izquierda .area {
    border-left: none;
}
 
.derecha .area {
    right: 0px;
    border-right: none;
}

La clase «area» es genérica para los 2 campos y queda establecida con un borde de 1px sólido de color blanco, un ancho de 90px, una altura de 160px, en posición absoluta al 29% de la parte de arriba.

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.

Resultado

Campo de futbol con CSS

Conclusiones

Parece una tontería pero haciendo algo que te gusta puedes aprender y desarrollar técnicas de maquetación que te van a venir muy bien en tus futuros proyectos.

En este artículo has aprendido varios trucos, destacando el uso de Flexbox y las posiciones absolutas.

Te dejo como faena completar este campo de futbol ya que le faltan algunos elementos como el punto de penalti o el semicírculo del área y todo lo que tu puedas imaginar. Si es de tu agrado, quizá también quieras agregar gente en la grada o posicionar jugadores.

También 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.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre