[Duda] Diseño mi primer tablon y pasa esto...

Lun Oct 16, 2017 4:46 pm

Jelou! Después de mucho tiempo al fin me animé a intentar hacer algo por el foro en el que ayudo y decidí hacer un tablón, el problema es que todavía ni siquiera lo termino pero se me ocurrió postearlo en mi foro de pruebas para asegurarme que no faltaran divs y resulta que se ve así puesto en el mensaje de indice:

[Duda] Diseño mi primer tablon y pasa esto... Captur11

[Duda] Diseño mi primer tablon y pasa esto... Captur11

Y así se ve en code pen:
[Duda] Diseño mi primer tablon y pasa esto... Captur12

No sé si toqué algún height o es normal porque no he puesto nada en el interior de los divs de cada caja con títulos, así que si alguien pudiera revisarme el código y decirme si realmente soy una noob perdida o no (?) lo amaré eternamente ;-;

Código:: <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Open+Sans+Condensed:300" rel="stylesheet"> <div style="border-left:100px solid #000;width:750px;height:20px;padding:30px;background:#db7a28;"><div style="font-size:28px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:700;color:#fff;position:relative;bottom:15px;">Novedades en The Frat</div><div style="margin-left:-130px;width:910px;height:450px;background:#d5d5d5;"><div style="position:relative;top:2px;width:250px;padding-top:15px;background:#000;"><div style="font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:700;color:#fff;position:relative;bottom:10px;">The Frat Chat</div></div> <div style="position:relative;top:-32px;left:254px;width:250px;padding-top:15px;background:#000;display:inline-block;"><div style="font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:700;color:#fff;position:relative;bottom:10px;">Actualizaciones</div></div> <div style="position:relative;top:-32px;left:254px;width:250px;padding-top:15px;background:#000;display:inline-block;"><div style="font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:700;color:#fff;position:relative;bottom:10px;">Últimos Temas</div></div> <div style="position:relative;top:-32px;left:254px;width:146px;padding-top:15px;background:#000;display:inline-block;"><div style="font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:700;color:#fff;position:relative;bottom:10px;">Redes Sociales</div></div>

Lun Oct 16, 2017 7:33 pm

Hola Rainbow, es normal que al hacer codigos en codepen al pasarlos a foroactivo se muevan o se vean diferentes, pasa que codepen como es un soporte para códigos tiene digamos intuición para lo que estas haciendo, entonces los 'errores' que puedas tener como que te hagan falta cerrar balizas de algunos div, Codepen lo va a hacer automaticamente por ti, eso incluye los heights y widths en ocasiones cuando tu no los has incluido en tu código. Entonces te recomiendo revisar todas las partes una por una y añadirle un height y un width a cada parte para que puedas controlar eso desde tu CSS. [Duda] Diseño mi primer tablon y pasa esto... 3728603767

[Duda] Diseño mi primer tablon y pasa esto... 3728603767

Lun Oct 16, 2017 11:45 pm

¡Graaaaaaaaacias! Ya pude ponerlo y continuar armándolo pero me surgió esto, el texto rotado se me distorsiona y según lo que leí, entendí que hay que añadirle perspectiva, pero le agrego el código y se sigue viendo distorsionado ;-;

[Duda] Diseño mi primer tablon y pasa esto... Captur13

[Duda] Diseño mi primer tablon y pasa esto... Captur13

Este es el css de ese div:

Código:: .tituloawards{font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);letter-spacing:3px;text-align:center;font-weight:500;color:#fff;position:relative;top:30px;}

Lo armé según la explicación de WW3 School para rotar textos pero no sé dónde acomodar lo de perspective para que funcione ;-; Jelp?

Mar Oct 17, 2017 10:20 am

Hola Rainbow, te recomiendo echarle un ojo a este tutorial sobre Propiedad Transform en el CSS, ahi viene lo de rotar y lo de perspectiva [Duda] Diseño mi primer tablon y pasa esto... 3518859213

[Duda] Diseño mi primer tablon y pasa esto... 3518859213

espero te sirva, linda!

Mar Oct 17, 2017 4:18 pm

Leí el tuto y aunque me sirvió para acomodar mejor los divs y no hacer tanto lío en el css, no me corrigió la distorsión del texto T_T send jelp (?) intenté ponerle perspective 100 y 200 pero ninguno la corrigió ;-;

Código:: <div class="awards perspective-200"><div class="tituloa rotateZ">Awards</div></div> <style type="text/css"> .awards {border-bottom:30px solid #000;width:45px;height:68px;background:#db7a28;position:relative;top:2px;} .tituloa{font-size:14px;font-family:Open Sans Condensed;text-transform:uppercase;letter-spacing:3px;text-align:center;font-weight:500;color:#fff;position:relative;top:30px; } .tituloa.rotateZ { transform: rotateZ(-90deg); } .perspective-200 {perspective: 200px;} </style>

Mar Oct 17, 2017 6:53 pm

Creo que lo más posible es que sea la tipografía, puedes probar haciéndola más grande, o simplemente usando otra tipografía [Duda] Diseño mi primer tablon y pasa esto... 3728603767

Lun Oct 23, 2017 5:30 pm

¡Quedó listo e instalado! Muchisimas gracias Roshio [Duda] Diseño mi primer tablon y pasa esto... 1f495

[Duda] Diseño mi primer tablon y pasa esto... 2017-110

~~Ahora solo queda aprender a ponerle efectos, no me mates si regreso con más enredos xD~~

Próx

Bridgerton

Luz vs Oscuridad

Paraíso Personal

Amor y Amistad

Conejo de Pascua

[Duda] Diseño mi primer tablon y pasa esto...