AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Como hacer descripciones de los foros [2]

Ver el tema anterior Ver el tema siguiente Ir abajo

Como hacer descripciones de los foros [2]

Mensaje por Sakura92 el Sáb Abr 06, 2013 7:00 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


Cómo hacer tus descripciones (2)

Oye! Espera un segundo.
No sé si me recuerdas pero soy esa tonta persona que no pide crédito por sus tutoriales. Así que si estás pensando en dejar link para autentificar el crédito y colocarme en algún rincón de tu foro ¡alto, humano! No es necesario (: Tampoco es necesario postear para ver los codes ni nada de eso.

*entra bailando* Aquí concluye el tutorial que empecé con el afán de que la gente pueda empezar a hacerse sus propias descripciones más que bonitas. En el anterior aprendimos a montar la base y colocar una imagen, y hoy aprenderemos diversos métodos empleados para colocar los subforos.

1. Forma simple: bloque debajo del texto

Empezaremos retomando uno de los ejemplos. Sin embargo, esto se puede adaptar a cualquier forma. El que yo emplearé será el que tiene una imagen al costado:
Aquí tu primer descripción

La forma que, personalmente, considero más básica para colocar a los links, es colocarlos debajo de la descripción en un bloque. En ese caso, haremos lo siguiente:
Código:
Al código inicial, que es este:
<div id="desc"><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div></div>

Le agregaremos un <div id="subforos"></div> luego del texto, quedando así:
<div id="desc"><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div><div id="subforos">Aquí tus subforos</div></div>
Y en el CSS, colocaremos lo siguiente:
Código:
#subforos {
propiedades aquí;
}
Donde dice propiedades aquí podemos colocar algunas de las siguientes cosas:
background: #888; - nos colocará un fondo (en este caso, de color #888). Puedes cambiar el #888 por cualquier otro color, o quitarlo y colocar url('LINK DE IMAGEN') si quieres colocar una imagen.
text-align: center; - hará que el texto salga centrado. Puedes cambiar el center por left (izquierda), right (derecha) o justify (justificado).
border: 1px solid #265175; - nos colocará un borde (en este caso, de color #265175 y 1px de grosor). Puedes cambiar el #265175 por cualquier otro color, y el 1px por cualquier otro tamaño. Además, si preferimos colocar un borde de un solo lado, podemos emplear border-right, border-left, border-top y border-bottom, que se manejan del mismo modo que border.
border-radius: 10px; - redondeará los bordes de la caja. Puedes cambiar el 10px por el valor que se te antoje.
margin: auto; - centrará el bloque de subforos.
padding: 5px; - creará un margen interno entre los bordes de la caja y el contenido. Se puede modificar el 5px a gusto.
width: 80%; - asignará un ancho a nuestra caja. Antes de que lo preguntes, el ancho depende mucho de tu foro, sus tamaños y eso, por lo que dejarlo así (con porcentaje) es sabio.
Yo, en lo personal, para comenzar los ejemplos emplearé una caja con un background de #485E3F, un padding de 3px 7px, width de 90%, margin automático y texto centrado. Además, como quedaba muy pegado a la imagen, le coloqué luego un margin-top: 5px. Es decir, esta cosa:
Aquí tu primer descripción
Aquí tus subforos


Ahora, ¿qué pasa si quieres modificar el aspecto de los links de los subforos? Simplemente debes llamarlos al CSS con esto:
Código:
#subforos a {
propiedades aquí;
}
Y donde dice propiedades aquí puedes emplear cualquiera de las propiedades que se señalan en este tutorial.

2. Links a un lado, en una lista

No es ni la mitad de lo difícil que parece. Empecemos, lo básico sería colocar los subforos al principio de todo:
Código:
<div id="desc"><div id="subforos">Aquí tus subforos</div><img src="LINK DE TU IMAGEN"><div id="texto">Aquí tu primer descripción</div></div>
Y ahora, lo que necesitamos es ir al CSS y añadir algunas cositas, por ejemplo:
Código:
#subforos {
width: 120px;
float: right;
height: 100px;
overflow: auto;
padding: 1px;
background: #485E3F;
}

#subforos a {
display: block;
background: #687A61;
padding: 2px 5px;
margin-bottom: 1px;
}
Imagino que de momento te estás preguntando qué *censurado* significa eso. Veamos.
En la primer parte, hice que los subforos estuvieran en una caja de 120x100 con los atributos width y height. Estos valores se pueden cambiar a gusto. También hice que la caja se ubicara a la derecha empleando float: right; aunque se puede colocar también left para que quede a la izquierda. Le di un color de fondo con background e hice que le salga una barra desplazadora al superar la altura máxima gracias a overflow: auto;.

En la segunda parte, hice que los links adoptaran algunas propiedades básicas de los divs empleando display: block;. Esto permitió, por ejemplo, que adoptaran el máximo ancho posible de forma automática, sin que se los diga. Luego les asigné un color de fondo con background y un pequeño margen interior con padding. También les di un margen inferior con margin-bottom para que no salieran pegados. Este es el resultado:
Aquí tu primer descripción

¿Qué otras propiedades puedes emplear aquí? Todas las que hemos mencionado hasta ahora. Usa tu imaginación.

Ahora, muchos han visto cosas de ese estilo pero que al pasar el mouse se mueve el link o cambian de color, o cosas por el estilo. Es super simple de hacer:
Código:
#subforos a:hover {
propiedades aquí;
}

* {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
Donde dice propiedades aquí puedes colocar cualquier cosa que quieras que suceda con los links. Por ejemplo, si quieres que su fondo cambie a #000, puedes colocar background: #000; o si quieres que se muevan a la derecha puedes colocar padding-left: 20px;; puedes colocarles un borde, cambiarles el color o fuente de letra, lo que sea. La segunda parte del código suavizará las transiciones para que no sean brutales x3

3. Esconderlos detrás de una imagen

Supongamos, ahora, que me quieren hacer trabajar y quieren colocar vuestros subforos detrás de una imagen y que cuando pasas el mouse los ves. Vale. Acepto el desafío y prometo venganza. Veamos, el HTML sería así:
Código:
<div id="desc"><div id="subforos"><img src="LINK DE TU IMAGEN">Aquí tus subforos</div><div id="texto">Aquí tu primer descripción</div></div>
Como verán, esta vez la imagen está dentro del div de los subforos. Interesante, dirás tu. Supongo. Tal vez no lo digas. Para el CSS emplearé como base el del ejemplo anterior, y le agregaré algunas cosas:
* {
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
}


#subforos {
width: 120px;
float: right;
height: 100px;
overflow: auto;
padding: 1px;
background: #485E3F;
position: relative;
}

#subforos a {
display: block;
background: #687A61;
padding: 2px 5px;
margin-bottom: 1px;
}

#subforos img {
position: absolute;
top: 0px; left:0px;
}
MWAHAHAHAHAHAHA la venganza es dulce Cool okno o.o Veamos algunas cosas importantes:
  • Marqué en negrita las cosas que añadí al CSS.
  • Es muy importante que la imagen tenga las mismas dimensiones que la caja de los subforos, para que la cubra por completo.
  • Hay un par de efectos posibles para hacer.


A) La imagen se difumina hasta desaparecer.
Esto es, dentro de todo, facil. Sólo necesitas añadir al final del CSS:
Código:
#cajasf {
position: absolute;
top: 0px; left:0px;
width: 100%;
opacity: 0;
}

#subforos:hover #cajasf {
opacity: 1;
}
Por otro lado, en el HTML deberás añadir una nueva caja que envuelva sólo a los links:
Código:
<div id="desc"><div id="subforos"><img src="LINK DE TU IMAGEN"><div id="cajasf">Aquí tus subforos</div></div><div id="texto">Aquí tu primer descripción</div></div>
Esto nos quedaría:
La imagen se ve deforme porque no tiene el mismo tamaño que la caja de los subforos D: Pero pasa el mouse y mira tu qué bonito se ve.


B) La imagen se desliza hacia arriba, abajo, donde sea
Veamos. Primero, tendrás que ir donde dice #subforos { en el CSS y modificar donde dice overflow: auto; por overflow: hidden;. Esto quitará la posibilidad de emplear una barra desplazadora para cuando tengas muchos subforos, así que ten cuidado. Una forma de resolver ese problema es añadir un div mas al HTML, en cuyo caso te quedaría:
Código:
<div id="desc"><div id="subforos"><div style="overflow: auto">Aquí tus subforos</div><img src="LINK DE TU IMAGEN"></div><div id="texto">Aquí tu primer descripción</div></div>
Pero bueno, vamos a lo divertido: el CSS.
Código:
#subforos:hover img {
propiedades aquí
}
Donde dice propiedades aquí podrás reemplazarlo por una de las siguientes cuatro opciones:
  • Si quieres que la imagen se vaya para arriba, debes colocar top: -XXpx; donde XX es igual al alto de tu imagen.
  • Si quieres que la imagen se vaya para abajo, debes colocar bottom: -XXpx; donde XX es igual al alto de tu imagen.
  • Si quieres que la imagen se vaya para la izquierda, debes colocar left: -XXpx; donde XX es igual al ancho de tu imagen.
  • Si quieres que la imagen se vaya para la derecha, debes colocar right: -XXpx; donde XX es igual al ancho de tu imagen.

Entonces, uno de los posibles resultados sería:
La imagen se ve deforme porque no tiene el mismo tamaño que la caja de los subforos D: Pero pasa el mouse y mira tu qué bonito se ve.


Hasta aquí llega la segunda y última (por ahora) parte del tuto. Espero que les haya servido (: Recuerda que si quieres aprender sobre más propiedades de CSS puedes leer los tutoriales básicos. También recuerda que esta no es una zona de pedidos, donde podrás venir y decir "Ohh quiero hacer esto y no sé cómo, ¿me das el code?", para eso está la zona de pedidos del foro ^^ No hay problema con que dejen consultas porque algo no les sale o porque algo no funciona, o creen que algo está mal explicado o se puede agregar algo más, pero realmente no toleraré pedidos aquí xD


​​​​​​​​​​​​​​​​​​​​​​​​​​​


avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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