Todos estos modelos de títulos se han creado utilizando tipografías y diferentes propiedades CSS. Pueden usarse con cualquier tipo de etiqueta y estos ejemplos se muestran en un encabezado H6 que tiene estas definiciones:
h6 {
font-family: 'Times New Roman';
font-size: 24px;
font-weight: bold;
margin: 0;
}MODELO CON REFLEJOS
MODELO CON REFLEJOS
<style>
h6.reflect_1 {
border-top: 1px solid #4C4C4C;
border-bottom: 6px solid #444444;
color: #666666;
font-size: 24px;
line-height: 0.2em;
margin: 0;
padding: 0 0 0 10px;
}
h6.reflect_2 {
border-top: 1px solid #EEEEEE;
color: #AAAAAA;
font-size: 24px;
line-height: 0.6em;
margin: 0;
padding: 0 0 0 10px;
}
</style>
<h6 class="reflect_1">MODELO CON REFLEJOS</h6>
<h6 class="reflect_2">MODELO CON REFLEJOS</h6>
Web Design Rockstarz
<style>
h6.line_drop {
border-bottom: #BB0000 1px solid;
color: #BB0000;
font-family: 'Trebuchet MS', Garamond, Georgia;
letter-spacing: -2px;
line-height: .88em;
}
</style>
<h6 class="line_drop">Web Design Rockstarz</h6>
Morbi leo sapien, dapibus adipiscing justo sit amet mi!
Morbi leo sapien, dapibus adipiscing justo sit amet mi!
Morbi leo sapien, dapibus adipiscing justo sit amet mi!
<style>
h6.handwriting1 {
font-family: 'Comic Sans MS';
font-size: 105%;
font-style: italic;
font-weight: bold;
letter-spacing: -1px;
word-spacing: .25em;
}
h6.handwriting2 {
font-family:'Trebuchet MS', Garamond, Georgia;
font-size: 100%;
font-style: italic;
font-weight: 100;
letter-spacing: -1px;
word-spacing: .25em;
}
h6.handwriting3 {
font-family: 'Comic Sans MS';
font-size: 105%;
font-style: italic;
font-weight: 100;
letter-spacing: -1px;
word-spacing: .25em;
}
</style>
<h6 class="handwriting1">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>
<h6 class="handwriting2">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>
<h6 class="handwriting3">Morbi leo sapien, dapibus adipiscing justo sit amet mi!</h6>
Walt Whitman
<style>
h6.capital {
font-family: Georgia;
font-size: 375%;
font-weight: normal;
letter-spacing: -8px;
text-transform: uppercase;
}
h6.capital span {
font-size: 70%;
letter-spacing: -1px;
text-transform: lowercase;
}
</style>
<h6 class="capital">W<span>alt </span>W<span>hitman</span></h6>
Webdesign Times
Webdesign Times
<style>
h6.newspaper1 {
border-bottom: groove 2px #CCCCCC;
color: #6A6969;
font-size: 36px;
font-weight: 100;
letter-spacing: .10em;
line-height: 1em;
text-transform: uppercase;
}
h6.newspaper1 span {
font-family: Georgia, 'Times New Roman', Times, serif;
}
h6.newspaper2 {
border-bottom: groove 2px #CCCCCC;
color: #6A6969;
font-size: 36px;
font-variant: small-caps;
font-weight: 100;
letter-spacing: .10em;
line-height: 1em;
}
</style>
<h6 class="newspaper1"><span>Webdesign</span> Times</h6>
<h6 class="newspaper2">Webdesign Times</h6>
Funky
Webdesign!
<style>
h6.funky {
color: #666666;
font-family: 'Trebuchet MS', Garamond, Georgia;
font-size: 48px;
font-weight: normal;
letter-spacing: 20px;
line-height: .65em;
}
h6.funky span {letter-spacing: 5px;}
h6.funky em {color: #EEEEEE;}
</style>
<h6 class="funky">Fun<strong><em>k</em></strong>y <br /><span> We<em>b<strong>d</strong></em>esign!</span></h6>
SUBRAYADO ELEGANTE
<style>
h6.elegant {
border-bottom: #CCCCCC 1px solid;
color: #BBBBBB;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 100;
letter-spacing: 1em;
line-height: .8em;
}
</style>
<h6 class="elegant">SUBRAYADO ELEGANTE</h6>
Rock5tar and a De51gner
<style>
h6.num_blend {
font-size: 36px;
font-weight: 100;
}
h6.num_blend span {
color: #FF0000;
font-size: 24px;
font-style: italic;
font-weight: bold;
letter-spacing: 2px;
line-height: 1em;
}
</style>
<h6 class="num_blend">Rock<span>5</span>tar and a De<span>51</span>gner</h6>
Otro Estilo TypeWriter
<style>
h6.scaps {
font-family: 'Courier New', Courier, monospace;
font-size: 200%;
font-variant: small-caps;
font-weight: 100;
letter-spacing: -1px;
}
</style>
<h6 class="scaps">Otro Estilo Typerighter</h6>
distintos usos de la tipografía
usando valores pequeños para line-height
y valores negativos para letter-spacing
distintos usos de la tipografía
usando valores pequeños para line-height
y valores negativos para letter-spacing
distintos usos de la tipografía
usando valores pequeños para line-height
y valores negativos para letter-spacing
<style>
p.letters1 {
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
font-weight: 100;
letter-spacing: -2px;
line-height: .64em;
text-transform: uppercase;
}
p.letters2 {
font-family: 'Times New Roman', Times, serif;
font-size: 25px;
font-weight: 100;
letter-spacing: -2px;
line-height: .72em;
text-transform: uppercase;
}
p.letters3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 25px;
font-weight: 100;
letter-spacing: -2px;
line-height: .77em;
text-transform: uppercase;
}
</style>
<p class="letters1">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/> y valores negativos para letter-spacing</p>
<p class="letters2">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/>y valores negativos para letter-spacing</p>
<p class="letters3">distintos usos de la tipografía<br/>usando valores pequeños para line-height<br/>y valores negativos para letter-spacing</p>
Y algunos logos conocidos:
Gray's
Anatomy
G
o
o
g
l
e
FedEx
Y
A
H
O
O
!
<style>
/* Gray's Anatomy */
h6.gr {
border-bottom: #CC0000 10px solid;
color: #999999;
float: left;
font-family: Impact, Arial, Verdana;
font-size: 500%;
font-weight: 100;
margin: 0;
text-transform: uppercase;
}
h6.gr2 {
color: #999999;
float: left;
font-family: Impact, Arial, Verdana;
font-size: 500%;
font-weight: 100;}
margin: 25px 0;
position: relative;
text-transform: uppercase;
/* Google */
div.google h6 {
font-size: 500%;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 100;
float: left;
margin: 0;
}
h6.g {color: #133BC1;}
h6.o1 {color: #E33B21;}
h6.o2 {color: #E6B500;}
h6.l {color: #4BCE54;}
h6.lg {color: #0048E3;}
h6.e {color: #E33B21; font-style: italic;}
/* FedEx */
h6.fed {
color: #660099;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 500%;
letter-spacing: -.08em;
}
h6.fed span {
color: #999999;
font-size: 105%;
margin: 0 0 0 -.1em;
}
/* Yahoo */
div.yahoo h6 {
color: #FF0000;
font-family: Garamond, Georgia, 'Times New Roman';
float: left;
font-weight: 0;
text-transform: uppercase;
}
h6.y1 {
font-size: 500%;
margin: 0;
}
h6.y2 {
font-size: 350%;
margin: 15px 0 0 -10px;
}
h6.y3 {
font-size: 350%;
margin: 8px 0 0px -5px;
}
h6.y4 {
font-size: 300%;
margin: 12px 0 0px -5px;
}
h6.y5 {
font-size: 350%;
margin: 6px 0 0px -1px;
}
h6.y6 {
font-size: 350%;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 4px 0 0px -1px;
text-transform: none;
}
</style>
<h6 class="gr">Gray's</h6><h6 class="gr2"> Anatomy</h6>
<div class="google"><h6 class="g">G</h6><h6 class="o1">o</h6><h6 class="o2">o</h6><h6 class="lg">g</h6><h6 class="l">l</h6><h6 class="e">e</h6>e</div>
<h6 class="fed">Fed<span>Ex</span></h6>
<h6 class="y1">Y</h6><h6 class="y2">A</h6><h6 class="y3">H</h6><h6 class="y4">O</h6><h6 class="y5">O</h6><h6 class="y6">!</h6>
REFERENCIAS:
41 comentarios:
Que bonito y que bonitoooo ¡mañana las pruebo todas!! mejor dicho... luego las pruebo :)
Muy interesante!! Esperaba no ser la primera en comentar, si, ya veo que lo hizo gem@, pero ella sabe...
Y yo siempre la burra que tengo que preguntar... :( Me gustaría poner algún título de estos, pero no entiendo bien donde habría que poner el código h6 dice, pero en que sitio va? Solo en cualquier parte del css? O en algún lugar específico? Ya me da verguenza pasarme la vida preguntando todo... :$
El de google logró un efecto muy similar al de el logo
JMiur la misma pregunta de canelita pero mas complicada, jaja como se aplican estos Css paso a paso como seria para q quede ese resultado??
andaleee!!!! estan increibles pero andamos en la misma duda como se aplica??? un abrazo jmiur como siempre unos post de excelente calidad y utilidad!
:P ohhh qué bello!!!...me encantan JM!!! voy a probar qué me sale!!!...besitos!!!
Wow! Gracias por compartir :D, de seguro me ayudará a matar el aburrimiento en algún momento.
:)me agrego este post para cuando haga un cambio en mi index.
Muy bonitas esas tipografias y lo bueno que encima se puede modificar a gusto de uno.
Muy buen aporte Jmiur. ;)
Que bien... :) Lo probaré a ver que tal... Saludos!
Hola Vagabundia me gusta mucho tu blog y por lo tanto me encantaria invitarte a este concurso que realisare en mi blog se trata de un diseño para el. Si te interesa este concurso por favor participa y averigua mas en el blog saludos german
Paramore Actualidad
xkravenx@hotmail.es
¿Cómo usarlo? Eso depende mucho de dónde quiere utilizarse. Un ejemplo práctico, supongamos que quiero cambiar los títulos de la sidebar.
En una plantilla, por lo general, están defindos así:
.sidebar h2 {
........
........
}
Quiero cambiarlo por el segundo modelo que es el más sencillo. Tomo las propiedades que están en h6.line_drop { } y las coloco allí:
.sidebar h2 {
border-bottom: #BB0000 1px solid;
color: #BB0000;
font-family: 'Trebuchet MS', Garamond, Georgia;
letter-spacing: -2px;
line-height: .88em;
}
Me ha encantado este post. De hecho voy a adoptar uno de estos diseños.
Siempre he querido usar una fuente que simulara texto manuscrito. Hay muchas muy chulas por ahí, pero sabía que no debía usar fuentes "no-estándar". Ahora me has dado una solución bastante buena.
Un saludo.
Esas que parecen manuscritas son muy interesantes. Espero que se vean bien :)
Ahh... a propósito de lo que dice Olomán, estas fuentes las puede ver cualquiera no? Porque otras si no se tiene en la pc, no las pueden ver...
Y con respecto al uso, si las quiero poner en los títulos de los post, donde iría el código h6?
Si. Como dice Oloman, justamente esa es la parte interesante. Las fuentes son las normales en una PC.
Esto le da un toque exquisito al blog y te hace matar tiempo en él!!!.
No puedo encontrar en ningún lado de mi plantilla de Te Propongo donde está la porción de código que corresponde a los títulos de las entradas :(
Quería probar con alguna de estas fuentes a cambiar los títulos pero no puedo...
Vos diste de ejemplo para cambiar los títulos de la sidebar, traté de guiarme por eso pero no puedo encontrar nada que se parezca para las entradas... :'(
En .post h3 k_nelita :X
Disculpas J.Miur por meterme donde no me llaman es para decirle a k_nelita...
En post h3 tienes los estilos de los títulos, como es un enlace para modificar esa parte debes hacerlo en .post h3 a, .post h3 a:visited, .post h3 strong y si es para el efecto hover en .post h3 strong, .post h3 a:hover
Hazle caso a Gem@, k_nelita.
Es que en las plantillas, los encabezados varían mucho de un modelo a otro.
Mi gozo en un pozo J.
A IE no le sientan bien los valores negativos para el LETTER-SPACING. Resulta que omite los saltos de línea sin BR, los que se introducen en el editor simplemente dejando una línea en blanco. Tal y como se hace en este mismo formulario. El resultado es que tras un punto y aparte, pasa justo a la siguiente línea.
No he comprobado si con <p> se solucionaría, pero es que aunque fuera así, no me apetece modificar ahora todos mis posts.
Esperaré otra solución porque con PT's tampoco funciona y con EM, la cosa todavía va peor.
Necesitaría saber qué estás intentando hacer.
letter-spacing acepta valores positivos y negativos sin problemas, tanto en IE como en Firefox. Si te fijas en este mismo post, verás que, salvo las diferencias en la forma en que se renderizan las fuentes, el resto, se ve exactamnte igual, sin usar saltos de línea explícitos.
¿Dónde quieres colocar el código?
:( Cómo 500 caracteres escritos y se me queda colgado sin publicarlos.
A ver, intentaba escribir que quiero poner el estilo HANDWRITING en todo el blog. Por cierto que no pusiste el título, lo vi en el CF. Para ello, en el BODY coloco la fuente y el espaciado negativo entre letras. El de palabra no, porque no me interesa. No obstante el resultado poniéndolo es el mismo.
* Escribiendo o editando un post, cuando quiero hacer párrafos, escribo un texto, intro+intro para dejar una línea en blanco y luego sigo escribiendo. Lo normal es que luego muestre dos párrafos separados por una línea en blanco.
* Sin embargo, al incluir la instrucción del espaciado negativo, los párrafos creados de esta manera me aparecen juntos, tal y como he hecho -adrede- en estos dos últimos que he escrito.
He probado en tres plantillas muy distintas por si fuera alguna parte de mi código que se pegara con esto, pero en los tres el resultado ha sido el mismo: si no hay separaciones provocadas por algún tipo de etiqueta, pues la cosa se amontona.
En tu ejemplo veo que cada estilo de los tres citados, tiene una sola línea de texto y además incluyes BR entre ellas.
Si pudieras hacer en uno de ellos un par de líneas (o párrafos) redactadas como te indico, podríamos terminar de comprobar si es mi plantilla o IE.
En cualquier caso, gracias por (pre)ocuparte por esto.
Ya entiendo el dilema. Parecería que es una limitaciòn de IE pero, tiene solución, basta definir la etiqueta BR.
Por ejemplo, en mi blog de pruebas he colocado uno de esos estilos para los posts. Las entradas, están realizadas normalemtne, sin saltos de línea explícitos, igual que este post. Si los ves al leer el código fuente es porque eso es justamente lo que hace Blogger, agregarlos al generar la página ya que en HTML no existen las líneas en blanco.
Como sólo voy a probar ese estilo en los posts, agrego algo así:
.blog-posts {font-style: italic;font-weight: 100;font-family: 'Comic Sans MS';letter-spacing: -1px;font-size: 105%;}
y luego esto:
.blog-posts br {letter-spacing: 0px;}
¡¡¡Eres una máquina!!! :D Ahora sí que funciona correctamente.
Nunca me acuerdo de que todas las etiquetas se pueden redefinir en el CSS y que eso sirve para solucionar muchos problemas.
Muchísimas gracias por la rapidez y perdón por las molestias.
Me alegro que sirviera. Ahora lo saco de mi blog de pruebas porque no entiendo nada de lo que escribo :D
¿Se podría adaptar para usar no como título del blog, sino como título de los posts?
Sí, anakyn pero, los detalles dependerán de cada plantilla. No debería haber problemas en hacerlo.
Que apurado por sacarlo, llegué tarde y no pude verlo, ayer no me conecté, y ensima un troll (en el de pruebas) haciendose pasar por mi, mi Dios, a donde vamos a parar, hasta en los blogs de prueba...
Gracias gem@ y JM por las indicaciones, pero no se si me anime a hacerlo, estoy medio cobarde estos días...
k_nelita cambia la url del blog de pruebas es lo más fácil para que tu troll te deje tranquila o en configuración del perfil no muestres los blogs de pruebas ;)
Ja ja jaaaa no gem@, en el blog de pruebas de JM, que entré para mirar lo de las fuentes y habían escrito comentarios y hay dos "supuestamente" míos, gracias igual por los consejos, a mi mucho no me molestan en mis blogs, es en los blogs importantes donde se cuelan ja ja ;)
k_nelita: esos dos comentarios que ves ... los hice yo :D
Son de la época en que veíamos el tema de los comentarios falso ¿recuerda? Bueh. Alli quedaron :D
Ahh ja ja jaaa pero bueno, podrías haber dejado la muestra que le hiciste a Oloman, quería ver como quedaba, la comic sans me gusta aunque a vos no, por lo que veo :D
Igual lo que quería era cambiar la fuente de los títulos de los post y esa no era la fuente que elegiría, no se cual todavía, no me termina de convencer ninguna para títulos...
Es que lo que quería Oloman era probarlo en todo el blog y eso hacía que el mio quedara bastante ilegible :D
Hola JMiur!
Quería saber como lo hiciste con los títulos de la sidebar que tienes en tu blog ¿? Me gusto mucho el estilo y me encantaría agregarlo en el mío.
De atte. mano gracias por la ayuda.
Sidhe
Si te refieres a colocarlos en dos colores, es bastante sencillo, prometo explicarlo en un post en unos dias porque en este formulario me resultaría engorroso de escribir.
A mi también me gustaría de esa entrada de los títulos bicolor :)
Doble promesa, entonces :D
Bueno, estaré esperando ese post!!!
Promesa hecha jamás desecha :D
Gracias!
Sidhe
hola hermano, necesito saber como pongo eso en el titulo encabezado, como quieras llamarlo del blogspot
No hay una respuesta simple para eso. Vas a tener que buscar en tu plantilla esta parte:
<div class="titlewrapper">
<h1 class="title"> ......... </h1>
</div>
Y cambiar eso en negrita para que se adapte al modelo. Luego, agregar las definiciones CSS antes de </b:skin>
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...