Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Cajas de aviso

Cajas de aviso elegantes

Escrito por Administrador - 20/septiembre/2011


Haora toca el turno de crear cajas de aviso elegantes, como su nombre lo dice son cajas en donde nosotros podemos comunicar cosas en especifico, como por ejemplo una novedad, una regla, un articulo, una noticia etc.

Vamos a dividir las cajas en aviso, acierto y error, asi que seran 3 cajas diferentes, y en cada una podemos publicar cosas distintas deacuerdo a la caja en donde este.

Vamos a empezar con la primera caja que es la de aviso, la caja tomara un aspecto llamativo y con un icono de aviso como se muestra a continuacion:


Aqui puedes escribir algun aviso, noticia, algun comunicado que quieras hacer, o talvez un anuncio de ultima noticia

Y bien para poder crear esa caja de aviso lo que hize no fue gran cosa, simplemente puse un borde de color amarrilo al igual que el fondo, centre una imagen representativa de aviso, claro teniendo un padding para separar el contenido del borde justo asi: Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.cajaaviso {
background: #ffffe0 url(URL DE TU ICONO DE AVISO) no-repeat 10px;
width: 580px; /* Esto es el ancho de la caja de aviso */
padding: 7px 10px 7px 37px; /* Separamos un poco el contenido del borde*/
border: 1px solid #f0ea8b; /* Esto es color del borde y su grosura  */
-moz-border-radius: 5px;
-webkit-border-radius: 5px; /* Aplicamos un borde de radio a la imagen de aviso */
font-size:11px; /* Esto es el tamaño de letra */
}

Ya pegado el css de la caja de aviso vamos a mostrar dicha caja utilizando un div con la class de la caja de aviso justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se vea la caja de aviso

<div class="cajaaviso">Aqui escribe el contenido de la caja de aviso</div>


Bien haora vamos con la siguiente caja que es la de acierto, esta tendra un color verde y llamativa como se muestra a continuacion:


Aqui puedes poner un aviso acertivo como por ejemplo: algun proyecto con exito, o un triunfo...

Para esto igual que la otra caja tomamos los mismos atributos pero aqui cambiamos la imagen y el color de fondo y borde. Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.cajaacierto {
background: #dfffe4 url(URL DE TU ICONO DE ACIERTO) no-repeat 10px;
width: 580px;  /* Esto es el ancho de la caja de acierto */  
padding: 7px 10px 7px 37px;   /* Separamos un poco el contenido del borde */  
border: 1px solid #94d19e;   /* Esto es el color y la grosura del borde*/  
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   /* Ponemos un borde de radio a la imagen */  
font-size:11px;   /* Esto es el tamaño de letra  */  
}

Ya pegado el css de la caja de acierto vamos a mostrar la caja con un div class justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se vea la caja de acierto

<div class="cajaacierto">Aqui escribe el contenido de la caja de acierto</div>


Y por ultimo la siguiente caja es la de error, esta tendra un color rojo y una imagen de un tache, sin duda es una buena representacion de un error como se muestra a continuacion:


Aqui puedes poner un aviso de error, como por ejemplo: algun proyecto que no salio bien o algun problema en la web

Para esta caja al igual que las otras dos vamos a poner los mismos atributos, pero vamos a cambiar la iamgen, el color de fondo y borde. Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.cajaerror {
background: #ffe8e8 url(URL DE TU ICONO DE ERROR) no-repeat 10px; 
width: 580px;   /* Esto es el ancho de la caja de error*/
padding: 7px 10px 7px 37px;   /* Separamos el contenido del borde*/
border: 1px solid #ff8a8a;   /* Esto es el color y grosor del borde */    
-moz-border-radius: 5px;
-webkit-border-radius: 5px;   /* Aplicamos un borde de radio a la imagen de error*/    
font-size:11px;   /* Esto es el tamaño de letra*/    
}

Despues de aver pegado el css de la caja de error vamos a mostrarla con un div class correspondiente justo asi: Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que se vea la caja de error

<div class="cajaerror">Aqui escirbe el contenido de la caja de error</div>


Con esto hemos terminado las tres cajas de aviso, sin duda seran de gran ayuda para mantener a nuestros visitantes informados de cuaqluier actualizacion.





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos



Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=