Facebook utiliza un par de diferentes tipos de notificaciones, incluidas las barras que se pegan a la parte inferior de la página. Este truco no es difícil de poner en práctica en su propia página web, aunque llevará codificación adicional por encima y más allá de CSS (Cascading Style Sheets) para crear el texto de las propias notificaciones. Todo lo que se necesita es un poco de HTML sencillo para crear la caja de texto, el estilo de la propia caja, a continuación, una sola línea de CSS para que el cuadro de pegajoso.
Instrucciones
1
Abra su página Web en el Bloc de notas o un editor de código y desplácese hacia abajo a un lugar por encima del cierre "</ body>" etiqueta, por encima de cualquier "<script>" etiquetas que pueden encontrar allí. Crear un div en el código HTML y darle un nombre de ID de Añadir a este div una parte, y un párrafo "notificación.":
<Div id = "notificación">
<H3> Notificación </ h3>
<P> El texto de la notificación va aquí. </ P>
</ Div>
2
Abra la hoja de estilos para su sitio web en el Bloc de notas o un editor de código. En una línea nueva, agregar selectores para el div, su título y el texto del párrafo:
notificar {
}
notificar h3 {
}
notificar p {
}
3
El estilo de la caja de la notificación primero. Si usted desea hacer coincidir el estilo Facebook, utilice un fondo blanco con un borde de color gris claro y darle texto gris oscuro. Establezca una anchura de la caja, así:
notificar {
fondo: blanco;
color: # 555;
font-family: Arial, sans-serif;
font-size: 12px;
frontera: #ccc sólido 1px;
width: 200px;
}
4
El estilo de la cabecera con el texto blanco sobre un fondo azul, a continuación, añadir un poco de relleno. También debe desactivar los márgenes poniéndolos a cero:
notificar h3 {
background: # 899ecb;
color: blanco;
font-size: 12px;
border-bottom: 1px solid # 6d8bc9;
padding: 5px 20px;
margin: 0;
}
5
Dale algo de relleno en el párrafo dentro de la notificación:
notificar p {
padding: 10px 20px;
}
Puesto que ya una decoración cuidada las fuentes de toda la caja dentro de la "#notify {}" regla de estilo, que no es necesario para el estilo en esta regla.
6
Volver a la "#notify {}" regla de estilo y añadir un poco de posicionamiento:
position: absolute;
inferior: 0;
derecha: 0;
Este código pondrá el cuadro de notificación en la esquina inferior derecha de la pantalla del navegador. Si el resultado es la página en un navegador e intenta desplazarse hacia abajo, el cuadro no se pegue a esa esquina.
7
Una línea de código CSS se solucionará el cuadro en su lugar:
position: fixed;
Cambie el "absoluto" que utilizó para el posicionamiento antes de "fijo". Ahora el cuadro se pegará a la esquina inferior.
Consejos y advertencias
- Las instrucciones aquí cubren sólo la creación del cuadro de notificación en CSS y no cubren las animaciones, la actualización o la entrega de las notificaciones. Pruebe un script jQuery para cualquier animaciones que desee y entregar mensajes individuales a los usuarios a través de un script del lado del servidor. PHP es un ejemplo de un lenguaje de script del lado del servidor.
- "Posición: fijo" no funciona en Internet Explorer 6, pero funciona en las versiones 7 en adelante.