Muchas veces nos encontramos con la necesidad de comunicarle a los visitantes de un sitio o los usuarios de un sistema ciertos mensajes de importancia que tenemos intención que se destaquen, estos mensajes pueden ser de alerta, información, peligro o archivos.
A veces no alcanza solo con poner un texto y necesitamos hacerlo sobresalir, aparte, es una buena oportunidad para dar mayor definición a la identidad del sitio y para darle un toque mas profesional a tu trabajo como diseñador.
A continuación voy a mostrarte como crear de una manera muy fácil 4 tipos de mensajes diferentes con CSS para que puedas usar en tus proyectos.
Vamos a empezar con un poco de teoría (y si, siempre viene bien): Como dije anteriormente vamos a hacer 4 tipos de mensajes cada uno con características únicas que le darán identidad y harán que sobresalgan:
1. Informacion
Vamos a utilizar un color celeste/azulado que es un color frio, tranquilo que transmite paz.
2. Peligro
Vamos a utilizar colorado que es potente, agresivo y calido.
3. Atención
Vamos a emplear el amarillo que es un color actuivo y eléctrico asociado con alertas.
4. Archivos
Vamos a utilizar un color gris neutral que no interfiera en la información que mostramos ni le dara ninguna connotación.
Bueno, ahora si manos a la obra! Para empezar vamos a un archivo HTML normal, en el que vamos a insertar 4 DIVs, cada uno con un calse diferente dentro del body (entre <body> y </body>, esto lo hacemos de la siguiente forma:
Si vemos como se ve en un navegador (por ejemplo en Chrome) veremos que solo nos aparece el mensaje que colocamos entre los tags <div> y </div> sin ningun format, eso se debe a que todavia no le dimos ningun estilo a las clases que declaramos anteriormente.
Para darle formato a los div vamos a utilizar clases (class=””) para definir los estilos de los divs en vez de ID (id=””) por una simple razón, asi lo podremos definir una vez y llamarlo cuantas veces querramos incluso diferentes veces en una misma pagina.
El siguiente paso es definir los estilos: Vamos a empezar por crear las clases para eso escribimos el siguiente código antes de la etiqueta de </head>:
Fijate que cuando definimos una clase en CSS debemos poner un punto (.) seguido por el nombre de la misma, por ejemplo “ .nombreDeClase “ (sin paréntesis) .
Lo primero que vamos a colocar dentro de los paréntesis curvos es la propiedad de padding: 15px; esto le dara aire entre los limites del DIV y el contenido que pongamos dentro, y lo segundo va a ser un border: thin solid; de a poco va tomando forma, esta propiedad de padding y de border va a ser común para los cuatro asique vamos a copiarlo y pegarlo dentro de los paréntesis curvos de todos quedando asi:
Y si lo ejecutamos en el navegador lo vamos a estar viendo asi: Ya nos estamos acercando de a poco al objetivo, primero, definiendo lo que tienen en común que es el formato y las dimensiones.
Perfecto, ahroa lo que enecesitamos es darle mas estilo a los divs y lo vamos a hacer dándoles propiedades de color a cada una de las clases como vas a ver a continuación:
Una vez que terminamos de definir los estilos como hicimos arriba lo único que queda por hacer es llamar al div con la clase que queres mostrar cuando lo necesites y listo! Por ejemplo a continuación te pongo una imagen de cómo quedaría dentro de contenido el cartel de ALERTA!
Bueno espero que te haya gustado y servido, se que es básico, pero suficiente para dejarte en manos de tu propia imaginación ahora, queres mas? Bueno te recomiendo que busques alguna imagen de icono para poner de fondo que corresponda a la tematica de cada clase, que juegues con las tipografias o lo que tengas ganas.
Eso es todo por hoy, buenas noches, buenos diseños.
MBWebStudio
A veces no alcanza solo con poner un texto y necesitamos hacerlo sobresalir, aparte, es una buena oportunidad para dar mayor definición a la identidad del sitio y para darle un toque mas profesional a tu trabajo como diseñador.
A continuación voy a mostrarte como crear de una manera muy fácil 4 tipos de mensajes diferentes con CSS para que puedas usar en tus proyectos.
Vamos a empezar con un poco de teoría (y si, siempre viene bien): Como dije anteriormente vamos a hacer 4 tipos de mensajes cada uno con características únicas que le darán identidad y harán que sobresalgan:
1. Informacion
Vamos a utilizar un color celeste/azulado que es un color frio, tranquilo que transmite paz.
2. Peligro
Vamos a utilizar colorado que es potente, agresivo y calido.
3. Atención
Vamos a emplear el amarillo que es un color actuivo y eléctrico asociado con alertas.
4. Archivos
Vamos a utilizar un color gris neutral que no interfiera en la información que mostramos ni le dara ninguna connotación.
Bueno, ahora si manos a la obra! Para empezar vamos a un archivo HTML normal, en el que vamos a insertar 4 DIVs, cada uno con un calse diferente dentro del body (entre <body> y </body>, esto lo hacemos de la siguiente forma:
Si vemos como se ve en un navegador (por ejemplo en Chrome) veremos que solo nos aparece el mensaje que colocamos entre los tags <div> y </div> sin ningun format, eso se debe a que todavia no le dimos ningun estilo a las clases que declaramos anteriormente.
Para darle formato a los div vamos a utilizar clases (class=””) para definir los estilos de los divs en vez de ID (id=””) por una simple razón, asi lo podremos definir una vez y llamarlo cuantas veces querramos incluso diferentes veces en una misma pagina.
El siguiente paso es definir los estilos: Vamos a empezar por crear las clases para eso escribimos el siguiente código antes de la etiqueta de </head>:
Fijate que cuando definimos una clase en CSS debemos poner un punto (.) seguido por el nombre de la misma, por ejemplo “ .nombreDeClase “ (sin paréntesis) .
Lo primero que vamos a colocar dentro de los paréntesis curvos es la propiedad de padding: 15px; esto le dara aire entre los limites del DIV y el contenido que pongamos dentro, y lo segundo va a ser un border: thin solid; de a poco va tomando forma, esta propiedad de padding y de border va a ser común para los cuatro asique vamos a copiarlo y pegarlo dentro de los paréntesis curvos de todos quedando asi:
Y si lo ejecutamos en el navegador lo vamos a estar viendo asi: Ya nos estamos acercando de a poco al objetivo, primero, definiendo lo que tienen en común que es el formato y las dimensiones.
Perfecto, ahroa lo que enecesitamos es darle mas estilo a los divs y lo vamos a hacer dándoles propiedades de color a cada una de las clases como vas a ver a continuación:
Una vez que terminamos de definir los estilos como hicimos arriba lo único que queda por hacer es llamar al div con la clase que queres mostrar cuando lo necesites y listo! Por ejemplo a continuación te pongo una imagen de cómo quedaría dentro de contenido el cartel de ALERTA!
Bueno espero que te haya gustado y servido, se que es básico, pero suficiente para dejarte en manos de tu propia imaginación ahora, queres mas? Bueno te recomiendo que busques alguna imagen de icono para poner de fondo que corresponda a la tematica de cada clase, que juegues con las tipografias o lo que tengas ganas.
Eso es todo por hoy, buenas noches, buenos diseños.
MBWebStudio