¿Se puede dibujar con CSS y HTML?

Dibujar con CSS en HTML y sus resultados

Tanto CSS y HTML permiten dibujar y hacer trabajos de diseño, aunque presentan algunas dificultades ya que no son lenguajes pensados con este fin en concreto. CSS es una sigla que proviene del inglés, Cascading Style Sheets o Hojas de Estilo en Cascada, y se inscriben en el código HTML para darle estructura y estilo a una página web.

Para aprender a dibujar con CSS y a través del código HTML, es importante tener algunas nociones sobre el funcionamiento de este lenguaje, sus limitaciones y alcances. Practicar con CSS es mucho más ameno cuando se realizan tareas divertidas, y pocas cosas hay más divertidas que dibujar y lograr formas entretenidas mediante lenguaje de código.

¿Cómo dibujar en HTML con CSS?

Para comenzar a práctica dibujando en HTML mediante CSS, lo primero que hay que hacer es seleccionar una imagen a replicar. Debe tener conceptos geométricos simples. De esta manera puedes conseguir mediante círculos y cuadrados darle forma a tus diseños aún a través de CSS.

Las etiquetas HTML forman un conjunto de cajas a lo largo de toda la web. Por eso hay que empezar con un contenedor principal y desde allí ir desprendiendo tu creación. ¿Qué quieres diseñar? En uno de los ejemplos más extendidos, se enseña cómo dibujar un oso tierno y divertido usando cuadrados y círculos. Al menos en el comienzo, luego se torna más complejo.

Si vas a hacer el diseño del oso, por ejemplo, arranca con una gran caja cuadrada de 500 píxeles y dentro de la figura, harás el dibujo. La caja se crea mediante una etiqueta HTML conocida como div.

Empieza a observar el dibujo, y analiza cuantas cajas necesitarás crear. También es importante tener en cuenta qué cajas van dentro de cuáles otras. Este proceso puede resultar un tanto extraño al plantear como se dibuja, pero ayuda a contar con una ruta más ordenada y también más clara para poder trabajar. El esquema en forma de cajas debe ser completo, así puedes tener una idea total del número de cajas que puedes llegar a necesitar.

Definir los colores de antemano para dibujar en CSS y HTML

Uno de los pasos más relevantes para que el resultado de un dibujo en CSS sea satisfactorio, es elegir los colores. En este lenguaje, los colores están identificados con códigos. Por eso, hay que tenerlos ya determinados y usar variables de identificación para luego seleccionar rápidamente el código acertado. De esta manera puedes rastrear más fácilmente cada color y en qué caja se ubican.

Empezar a crear y dibujar con CSS en HTML

Siguiendo con el ejemplo del dibujo de un oso, haremos el primer contenedor principal. De acuerdo a la imagen de base, tiene que ser un contenedor circular. Elegimos el parámetro border-radius 50% para determinar su tamaño. Si quieres que la cara del osito esté centrada, utiliza el comando flex y la alineación central para los ejes vertical y horizontal.

La cabeza (“head”) es un div ovalado donde estarán alojados todos los componentes. Dentro de este div vamos a colocar todos los elementos con clases que sirvan para describir de forma explícita las partes: eye, nose, ear, mouth. Esta diferenciación por clases ayuda a que sea más simple asignar estilos específicos para cada parte.

Algunos elementos repiten estilo, por ejemplo los ojos y las orejas. Así que hay que ser específicos e indicar si es el ojo izquierdo (eye-left) o el ojo derecho (eye-right). Realiza esta diferenciación con cada componente que repita un estilo. En el lenguaje CSS, para posicionar e identificar correctamente elementos hay que utilizar los parámetros position:relative y position:absolute. Posiblemente utilicemos estos indicadores con cada uno de los elementos en CSS, para que la ubicación en pantalla sea siempre la correcta y precisa. Para que las distancias sean precisas tenemos que manejar las mismas medidas de distancia en ambos parámetros.

Dibujar con CSS y HTML no es fácil

Muchos diseñadores web utilizan la posibilidad de dibujar con CSS como una manera de convertir la página en un lienzo artístico. Pero lo cierto es que la propuesta es bastante compleja y los resultados distan de ser los mejores. Puede ser una alternativa en situaciones puntuales, pero requiere un nivel de conocimiento avanzado y termina resultando poco práctico.

Como ejemplo, basta con hacer un cuadrado. Donde programas y lenguajes pensados para dibujo te dejan crear la figura en cuestión de segundos. En CSS tienes que darle forma desde el lenguaje a cada uno de los parámetros. Así, debes fijar el estilo, darle forma, generar el ancho y el largo, la profundidad y los colores. Todo esto mediante palabras y parámetros que si no están perfectos, arrojarán un resultado erróneo en tu página.

Cómo hacer un oso con CSS

Pero aún con las críticas y dificultades que presenta, hay quienes lo eligen para hacer algunos gráficos en sus páginas web. Eso sí, necesitas conocer varias propiedades y funciones CSS diferentes, así que prepárate para un proceso un tanto tedioso y de aprendizaje para poder sacar grandes obras de arte.

¿Por qué dibujar con CSS en HTML?

El verdadero objetivo detrás del desafío de dibujar con CSS puede ser la razón detrás de seguir intentándolo. Aún cuando este tipo de lenguaje no está pensado para facilitar el dibujo, la capacidad está allí y es viable. Los hackers y los programadores que tienen el mayor conocimiento de CSS, muchas veces deciden dibujar y hacer obras de arte con esta modalidad simplemente por el desafío que ello supone.

Alrededor de Internet, puedes encontrar todo tipo de galerías con piezas de dibujo creadas usando CSS. Si intentas repetir estos pasos, o si quieres simplemente divertirte y aprender sobre ellas, puedes revisar este artículo y otras propuestas en foros y espacios de redes sociales.

Las consideraciones principales entonces al dibujar con CSS son:

  • No tienes restricciones, ya que no hay reglas para el dibujo con código.
  • Intenta que tu dibujo tenga la menor cantidad posible de código. De esta forma, obtendrás resultados óptimos para tu web.
  • Trata de que tu dibujo tenga un solo div.
  • Para avanzar a mayor complejidad, trata de que no haya ningún div y solamente un body.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.