.GIF){kind=small}
Hace mucho que no publicaba, la verdad es que es por falta de tiempo y cuestiones de salud, además que había dicho que no me podría pasar muy seguido por aquí pero que le haré al fin no hay mucha actividad...
En este tutorial les diré como hacer un sencillo pero particular estilo como dialogo muy curioso que he visto recientemente en varias páginas y Blog de Internet.
Este es un ejemplo
Nota el pequeño rectángulo que da la impresión de que es un dialogo
Te gusta?
Sigue leyendo más abajo
y descubre como hacerlo
Nota el pequeño rectángulo que da la impresión de que es un dialogo
Te gusta?
Sigue leyendo más abajo
y descubre como hacerlo
En general lo usan como cita o Blockquote aunque yo lo uso como un bloque cualquiera metido en una clase es cuestión de que uso le quieras dar...
Antes de comenzar quiero aclarar que no copio tutoriales ni códigos de ninguna página (suelo usar algunos tutoriales para el blog pero siempre con créditos) y mucho menos hablo sin conocer de lo que estoy tratando.. vi un comentario anónimo que la verdad me molesto donde decía que copiaba de su Blog y cuando me fui a ver quien copio 2 de mis tutoriales fueron ellos, por fortuna no hago caso de estas cosas y no me dañan en absoluto pues no soy experta pero pueden preguntarme y siempre resolveré dudas que surjan sobre los temas de mis post en este mi querido Blog.
Bueno entonces comencemos
... . ... Tutorial ... . ...
-Debes saber las propiedades y valores básicas de Css: si bien puedes buscarlas en Internet es mucho más fácil saberlas (en estos días estaré subiendo una tablilla con algunas)
-Tener una tabla de colores: de preferencia códigos hexadecimales aunque puedes usar los nombres en inglés (Tablita de Wiki)...
-Saber donde aplicar los estilos en la hoja .css y como establecerlo en las entradas.
En la opción Plantilla = editar Html copia este código y pegalo antes de ]]></b:skin>
blockquote {background: #d5b4ae; /*color de fondo*/Lo que esta de este color es la propiedad que indica que se aplicarán los valores dentro de los { } a todas las citas a las cuales les des esta etiqueta <blockquote> </blockquote>.
padding: 10px; /*es la distancia interior entre el borde y el contenido*/
position: relative;
border-radius: 5px; /*Define que tan redondo quedará*/
width: 400px; /*modifica el ancho del elemento*/
color: #eee; /*color de la letra*/
border-right: 1px solid #eee; /*borde derecho*/
border-bottom: 1px solid #eee; } /*borde izquierdo*/
blockquote {display: block;
margin: auto;
box-shadow: 2px 2px 2px #BD887F; /*sombra del cuadro (solo modifica el color)*/
}
blockquote:before {content: "";
border-top: 10px solid transparent;
border-right: 10px solid #d5b4ae; /*mismo color que el fondo de tu cuadro*/
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
position: absolute;
left: -20px;
top: 20px;
margin: auto; }
Puedes modificar todo lo que tenga un comentario (lo que esta encerrado entre /* y */ ) y dejar lo que no tiene ninguno.
Si tienes alguna duda o no te quedo claro algo me puedes dejar un comentario, la verdad ni yo misma entendí muy bien mis vagas explicaciones pero como dije estoy disponible para dudas...
