Title: vomit heart
Vibe: Gothic/Mothcore/Faegrunge
Features: Simple navbar, Footer with a hidden section for Webrings, Cross border I made on broider, public domain illustrations, Jaquard font but you can change it if you hate it, crosshair cursor.
Rules: Edit as you like, tear it up and spit it out. But if you don't edit it to be unrecognizable, please credit me. If anything is broken on here please leave a comment or message me. And if you want me to make more themes, let me know! :)
Notes: This is my very first theme and I sort of threw myself into making it. I just wanted something simple and minimal, with one box for content and a place to hide stuff/webrings. I think this works best for a blog, you can view a live preview on my blog currently.
Just a little wallpost code that you can use for free! The translucent background (the white stuff) and the outlines do need to be adjusted manually depending on the size of the wallpost. This code is meant for any WoX site.
All I ask is that you don't touch the credits or claim it as your own! Otherwise feel free to customize however.
This is my first wallpost code so feedback would be appreciated <3
So, inspired by the recent popularity of "map charcters to activities" and "sort characters" polls, I made an online toll to automate making of such polls. It defaults to hug/room/die, but you can edit the text. It's kinda ugly in looks (sorry), but does the thing.
Just write the names, correct the text from HRD if needed, click on "generate" and then you can click on a poll option (it copies by itself) and paste it to your Tumblr poll (it's plaintext, so it pastes nicely)
Big link:
A tool to automate creating poll options for certain types of polls. ...
Feedback welcome.
CCC / HRD
Hug Celegorm, be a roommate with Curufin, take a bullet for Caranthir.
Hug Celegorm, be a roommate with Caranthir, take a bullet for Curufin.
Hug Curufin, be a roommate with Caranthir, take a bullet for Celegorm.
Hug Curufin, be a roommate with Celegorm, take a bullet for Caranthir.
Hug Caranthir, be a roommate with Celegorm, take a bullet for Curufin.
Hug Caranthir, be a roommate with Curufin, take a bullet for Celegorm.
Es un elemento que se muestra por encima del resto del contenido de un sitio web, centrando en él toda la atención. Un modal se mantiene oculto hasta que el usuario lo abre por decisión propia o a través de una acción indirecta. Además, el usuario no podrá volver al contenido del sitio hasta que interactúa/cierra el modal.
Ahora bien, ¿por qué hacer un modal con CSS?
Soy programador y me gusta solucionar las cosas con JavaScript siempre que puedo. Este sería un caso para ello. No obstante, los foros (foroactivo, jcink, etc) no permiten el uso de JS para sus usuarios, así que debemos buscar alternativas para este tipo de elementos.
Veamos lo que haremos en acción antes de empezar a trabajar:
Tal vez un gif no sea la mejor opción, así que les dejo un enlace al código 100% funcional: https://codepen.io/codetatoe/full/PLVzra
Ahora así, manos a la obra.
En el código anterior pueden ver el HTML mínimo necesario para crear un modal.
Los dos primeros elementos son un label y un input de tipo checkbox. El input nos permitirá determinar si nuestro modal se está visualizando (checked) o si está oculto. Es necesario que este input tenga un ID, no lo olviden.
Por defecto, no podremos ver el modal.
Además, el de control input será ocultado con CSS:
Por otro lado, el label será nuestro elemento de control. Cuando el usuario haga clic sobre él, abrirá el modal. Pueden darle el estilo que quieran, solo hay dos detalles de importancia:
- Debe llevar un atributo for cuyo valor sea el ID de nuestro input.
- Debe estar al mismo nivel que nuestro modal para hacer uso del sibling selector (+).
Ahora bien, notarán que no solo hay un label, sino que hay tres. ¿Por qué tantos? Si se fijan en el codepen que les di arriba, hay dos formas de cerrar el modal: haciendo clic en la cruz de la caja blanca o en el fondo negro. Eso se puede hacer gracias a esos dos labels extras. Ahora bien, no es necesario tener dos opciones de cierre, pero es lo que se acostumbra.
En la imagen anterior podemos ver dos cosas:
La primera es el estilo que tendrá el fondo de nuestro modal una vez se muestre. Por cierto, para que sea posible interactuar (hacer clic para cerrar) con el fondo (pero no con el contenido) pueden usar el siguiente código:
En mi caso utilizo un color negro a través del cual podemos ver un poco de lo que hay detrás, así no hacemos sentir al usuario que le sacamos del sitio web. También agregué una transición para que no se muestre de sopetón.
Lo segundo es donde ocurre toda la magia. Cuando el input se encuentra checked, aplicaremos ciertos estilos al modal. En este caso: aumentamos por completo su opacidad y lo hacemos visible. Aunque parezca redundante agregar estas dos propiedades, es necesario para:
- Lograr una transición: opacidad
- Evitar interacciones con el modal cuando está cerrado: visibilidad
Con esto... ¡Está hecho! Ahora tenemos un modal 100 por 100 funcional que se mueve a base de puro CSS.
Pueden darle el estilo que deseen a los botones, al contenido del modal y demás. Todo eso excede el objetivo de este tutorial así que no me enfocaré en ello. Además, arriba tienen mi código de ejemplo que pueden visitar si les queda alguna duda.
