fede/Blogv3
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

añadida pagina para los posts

Browse Source
This commit is contained in:
fedpo
2025-06-18 16:14:17 -03:00
parent 66f53c9fbf
commit 9826085cb1
22 changed files with 872 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/posts/pasar-imagenes-a-blanco-y-negro/index.html
View File

@@ -12,7 +12,7 @@
<body>
<main>
<nav class="bg-gray-800 fixed w-full top-0 z-1">
<nav class="bg-gray-800 fixed w-full top-0 z-3">
<div class="mx-auto px-4">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
@@ -122,15 +122,36 @@
}
</script>
<div class="pt-16 shadow-md">
<div class="flex pt-4 gap-2 md-4 text-center flex-col bg-slate-800 text-white">
<h1 class="font-bold text-6xl antialiased underline font-sans">Imagenes: Color a b&amp;w</h1>
<p class="text-xl font-thin italic">Fecha: 23 Sep 2023</p>
</div>
</div>
<article class=" sm:px-2 md:px-16 lg:px-32">
<div><h1 id="gimp">Gimp</h1>
<div class="bg-blue-300 p-12"></div>
<div class="bg-blue-300">
<div class="bg-white rounded-md flex flex-col items-center px-2 py-6 max-w-4xl mx-auto">
<div class="w-full mb-8 overflow-hidden rounded-lg shadow-xl border-4 border-black">
<div class="bg-gray-200 text-gray-600 font-mono text-center py-16">
No image
</div>
</div>
<h1 class="text-4xl font-bold mb-4 text-center">Imagenes: Color a b&amp;w</h1>
<div class="text-sm text-gray-600 mb-6 font-mono flex gap-4 justify-center">
<span>Publicado el: Sep 23, 2023</span>
<div class="flex gap-2">
<span class="px-2 py-1 bg-gray-200 rounded-full">#old_blog</span>
</div>
</div>
<div class="prose prose-lg max-w-none mb-12">
<h1 id="gimp">Gimp</h1>
<p>Hay varias formas de pasar una imagen a blanco y negro. yo prefiero la de usar <strong>Gimp</strong> con la opcion de <code>Color &gt; Desaturacion &gt; Color a gama de grises</code>. Pero voy a listar un par de métodos alternativos para obtener el ~mismo resultado.<br>
<img src="/fedecomp.png" alt="Comparación"></p>
<h1 id="imagemagick">ImageMagick</h1>
@@ -144,8 +165,27 @@
<h1 id="opcion-web">Opcion web</h1>
<p>Existe <a href="https://pinetools.com/es/imagen-escala-grises">esta</a> pagina en la cual para generar la imagen en gama de grises solo hay que poner la imagen y darle a <strong>Aplicar</strong>.<br>
<img src="/gamaDeGrises.jpg" alt="Gama de grises demo"></p>
</div>
<a
href="/"
class="
inline-block mt-6
border-2 border-black bg-white px-6 py-2
shadow-[0_4px_0_black]
hover:shadow-[0_8px_0_black]
hover:-translate-y-1
transition-all duration-100 ease-linear
font-medium
"
>
← Volver
</a>
</div>
</div>
</article>
<div class="bg-blue-300 p-5"></div>
</main>
<br>