Re: APRENDAMOS A DISEÑAR

por Invitado Lun 17 Feb 2014, 10:05 am

vicstyles escribió:Hola chicas! Primero que nada gracias por este espacio :) hace un tiempo había un post similar pero se dejó de lado no recuerdo porqué. Bueno, con el tema de la caja me fue bárbaro, pero no termino de entender lo de la font. Nose como cambiarle el tamaño, creo que hago lo que dice en el tuto pero evidentemente no porque siempre queda igual. Les dejo el code para ver si pueden ayudarme con mi error.

El problema es que has puesto size en lugar de font-size. Cámbialo y debería funcionar perfectamente ♥

Código:: <center><div style="background-image: url(http://cdnpix.com/show/imgs/198b24dfa1175efc02bcfd9ed230494e.jpg); width: 450px; height: 300px;"></div></center><link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'><div style="font-family: 'Parisienne', cursive; color: #ff6633; font-size: 111px; text-align: justify;">Erin Heatherton</div>

por Invitado Lun 17 Feb 2014, 10:09 am

Por cierto, me gustaría añadir algo que creo que no se ha comentado. A veces, cuando colocamos el texto encima de la foto (y más aún cuando es de gran tamaño, usamos el código de firma o lo ponemos al principio de un post), puede quedar recortado, como vemos en [Tienes que estar registrado y conectado para ver este vínculo] mensaje. Para evitarlo, hay que añadir al principio del código un < div > vacío, es decir, sin fondo y con solo una propiedad: height.

Código:: <div style="height: XXpx;"></div>

Os recomiendo hacerlo siempre que pongáis el texto sobre la foto. El número del height dependerá de los códigos con los que trabajéis. Id probando hasta que quede perfecto.

por **bxmbshell.** Lun 17 Feb 2014, 11:56 am

LINE-HEIGHT EN TEXTO

[Tienes que estar registrado y conectado para ver esa imagen]

HECHO POR: SYKESUAL.
TUTORIAL DE: HTML. ACLARACIÓN.
NIVEL: FÁCIL.
MATERIALES: LECTURA DE COMPRENSIÓN.

INTERLINEADO DE UN TEXTO

Aclarando lo que dijo Birdie. Una forma más sencilla de evitar que el texto y la imagen se "junten" es usando el "line-height" ¿Qué es? La propiedad "line-height" fija la altura de cada línea que forma el contenido de texto de un elemento, por lo que se emplea para manejar el interlineado del texto. El uso de esta propiedad es imprescindible cuando se quiere evitar la inclusión del texto en la imagen.
1. Si juntamos el code del “div” de la imagen y el del Font nos queda así:

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Aquí se escribe

2. Tenemos la imagen y el texto centrados. Pero se nota que el texto va entrando a la imagen. ¿Qué hacer? Aquí es cuando entra el “line-height” El interlineado se puede establecer mediante cuatro tipos de valores. El valor por defecto es “normal”, que le indica al navegador que se debe utilizar un valor razonable en función del tamaño del texto.

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px; line-height: normal;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Aquí se escribe

3. Además del “normal” el interlineado, asimismo puede ser fijado mediante cualquiera de las unidades de medida absolutas y relativas de CSS Entre estas tenemos al píxel, puntos y porcentajes: “line-height: 24px” “line-height: 12pt” “line-height: 100%” Pero ¿qué son estas medidas? Las unidades de medida son una de las partes más importantes de CSS, ya que se usan para definir la altura (height), anchura (width) y márgenes (margin) de todos los elementos y para establecer el tamaño del texto.
Respecto a estas medidas, personalmente mi preferida es el porcentaje “AA%” Según el tipo de Font que hayáis usado, el porcentaje puede variar. Generalmente en los fonts que uso el “line-height: 100%” me queda mejor, pero todo depende de sus gustos. Vamos con algunos ejemplos:

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px; line-height: 100%;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Aquí se escribe

4. Como vemos, el texto se ha alejado de la imagen, pero una parte del texto aún sigue en la imagen. Estéticamente se ve bien, está a una altura buena y le da un buen efecto, pero si quieren alejarlo vamos a dejar el porcentaje al “130%”

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px; line-height: 130%;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Aquí se escribe

También os voy a dejar un ejemplo al “line-height: 90%”

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px; line-height: 90%;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></center>

Aquí se escribe

5. Finalmente si le vamos a agregar un texto secundario tendríamos esto.
NOTA: Para simplificar el code que Vir nos ha dejado para este tipo de texto secundario, vamos a colocar el “width” y el “height” en el mismo “div” Todo para que el odiado límite de caracteres no ande molestando a la hora de publicar la firma.

Código:: <center><link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'><div style="font-family: 'Gabriela'; color: #FFFFFF; font-size: 50px; text-shadow: black 1px 1px 1px; line-height: normal;">Aquí se escribe</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div><div style="width: 400px; height: auto; font-family: 'Verdana'; color: #48689d; font-size: 13px; line-height: 100%;">textotextotextotextotextotextotextotextotextotexto textotextotextotextotextotextotextotextotextotexto textotextotextotextotextotextotextotextotextotexto</div></center>

Aquí se escribe

textotextotextotextotextotextotextotextotextotexto textotextotextotextotextotextotextotextotextotexto textotextotextotextotextotextotextotextotextotexto

Como podemos ver le he colocado el “line-height” al título en modo “normal” y en “100%” al texto secundario. Otro detalle es el atributo de “height” en estado “auto” esto significa que si ese elemento (en este caso el texto secundario) no tiene establecida una altura de forma clara, se ignora la altura en porcentaje y se sustituye por el valor “auto”. Este valor indica que la altura de esta sección se adaptará al tamaño del contenido que vayamos a colocar. Un pequeño detalle es el cambio de color del texto secundario a un azulado para que sea visible.
¿Preguntas? ¿Dudas? Por favor, dejadlas abajo.

Tablilla by Sykesual. 2014.

por **Txxrxs** Lun 17 Feb 2014, 3:23 pm

Hola!

La verdad les quiero agradecer por el tema:)

En verdad, a mi me fascinan los codes, y siempre eh tenido la intención de hacerlos, pero...

¿Por que siempre tiene que haber un "Pero"?

Yo no los sabia hacer, pero cuando vi su tema, estoy aprendiendo un poco

Me gusta la forma en que se explican, tratan de darse a entender, de lo que nos quieren enseñar...

Y para demostrarla de que aprendí de lo "Elemental"

Les dejo aquí la "Firma" que me salio

Muestra:: [Tienes que estar registrado y conectado para ver esa imagen]

Código:: <center><div style="text-align: center; font-size: 80px; font-family: 'Grand Hotel', cursive; color: COLOR; text-shadow:1px 2px 1px black; margin-top: 30px">Texto Aquí</div><div style="background-image: url(https://31.media.tumblr.com/b9601dec28a7be8998b9bc553918b102/tumblr_inline_n13z92UaIx1s6h4rj.png); width: 500px; height: 200px;"></div></div><link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'><center>

por **Txxrxs** Lun 17 Feb 2014, 4:17 pm

Yo tengo una... ¿Duda, Pregunta?
Me preguntaba como se pueden hacer los bordes en las firmas...
Así como la que tengo como firma, en realidad no es mia es de [Tienes que estar registrado y conectado para ver este vínculo]
Y me preguntaba como se podian hacer y como agregarlos en la firma
¡Gracias!

por **bxmbshell.** Lun 17 Feb 2014, 5:31 pm

Itzel-Torres escribió:Yo tengo una... ¿Duda, Pregunta?
Me preguntaba como se pueden hacer los bordes en las firmas...
Así como la que tengo como firma, en realidad no es mia es de [Tienes que estar registrado y conectado para ver este vínculo]
Y me preguntaba como se podian hacer y como agregarlos en la firma
¡Gracias!

Buena pregunta, Itzel.
Como mencionamos en la presentación del tema: Será paso a paso. Y justamente mañana (creo) estaremos posteando sobre aquello.

por **Txxrxs** Lun 17 Feb 2014, 6:04 pm

Sykesual. escribió:
Itzel-Torres escribió:Yo tengo una... ¿Duda, Pregunta?
Me preguntaba como se pueden hacer los bordes en las firmas...
Así como la que tengo como firma, en realidad no es mía es de [Tienes que estar registrado y conectado para ver este vínculo]
Y me preguntaba como se podían hacer y como agregarlos en la firma
¡Gracias!
Buena pregunta, Itzel.
Como mencionamos en la presentación del tema: Será paso a paso. Y justamente mañana (creo) estaremos posteando sobre aquello.

Okasa!

Gracias por contestar

Mañana estaré al pendiente

por Invitado Lun 17 Feb 2014, 6:32 pm

Hola!! Bueno, muchas gracias por crear este sitio. Son fenomenales explicando, enserio. Pero soy un total desastre con este tema, y como siempre, hay algo que hago mal. Estoy tratando de lograr hacer los "títulos", por así llamarle, y pues no me sale. Me dirían que hago mal? Aquí les dejo el code.

Código:: <center><link href='http://fonts.googleapis.com/css?family='Allura' rel='stylesheet' type='text/css'><div style=”font-family: ‘Allura’;color: #F5A9BC; font-size: 50px; text-shadow: 1px 1px 1px;">Aquí se escribe</div></center>

Desde ya gracias por todo, son geniales chicas♥

por **Fer.** Lun 17 Feb 2014, 6:41 pm

Hola Mile, el tutorial de hoy, como los anteriores, estuvo bastante claro y fácil de entender. Pues... no tengo ninguna duda y a decir verdad poco hay que agregar.
Gracias por el tiempo que se toman en enseñarnos (Personalmente me molesta un poco que algunas usuarias del foro se quejen de el no saber cómo elaborar firmas y cuando surge tamaña oportunidad como esta, ni siquiera se hagan presentes) y me emociona mucho que mañana ya veamos bordes.
He aquí la muestra de lo aplicado hoy (Utilice el "line-height" en un porcentaje de 70%).

Muestra.:

por **bxmbshell.** Lun 17 Feb 2014, 6:45 pm

O'Brien. escribió:Hola!! Bueno, muchas gracias por crear este sitio. Son fenomenales explicando, enserio. Pero soy un total desastre con este tema, y como siempre, hay algo que hago mal. Estoy tratando de lograr hacer los "títulos", por así llamarle, y pues no me sale. Me dirían que hago mal? Aquí les dejo el code.

Código:
<center><link href='http://fonts.googleapis.com/css?family='Allura' rel='stylesheet' type='text/css'><div style=”font-family: ‘Allura’;color: #F5A9BC; font-size: 50px; text-shadow: 1px 1px 1px;">Aquí se escribe</div></center>

Desde ya gracias por todo, son geniales chicas

aprendiendo a disenar - APRENDAMOS A DISEÑAR - Página 3 3917340093

Nos haces sentir especiales, muchas gracias. Bien, en el code la comilla de inicio está (”), que es el que usualmente aparece en word, en lugar de la comilla de codes que sería esta (") y en el "font-family" olvidaste copiar el "cursive" que venía con el tipo de font. Correctamente sería así "font-family: 'Allura', cursive;" el code corregido vendría a ser este:

Código:: <center><link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'><div style="font-family: 'Allura', cursive; color: #F5A9BC; font-size: 50px; text-shadow: 1px 1px 1px;">Aquí se escribe</div></center>

por Invitado Lun 17 Feb 2014, 6:55 pm

Sykesual. escribió:
O'Brien. escribió:Hola!! Bueno, muchas gracias por crear este sitio. Son fenomenales explicando, enserio. Pero soy un total desastre con este tema, y como siempre, hay algo que hago mal. Estoy tratando de lograr hacer los "títulos", por así llamarle, y pues no me sale. Me dirían que hago mal? Aquí les dejo el code.

Código:
<center><link href='http://fonts.googleapis.com/css?family='Allura' rel='stylesheet' type='text/css'><div style=”font-family: ‘Allura’;color: #F5A9BC; font-size: 50px; text-shadow: 1px 1px 1px;">Aquí se escribe</div></center>

Desde ya gracias por todo, son geniales chicas
Nos haces sentir especiales, muchas gracias. Bien, en el code la comilla de inicio está (”), que es el que usualmente aparece en word, en lugar de la comilla de codes que sería esta (") y en el "font-family" olvidaste copiar el "cursive" que venía con el tipo de font. Correctamente sería así "font-family: 'Allura', cursive;" el code corregido vendría a ser este:
Código:
<center><link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'><div style="font-family: 'Allura', cursive; color: #F5A9BC; font-size: 50px; text-shadow: 1px 1px 1px;">Aquí se escribe</div></center>

Gracias

Mañana leeré el tutorial que me falta y -si agregan otro- ese también.

por **bxmbshell.** Lun 17 Feb 2014, 8:08 pm

Hablando con Vir, sí. Mañana estaría publicando el tutorial de bordes y ella (el miércoles) les explicará sobre los colores y textos en background de color o de imágen. Luego seguimos con inclusión de dos o más imágenes.

por **irwin.** Lun 17 Feb 2014, 9:33 pm

me siento emocionada :yoli:

por Invitado Mar 18 Feb 2014, 9:26 am

Hola :yoli: aun estoy en el primer paso y lo intento y lo intento pero no me sale ¿Que estoy haciendo mal?

Código:: <div style=''background-image: url(http://24.media.tumblr.com/454d0844e9902acf259af8b62a0bb4b3/tumblr_mo02qpj0m51srngrbo1_500.gif);width: 500px; height: 200px;''></div>

:( soy un desastre en los codes

por **bxmbshell.** Mar 18 Feb 2014, 9:46 am

Maite♡ escribió:Hola :yoli: aun estoy en el primer paso y lo intento y lo intento pero no me sale ¿Que estoy haciendo mal?
Código:
<div style=''background-image: url(http://24.media.tumblr.com/454d0844e9902acf259af8b62a0bb4b3/tumblr_mo02qpj0m51srngrbo1_500.gif);width: 500px; height: 200px;''></div>
:( soy un desastre en los codes

Hola. Oh Dios, amo a ese maldito oso. Pero bueno, viniendo al tema. A simple vista el codigo es completamente correcto, pero el problema va en las comillas, las que vos colocaste no son comillas de codes, más bien son estas (') que vendría a ser el apostrofe. Las comillas de codes son las que vienen juntas (") Me estaba desesperando bc no le veía el problema pero observé mejor y al borrar una de las dos comillas pues pasaba eso, se borraba una y la otra seguía... so así encontré el error. Le doy muchas vueltas al asunto. Como sea. El code corregido vendría a ser este:

Código:: <div style="background-image: url(http://24.media.tumblr.com/454d0844e9902acf259af8b62a0bb4b3/tumblr_mo02qpj0m51srngrbo1_500.gif); width: 500px; height: 200px;"></div>

por Contenido patrocinado

ϟ hypatia. aka Kate. MP ϟ Ver perfil.	ϟ dépayser aka Lea. MP ϟ Ver perfil.
ϟ youngjae aka . MP ϟ Ver perfil.	ϟ Stark. aka Cande. MP ϟ Ver perfil.

ϟ Legendary. aka Steph. MP ϟ Ver perfil.	ϟ chihiro aka Zoe. MP ϟ Ver perfil.
ϟ Kurisu aka Teph. MP ϟ Ver perfil.	ϟ Calore aka idk. MP ϟ Ver perfil.

ϟ ego. aka Kalgh/Charlie. MP ϟ Ver perfil.	ϟ Asclepio. aka Gina. MP ϟ Ver perfil.
ϟ mieczyslaw aka Alec. MP ϟ Ver perfil.