[Resuelto] Efecto skew en subforos

¡Muy buenas, y gracias por venir a salvarme!

Estoy intentando empezar una skin por mi cuenta, pero aún me confundo con la forma de poner los códigos CSS. En esta ocasión estoy batallando con mi más grande némesis: los subforos. Mi idea de subforo es que una imagen larga cubra tanto los links como la descripción de éste. Para ello, seguí el tutorial de Pyrite Wolf en SourceCode (otra página que siempre me ayudó cuando tenía problemas con todo esto  ), pero viendo tutoriales aquí y deseando crear nuevos efectos con las imágenes y demás, me topé con el tutorial de Roshio. Me llamó la atención el efecto Skew, y deseo ponérselo a la imagen de los subforos... el problema es que no sé cómo o dónde debería de colocarlo dentro del CSS (me confundí un poco en esta parte leyendo los tutoriales), y agradecería mucho si me pudiesen indicar.

El código CSS que le tengo a mi foro es este

Código:

*subforo*/
#desc {
background: #888;
border: 1px solid #265175;
padding: 5px;
width: 90%;
}

#texto {
height: 100px;
overflow: auto;
}

#desc img {
width: 100%;
}

#desc {position: relative;}

#subforos {
background: #888;
text-align: center;
border-bottom: 1px solid #265175;
margin: auto;
padding: 5px;
width: 80%;
}

Y el HTML (aún sin retocar ni nada) que planeo usar es el siguiente

Código:

<div id="desc"><img src="LINK IMAGEN"><div id="subforos">Subforos</div><div id="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></div>

Agradecería mucho su ayuda, así como también si tienen alguna corrección para alguna parte de los códigos o demás. De verdad se me complica un poco todo esto

Hola hola:

Si quieres añadírselo a la imagen de los subforos, lo suyo sería que le añadieras el skew a #desc img (me imagino que en #subforos pondrás enlaces a los subforos).

Por otra parte, una recomendación: no uses id para añadir estilos a múltiples elementos. Aunque funcione, la función de los id es señalar un elemento concreto dentro de la página web y puede llevar a error cuando hay más de un mismo elemento con el mismo id. Lo más recomendable es usar clases para este tipo de cosas.

Hola, Stellyx, para hacer un diseño de subforo necesitas ver que elementos deberás modificar en el template, y así mismo ir haciendo tus pruebas de apariencia en alguna página como Codepen antes de modificar directamente el template.

Te dejo un ejemplo de como podrías aplicar el efecto Skew que te interesa, espero te sirva.


Da click en Result para el preview del código.

¡Saludos!

Casi no toco los templantes porque me da miedo arruinar todo

Pero muchas gracias por responder mis dudas tendré en cuenta lo que dijo Eine y también probaré eso de Codepen. ¡Muchas gracias! Cambio a resuelto, en caso de tener alguna otra duda en el futuro, creo que volveré a hacerlo en este tema o abriré otro ;;;