#pure css

[whereinmnl]

THEME PAGE RELEASE: SHADOW (ABOUT ME PAGE)

Welcome to the Shadow Theme, an atmospheric about-me page. I call it this because it thrives in the dark—built on high-contrast monochromes, subtle hidden tooltips, and an aesthetic that feels like a forgotten terminal operating in the digital underground.

STATIC PREVIEW // CODE

The Features

01. Layout & Grid

Locked Terminal Layout: A fixed, single-screen dashboard design on desktop with hidden main scrollbars for an ultra-clean, app-like feel.

Fully Responsive: Automatically stacks into a clean, scrollable column layout on mobile devices so your content is never cut off.

02. Interface & Customization

Cyberpunk/Noir UI: Comes with a custom crosshair cursor, styled inner scrollbars for your text boxes, and stark black-and-white text selection colors to match the aesthetic.

CSS Glitch Animations: Features a pure CSS chromatic/monochrome glitch effect on the main header that requires no external scripts.

Interactive Elements: The avatar frame features a smooth, animated grayscale-to-color reveal when hovered over.

03. Navigation & Links

Minimalist Nav & Socials: Clean, sticky top navigation paired with a "system log" style social media node using FontAwesome 6 icons.

Subtle Widget: Includes an unobtrusive, floating initial widget in the corner with a custom, smooth-sliding CSS tooltip.

04. Profile & Data

System Log Attributes: A unique data block to display your "stats" (like Class, Location, Status, MBTI, or any custom text you want).

Contained Bio Block: A dedicated, scrollable text area for your bio or manifesto that keeps the main page locked and perfectly framed.

Important Info

100% PURE CSS: This theme contains zero JavaScript. Since Tumblr custom pages often restrict or strip out scripts, I built every single animation—from the glitching text to the hover tooltips—using only CSS.

For the CSS Glitch Header to work properly, please find this code: <span class="glitch-line" data-text="YOUR">YOUR</span> You MUST change both the visible text AND the data-text attribute to match your desired word. If they do not match, the glitch masking animation will break.

To change your avatar, simply locate the <img src="..."> tag inside the avatar-frame div and replace the URL with your own direct image link.

Disclaimer

Credits: Please do not remove the floating widget in the corner or the hidden credit in the code. It helps creators like me continue making themes!

Editing: You are free to edit the colors, fonts, and images to match your aesthetic! However, do not use this code as a “base” to build your own theme for release.

Support: If you find a bug, feel free to send me an Ask.

[stripitdown-coding]

Radio

Code

A simple box code with tabs. Haven't done one in a while or felt like finishing other in progress templates, so here's one for now.

Don't remove or alter the code credits from the CSS and HTML.

If you just want to change the colors, they're in a separate section toward the bottom and labeled so you don't need to dig through the rest of the code to find it. The character image line is down there as well.

[ricardoherreramusica]

Highlight current page on Tumblr

Hi there! Just a #prothemertip:

If you are currently designing a custom tumblr theme and you want to highlight the current page's link in your navigation menu, you don't need to develop or use any script or plug-in: there's a secret html variable called {CurrentState} –that of course doesn't appear on the official theme documentation as many others– which automatically adds the class 'current-page' on the html tag of the active page link. So you can add the class name into the tag such as:

{block:Pages}

<a class="{CurrentState}" href="{URL}">{Label}</a>

{/block:Pages}

The above block tag will add all the links to your blog's custom pages at once (except for the hidden ones). Then, you can customize the class 'a.current-page' (or simply '.current-page') on your custom CSS (embedded or linked) such as this:

a.current-page {color: {AccentColor}} /* Example */

Doing so will only add –and then stylize– the class on the active page's link; the rest of the nav links will remain normal –or styled as default. This is actually the solution used on Tumblr's official theme and that's actually where I knew it from.

However, the home link works differently. For the link highlighting to work similarly when the homepage or startpage is active, you can do so adding the class only between the HomePage block, as follows:

<a class="{block:HomePage}current-page{/block:HomePage}" href="/">Home</a>

Notice that the {CurrentState} variable will only work for static pages of your blog, not external links –even if they redirect to your blog itself, such as /tagged/, /yyyy/mm/dd, /random or other index pages, they'll be considered as external. You can use the variable {ExternalState} for these and customize the css class 'external-page' but they'll be stylized always and in all pages instead of only the active one unlike the previous hack.

Of course, if this solution doesn't fully satisfy your specific needs due to this last limitation, you can always turn back to old trustworthy JavaScript (vanilla or jQuery)... though I won't be very helpful there.

Good luck! Hope it helps :)

[justadrunkenwhaler]

Pure CSS - Modales

Primero que nada, ¿qué es un modal?

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.

Hasta la próxima.

[freefrontend-blog]

17 CSS Hexagons. Collection of hand-picked free #HTML and CSS hexagon code examples. Update of October 2018 collection. 3 new items. 🔗 https://freefrontend.com/css-hexagons/

[codemyui]

CSS Only Hover Show/Hide Navigation Menu

CSS Only Hover Show/Hide Navigation Menu

Need a simple navigation menu on the left-hand side that is collapsed by default and is expanded when you hover over it? Look no further this CSS only navigation menu will help you easily achieve it.

(more…)

View On WordPress

[stripitdown-coding]

Code

  A simple to use code. Not as much room for editing it, but looks fine with little or a lot of text added in. Not the best use code for if you have a very lengthy story or bio you want to write-up in the profile, but it will still work. Includes a separate, highlighted section for your ooc. Designed for images that have a background. Just replace the existing background image on the front card.

[stripitdown-coding]

Cinematography (Update 1.1)

Code   A simple to use code. Not as much room for editing it, but looks fine with little or a lot of text added in.

Updated 21JAN23 : fixed a minor issue for RPH users where the header font was defaulting to the site’s font.