O W N
¡Conéctate y ven a divertirte con nosotr@s! :)
Si no estás registrado, hazlo y forma parte de nuestra gran comunidad.
¡La administración ha modificado otra vez el foro, y los Invitados ya pueden ver todas las secciones! Aún así, para comentar y crear temas debes tener una cuenta.

Cualquier duda, queja o sugerencia que quieras darle al staff, éste es nuestro facebook: https://www.facebook.com/onlywebnovels

¡IMPORTANTE!, los Mensajes Privados de los Invitados no serán respondidos por la administración. Te esperamos en nuestro facebook (:

Atte: Staff OnlyWns.
Conectarse

Recuperar mi contraseña

Últimos temas
» time to float.
Hoy a las 2:21 pm por buffay.

» être dans la lune.
Hoy a las 2:16 pm por Ongniel

» Red Valley | A.Abiertas |
Hoy a las 1:56 pm por ItssLottie

» stargirl;
Hoy a las 1:47 pm por yagmur.

» Heroes. (Colectiva)
Hoy a las 1:15 pm por yagmur.

» .Look at the flowers.
Hoy a las 12:35 pm por yagmur.

» dark wings, dark words.
Hoy a las 11:47 am por hypatia.

» oh captain, my captain.
Hoy a las 10:09 am por hypatia.

» Carne nueva.
Hoy a las 2:21 am por rarelyworld

novedades

00 . 01 Anuncios del mes febrero.
00 . 02 Actualización del PROTOCOLO, nueva medida obligatoria de avatares.
00 . 03 Remodelación del foro febrero del 2017.
00 . 00 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
administradora
Rumplestiltskin. ϟ Jenn.
miembros del staff
Beta readers
ϟ hypatia.
aka Kate.
MP ϟ Ver perfil.
ϟ dépayser
aka Lea.
MP ϟ Ver perfil.
ϟ youngjae
aka .
MP ϟ Ver perfil.
ϟ Stark.
aka Cande.
MP ϟ Ver perfil.
Equipo de Baneo
ϟ Ariel.
aka Dani.
MP ϟ Ver perfil.
ϟ ceonella.
aka Cami.
MP ϟ Ver perfil.
Equipo de Ayuda
ϟ Ritza.
aka Ems.
MP ϟ Ver perfil.
ϟ Charlie.
aka idk.
MP ϟ Ver perfil.
Equipo de Limpieza
ϟ Legendary.
aka Steph.
MP ϟ Ver perfil.
ϟ chihiro
aka Zoe.
MP ϟ Ver perfil.
ϟ Kurisu
aka Teph.
MP ϟ Ver perfil.
ϟ Calore
aka idk.
MP ϟ Ver perfil.
Equipo de Eventos
ϟ ego.
aka Kalgh/Charlie.
MP ϟ Ver perfil.
ϟ Asclepio.
aka Gina.
MP ϟ Ver perfil.
ϟ mieczyslaw
aka Alec.
MP ϟ Ver perfil.
Equipo de Tutoriales
ϟ Kida.
aka Ally.
MP ϟ Ver perfil.
ϟ Spencer.
aka Angy.
MP ϟ Ver perfil.
Equipo de Diseño
ϟ insxne.
aka Mile.
MP ϟ Ver perfil.
ϟ yoongi.
aka Valu.
MP ϟ Ver perfil.
créditos.
Skin hecho por Hardrock de Captain Knows Best. Personalización del skin por Insxne.

Gráficos por y codes hechos por Kaffei e Insxne.

APRENDAMOS A DISEÑAR

Página 4 de 25. Precedente  1, 2, 3, 4, 5 ... 14 ... 25  Siguiente

Ver el tema anterior Ver el tema siguiente Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Mar 18 Feb 2014, 10:00 am

Sykesual. escribió:
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>
Gracias!  :hug: 
Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por bxmbshell. el Mar 18 Feb 2014, 6:37 pm

Vengo muerta de cansancio. Como sea, en una media hora estaré subiendo el tutorial sobre bordes. Ámenme por tardona   
[Tienes que estar registrado y conectado para ver esa imagen]

___________________________________________

[Tienes que estar registrado y conectado para ver esa imagen]
Some days I wake up and I just wanna hide under the covers 'cause no matter what I do I'll never be like all the others.
avatar


Ver perfil de usuario http://insxneofrp.tumblr.com/
 
 

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por hood. el Mar 18 Feb 2014, 8:28 pm

vino la burra a leer ):
avatar


Ver perfil de usuario http://wattpad.com/castawys

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por bxmbshell. el Mar 18 Feb 2014, 9:10 pm

Merezco que se sientan molestos. Ni he iniciado con el tutorial. A este paso lo subo hoy (es decir, acá ya es miércoles) Tendrán el tutorial a primera hora (tipo 8:30 am.) déjenme decirles que va a ser extenso. Y como Vir va a subir la explicación sobre colores serán dos c: van a tener tarea (los que cumplen con mostrarnos sus avances). De todos modos les informo que me caigo del sueño y usaré este png porque sí.
[Tienes que estar registrado y conectado para ver esa imagen]
P.D Busquen imágenes que sean diferentes a las de muestra.
Un consejo, busquen el tag "random headers" en tumblr y tendrán una gran variedad.
avatar


Ver perfil de usuario http://insxneofrp.tumblr.com/
 
 

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Miér 19 Feb 2014, 10:50 am

Yo quiero el tutorial  :aah: Pobre Mily (¿Puedo decirte asi?).Yo tengo mi firma puesta  🍌 Bueno adios :yoli: Yo tambien amo al maldito oso ><
Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Miér 19 Feb 2014, 11:00 am

Uau, todo esto es genial *-*
Las felicito a todas, su trabajo es estupendo y de mucha ayuda.
Espero con paciencia y tranquilidad los tutos de photoshop =)
Sigan así =)
Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por AlmendraKiss el Miér 19 Feb 2014, 11:24 am

Hola! Gracias por el tema, Pero les juro que no entendí nada:/ ¿Es posible que agan un vídeo? o ¿Hay vídeos sobre esto es Youtube? Porque si es asi, podre entender :33 
Espero que me ayuden y sus tutoriales también me ayudaron un poco.
Besos
avatar


Ver perfil de usuario

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Miér 19 Feb 2014, 1:36 pm

Tengo un problema -de vuelta- sigo sin poder reconocer mis errores, les molestaría decirme que está mal, de nuevo? Soy muy pesada, pero siempe quise aprender y ahora que puedo no quiero perder la oportunidad. Bueno, dejo de molestar y les dejo el code. Gracias♥
Código:
<center><link href='http://fonts.googleapis.com/css?family=Walter+Turncoat' rel='stylesheet' type='text/css'><div style="font-family: 'Walter Turncoat'; font-size: 55px; color: #00FFFF; text-shadow: 1px 1px 1px;"></div></center>
Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Miér 19 Feb 2014, 2:02 pm

O'Brien. escribió:Tengo un problema -de vuelta- sigo sin poder reconocer mis errores, les molestaría decirme que está mal, de nuevo? Soy muy pesada, pero siempe quise aprender y ahora que puedo no quiero perder la oportunidad. Bueno, dejo de molestar y les dejo el code. Gracias♥
A primera vista el código está perfecto, asi que no veo cual es el problema. Si lo que pasa es que al pegar el código no aparece nada, es simplemente porque no has escrito ninguna frase entre el < div style= propiedades > y el < /div >.

¿Ves? Funciono perfectamente <3

Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Fuck. el Miér 19 Feb 2014, 2:04 pm

Gracias por hacer estos tutoriales, me van a servir de mucho   
avatar


Ver perfil de usuario

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Fuck. el Miér 19 Feb 2014, 2:08 pm

Bueno me salio asi, solo que las letras no resultaron al centro como queria.

Resultado:
Zayn Malik
avatar


Ver perfil de usuario

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por bxmbshell. el Miér 19 Feb 2014, 2:12 pm


BORDES COLORIDOS

[Tienes que estar registrado y conectado para ver esa imagen]
HECHO POR: SYKESUAL.
TUTORIAL DE: HTML. BORDES (PARTE I)
NIVEL: FÁCIL-MEDIO.
MATERIALES: COLORES E IMÁGENES DIFERENTES A LA MUESTRA. LECTURA DE COMPRENSIÓN.

AGREGÁNDOLE BORDES COLORIDOS A LA FIRMA

Muy buenas, a todos. Sé que en algún lugar del mundo es la 8:30 am
En este tutorial voy a explicarles sobre los bordes coloridos en las firmas. El “border-radius” o redondeado vendrá en la segunda parte de BORDES. Bien, un ejemplo de firma con bordes sería esta:
[Tienes que estar registrado y conectado para ver esa imagen]

Las barras de derecha e izquierda de color celeste vienen a ser los bordes. Veremos cómo se crean los mismos.
Pero ¿qué son los bordes o de qué sirven? El nombre de este atributo correctamente escrito en el code sería “border” y básicamente es un elemento decorativo. Establece algunas (derecha, izquierda, arriba o abajo) o todas las propiedades de todos los bordes de los elementos.
El code de los bordes estrictamente debe seguir el siguiente orden: Anchura, Estilo de borde y Color. "border: AApx estilo #color;
Para la anchura lo más común, y recomendable, es la notación en pixeles, pero también existen tres medidas textuales que son: “thin” “médium” “thick” [Tienes que estar registrado y conectado para ver esa imagen]Reemplazando los pixeles por los valores textuales nos queda esto “border: medium estilo #color;
Referente al estilo del borde tenemos ocho diferentes opciones: “solid” “dotted” “dashed” “double” “groove” “ridge” “inset” y “outset”.
[Tienes que estar registrado y conectado para ver esa imagen]

solid: El borde está formado por una línea recta continua.
dotted: El borde está formado por una serie de puntos separados por espacios.
dashed: El borde está formado por una serie de pequeños rayas intercaladas por espacios.
double: Borde doble. Está formado por dos líneas rectas continuas separadas entre sí por un espacio en blanco. El espacio depende de los pixeles usados. Mientras menor sea el número, el espacio es más pequeño por lo cual se puede ver como una simple línea y no como si fuera doble.
groove: Borde hundido que a simple vista parece que se encuentra por debajo del nivel de la superficie de la pantalla.
ridge: Borde saliente que a simple viste parece que se encuentra por encima del nivel de la superficie de la pantalla.
inset: Borde hundido. Provoca que el elemento que encierra parezca que se encuentra por debajo del nivel de la superficie de la pantalla.
outset: Borde saliente. Provoca que el elemento que encierra parezca que se encuentra por encima del nivel de la superficie de la pantalla.

1. Os mostraré el uso de bordes en imágenes, porque sí, también se puede colocar bordes en textos. Vale. Ya tenemos nuestro “div” con la imagen.
Código:
<center><div style="background-image: url(https://31.media.tumblr.com/652a76bc9377317685bb55682fcc931b/tumblr_inline_n0a1vyS4jp1s8rvnx.png); width: 500px; height: 210px;”></div></center>

En este caso he dejado el height a 220px y el width a 500px.
2. Ahora agregaré el “border” a 6px, con el estilo “ridge” y un tono azulado. Este atributo con sus tres valores los colocaré en el mismo “div” que el de la imagen.
Código:
<center><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; border: 6px ridge #7882b9;"></div></center>

3. En lo personal, el estilo de “border” que me gusta más es el “double” pero colocándola en el mismo “div” que el de la imagen no se ve bien. Sale algo así:

Lo sé. En el espacio que se supone debería estar en blanco se ha copiado el background de la imagen y las líneas dobles ni se notan. Para arreglar esto abriré otro “div style” antes de el de la imagen y OJO, lo voy a cerrar después del otro div cerrado. Esto indica que este nuevo “div” contiene al de la imagen.
Código:
<center><div style="width: 500px; height:220px; border: 4px double #7882b9;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

¿Habéis visto? Es muy importante que a este nuevo “div” le asignéis el mismo width (ancho) y height (alto) que el de la imagen.
4. ¿Qué pasa si quiero el borde doble a los lados y el sólido arriba y abajo? Sencillo. El “border” puede ser especificado para cada una de las cuatro zonas así como también se puede especificar el color, por separado, de cada una de estas. Aunque es mucho embrollo y molesto a la hora de lidiar con el límite de caracteres, se los voy a explicar.
border-top: Establece algunas o todas las propiedades del borde superior de los elementos.
border-bottom: Establece algunas o todas las propiedades del borde inferior de los elementos.
border-right: Establece algunas o todas las propiedades del borde derecho de los elementos.
border-left: Establece algunas o todas las propiedades del borde izquierdo de los elementos.
En el code que ya tengo voy a dejar los bordes de lados a 4px en “double” y azulados. A los bordes de arriba y abajo igual los dejaré en 4px pero con “solid” y de un azulado más oscuro.
Código:
<center><div style="width: 500px; height:220px; border-right: 4px double #7882b9; border-left: 4px double #7882b9; border-top: 4px solid #505c97; border-bottom: 4px solid #505c97;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

El code va quedando mono poco a a poco. Recuerden que estos atributos del border los estoy colocando en el primer “div” que es el que viene antes de el de la imagen.
5. Pero como patosa que soy quiero que se vea mejor así que les voy a presentar un nuevo atributo el “padding” ¿Qué es? Es el que establece la anchura de algunas o todas las zonas de relleno de los elementos. La propiedad “padding” es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea. Si se desea el mismo relleno para los cuatro lados se simplifica simplemente como: “padding: AApx” esto le indicará al navegador que debe crear un relleno equivalente a 4px de grosor en las cuatro zonas.
Si se indican dos valores, el primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos horizontales, algo así: “padding: AApx BBpx” El primero (AApx) irá representando al espacio de arriba y abajo; el segundo para derecha e izquierda.
En el code que ya tengo con los bordes como he querido, justo en el mismo “div” de los bordes, le voy a agregar el padding a unos 4px (para los valores verticales) y a 6px (para los horizontales). OJO, ustedes pueden agregarle el padding en el número que más les sea cómodo.
Código:
<center><div style="width: 500px; height:220px; border-right: 4px double #7882b9; border-left: 4px double #7882b9; border-top: 4px solid #505c97; border-bottom: 4px solid #505c97; padding: 4px 6px;"><div style="background-image: url(https://31.media.tumblr.com/62428f0de7485b3bd9ae2474aa730d70/tumblr_inline_n17zvdG6ur1szis5a.png); width: 500px; height: 220px; "></div></div></center>

La creación de un nuevo “div” que encierra al “div” de la imagen, junto con el padding son necesarios en tres tipos de bordes: “dotted” (puntos) “dashed” (líneas cortas) y “double” (líneas dobles). Los demás estilos de bordes van perfecto dentro del “div” de la imagen.
6. Finalmente vamos a aplicar lo aprendido de los bordes a los textos. Ejemplo:
[Tienes que estar registrado y conectado para ver esa imagen]

Básicamente le agregamos el “border” en el mismo “div” que el de nuestro texto. El texto simple sería este:
Código:
<center><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css"><div style="font-family:'Parisienne'; font-size:55px;color:#4da1a1; text-shadow: 1px 1px 1px black; line-height: 100%;">Preview</div></center>
Preview

Todo sencillo con el “line-height” al 100%. Ahora le voy a agregar un borde en estilo “dotted” a 2px y del mismo color a mi texto. PERO. Siempre hay un pero, en este caso deben agregarle un “width” (anchura) al “div” del texto ya que de lo contrario el borde seguirá infinitamente pues no hemos definido un límite. En este caso le pondré el ancho de 200px.
Código:
<center><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css"><div style="width: 200px; font-family:'Parisienne'; font-size:55px; color:#4da1a1; text-shadow: 1px 1px 1px black; line-height: 100%; border-bottom: 2px dotted #4da1a1">Preview</div></center>
Preview

Bien. Para agregar bordes a un texto secundario el “padding” es completamente necesario, de lo contrario las letras irían pegadas a los bordes lo cual no se ve bien estéticamente.
Sin padding este code de texto secundario con el "text-align" en "justify" con el “border” a 3px en estilo “solid” queda así:
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

Pero le voy a dar un “padding” de 4px aplicado a cada lado. Mi resultado es este:
Código:
<center><div style="width: 400px; font-family: verdana; font-size:12px; color: #00000; line-height: 100%; border: 3px solid #4da1a1; padding: 4px; text-align: justify;">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO</div></center>
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

Se ve mucho mejor.
¿Preguntas? Por favor, dejadlas abajo.

[Tienes que estar registrado y conectado para ver este vínculo]


Última edición por Sykesual. el Miér 19 Feb 2014, 2:19 pm, editado 1 vez

___________________________________________

[Tienes que estar registrado y conectado para ver esa imagen]
Some days I wake up and I just wanna hide under the covers 'cause no matter what I do I'll never be like all the others.
avatar


Ver perfil de usuario http://insxneofrp.tumblr.com/
 
 

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por bxmbshell. el Miér 19 Feb 2014, 2:15 pm

Fuck. escribió:
Bueno me salio asi, solo que las letras no resultaron al centro como queria.

Resultado:
Zayn Malik
Hola.
Mira, querida. El problema es que colocaste el "center" solo para la imagen. Cuando vas a centrar todo lo que contenga la firma debes abrir el "center" al inicio de todo y cerrarlo al final de todo. El code correcto sería este:

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;">Zayn Malik</div><div style="background-image: url(https://31.media.tumblr.com/f4e6923678ef03cc4b5256d3885b2866/tumblr_inline_n19e9gxpPx1so4s8h.png); width: 500px; height: 200px;"></div></center>

Zayn Malik

¿Lo ves? Ahora todo está al centro.
avatar


Ver perfil de usuario http://insxneofrp.tumblr.com/
 
 

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Invitado el Miér 19 Feb 2014, 2:18 pm

Winter Bones escribió:
O'Brien. escribió:Tengo un problema -de vuelta- sigo sin poder reconocer mis errores, les molestaría decirme que está mal, de nuevo? Soy muy pesada, pero siempe quise aprender y ahora que puedo no quiero perder la oportunidad. Bueno, dejo de molestar y les dejo el code. Gracias♥️
A primera vista el código está perfecto, asi que no veo cual es el problema. Si lo que pasa es que al pegar el código no aparece nada, es simplemente porque no has escrito ninguna frase entre el < div style= propiedades > y el < /div >.

¿Ves? Funciono perfectamente <3

   Si, lo se, soy una completa imbecil, y este es el momento mas vergonzoso de toda mi vida. Siento haber molestado con esa idiotez. Me estoy riendo de mí misma, de verdad, perdón por haber hecho que gastaran su tiempo en eso. Gracias  :yoli:
Invitado



Invitado

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Fuck. el Miér 19 Feb 2014, 2:19 pm

¿Debe de salir mas o menos asi?

Resultado:
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
avatar


Ver perfil de usuario

Volver arriba Ir abajo

Re: APRENDAMOS A DISEÑAR

Mensaje por Contenido patrocinado

Contenido patrocinado



Volver arriba Ir abajo

Página 4 de 25. Precedente  1, 2, 3, 4, 5 ... 14 ... 25  Siguiente

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.