soy Kseso y esto EsCSS

Nuevo look: EsCSS theme 2018 ~ layout maCSSonry

Cambio de piel al blog y abro artículo para que os podáis quejar a gusto.

Nuevo look: EsCSS theme 2018 ~ layout maCSSonry

xPor Kseso ✎ 11

Un tanto sin ganas ni ideas pero obligado por la tradición que dicta que hay que mudar la piel al menos una vez al año y que en el blog lo suelo hacer ahora en Agosto, por aquello de que es cuando más despistados estáis los usuarios, vamos con una pequeña presentación de lo que os encontraréis, de momento, solo en el índex o portada los que por ella paséis.

Y si no tenéis por costumbre visitar elhome del blog es una buena ocasión para que por una vez lo hagáis xD

En esta ocasión ya os resultará familiar para los asiduos. Todo lo que en ella puedes ver es puro CSS:

Como ves y te cuento, puro y duro reciclaje xD. Bueno, eso o demostración de que es posible usar lo más nuevo de CSS de forma radical y extrema. Que por algo suelo usar el hashtag #impoCSSible inside.

Todo ello acompañado de unas cuantas CSS custom properties para facilitarme la vida, algo de filtros y blend modes CSS y un par o tres medias queries.

Por eso y porque confío en que los usuarios del blog estaréis al día en las versiones de los navegadores que utilizáis. Y que conste en acta que he dicho "navegadores".

Regreso a las raíces

En esta versión maCSSonry layout he vuelto al código original de Blogger para mostrar en la portada la relación de los posts más recientes. Los últimos comentarios y la sección rándom sigue siendo mediante javascript.

Para solventar la cuestión del tamaño de las imágenes que devuelve data:post.thumbnailUrl, miniaturas de 72px por 72px, recurro a javaascript para cambiar su tamaño a través del atributo src: .replace('/s72-c/','/s400/');

La cuestión tipográfica

En esta ocasión también recurro a diversas tipografías de Google Fonts. La diferencia es que estoy experimentando con la forma de carga.

En primer lugar hago uso de las custom properties de Css para su declaración al elemento al que interesa:

:root { --fontF: 'PT Serif'; --sinSerif: /* Fuentes del Sistema (ver post) */; } elemento { font-family: var(--fontF), var(--sinSerif); }

Y en vez de incluir el link que facilita el servicio para la generación de la regla @font-face lo que hago es crearlo una vez los contenidos de la página ya han sido cargados.

addEventListener('DOMContentLoaded', function() { if (document.querySelector('.last-posts') != null) { var jsFonts=document.createElement('link'); jsFonts.href='https://fonts.googleapis.com/css?family=El+Messiri:400,600'; jsFonts.rel='stylesheet prefetch'; jsFonts.async='true'; document.head.append(jsFonts); } });

Es mi intención investigar un poco más a fondo esta vía y si tiene impacto en el rendimiento, carga y los efectos asociados a las webfonts (FOUT, FOIT...).

El header en los artículos

Unos días después de estos cambios en la portada acometí los correspondientes a los ítems individuales. La mayoría de cambios han sido menores y dejando la parte de los comentarios sin tocar.

Lo que sí se ha llevado una remodelación total en el header de los artículos que luce ahora el blog. Puedes ver una explicación de cómo está hecho en el post Este título se me atravesó: por levógiro, responsive, single element y pure #CSS

Por primera vez en el blog recurro a canvas para generar los polígonos del header. Una frivolidad. El código base original lo encontré en Codepen, obra del usuario Josh.

Pruebas y soporte

En sobremesa he podido probar este nuevo tema en FF, Chrome y Safari, todos en IOs. No he observado ningún problema preocupante. Sólo FF no juega del todo bien con el pie de página. Espero que en sistemas Windows no haya problemas.

En móviles mi veterano teléfono, un HTC one V, con Android 4.0.3 y FF actualizado para él, sin problemas. Tampoco en los emuladores que cada navegador facilita en su "inspector de código" se rompe nada.

Más allá no he podido ir en este apartado. Así que ya sabes. Si te topas con algún bichito grita fuerte en los comentarios. Gracias.

¡Ah!. Sí. Sigo haciendo uso de data:blog.isMobileRequest para aligerar servir o no contenido (imágenes y su tamaño, número de posts, sección "rándom"...) según el dispositivo y tipo de conexión.

Y por esta vez no hay más explicaciones, porque el cómo ya lo tengo contado en cada uno de los artículos donde publiqué como lograr los distintos efectos.

Mi intención es cambiar también el resto del blog: artículo y demás páginas. Así como el backend: abandonar javascript para obtener los ítems de la portada en favor de código nativo de Blogger. Pero ya con más calma.

Espero que sea de vuestro agrado. Incluida la paleta de colores usada. Y que no os topéis con bichos muy gordos.

Nota del Editor: Por cierto, este el el artículo Nº 600. ¡Chupito! 🥃

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 11

  1. Mmmm.
    Demasiada pirotecnia. Pero supongo que me voy a resignar ... digo, "acostumbrar".

    Un abrazo, y suerte con la tarea (aunque es seguro que si sale un bug, alguien te lo va a reportar).

    ResponderEliminar
    Respuestas
    1. Es lo que nos debe quedar, Furoya, a estas alturas: paciencia y sabernos acomodar a lo que venga, 😎

      Un saludo.

      Eliminar
  2. No me deja entrar al sitio desde Microsoft Edge, que extraño :( en fin... buenas técnicas me gusta!

    ResponderEliminar
    Respuestas
    1. Gracias Alex

      Extraño, pues el js es prácticamente el mismo que en el tema anterior, pero reducido para esnifar solo tres grupos (últimos posts, comentarios y el rándom).

      Pero ya decía Y que conste en acta que he dicho "navegadores" ;-)

      Un saludo

      Eliminar
  3. Bueno, siempre es interesante que nos compartas cambios de este tipo en tu blog, pero... no me gusta. La visualización de los contenidos de tus artículos, han mejorado un montón y por eso mismo aprecio mucho, que te encante hacer cambios en el estilo del blog de vez en vez, pero en la portad siempre he tenido mis críticas.

    Si bien, no estuve muy convencido de cuando lo cambiaste a listas, más o menos me fui acostumbrado, aunque la verdad no del todo y seguía muy perdido para encontrar artículos anteriores, si no fuera por el link que dejas de recopilación. Igual este diseño me gusta más, en cuanto a la disposición de elementos y artículos, pero en cuanto al diseño, es como dice Furoya, demasiado "confetti" y ya has dejado claro anteriormente tus gustos con respecto al color, pero aquí no los "paso", se siente una estética demasiado retro y las tonalidades escogidas, no me remiten a lo que siempre me has acostumbrado a pensar que son los colores del blog.

    Esa es otra, entiendo que como tal, kseso, perdón escss es una marca sin manual, es decir, algo que como tal no definen una identidad, sino que la quieres construir de 0 cada vez que quieras para no limitarte, pero mi opinión personal , es que si deberías enfocarte en crear una identidad cromática que sea uniforme así sea en una medida no tan predominante, es decir, en cuanto a diseño Chris Coyier, siempre cambia todo igual o más abruptamente que tu, pero siempre conserva algo de la identidad anterior o en mínimas cuentas, siempre conserva un color: el naranja, no recuerdo sí así ha sido siempre o al menos en el último año, no tengo forma de acordarme de cómo era su web en 2015, pero siempre me acuerdo que si veo algo naranja, en algún lado es que estoy en su blog. Muy distinto cuando intento acordarme de escss, ha sido violaceo, azul, magenta, verde, naranja, gris con verde y ahora violeta, amarillo palido y verdeazul. Que de por si, esa mezcla, no creo que combine mucho.

    En fin que resumiendo, recomiendo puntualmente 3 cosas:
    1. Colores, su contraste y uso.
    2. Buscar una paleta de color en colourlovers.
    3. El diseño de verde con gris me ha molado un montón, me hubiese gustado que lo perpetuaras, así sea un año más.

    Ya en cuanto a otras cosas de forma:
    1. En portatiles y en mi smartphone se ve genial, pero en pantallas más grandes como de 1600 o como la mía: 1980 de ancho, todo ocupa un tamaño excesivo.
    2. La sombra de los textos, no combina pero nada con los colores del sitio y como que no queda bien tampoco, cambiando el color y ampliando un poco más su volumen, sería diferente, pero la verdad, no me convence mucho.

    Bueno, hasta aquí mi crítica. Espero no te lo tomes a mal, mira que me tome bastante tiempo escribiendo, porque en serio tu blog es de consulta casi diaria para mi, en serio me gusta que quieras seguir cambiando y mejorando cosas cada cierto tiempo, es precisamente por eso, que sigo muy pendiente de tus publicaciones y quiero ver con que me sorprenderas a la próxima. Un saludo y nos estamos leyendo.

    ResponderEliminar
    Respuestas
    1. Gracias g3kdigital por tomarte tanto tiempo y molestias.

      "Espero no te lo tomes a mal"
      En estos casos la respuesta no es sólo un no si no todo lo contrario. No sólo no me parecen mal vuestras opiniones (para eso abro el post) si no que agradezco toda la información que me brindáis.

      El tema de las resoluciones "grandes" creo que estará ya arreglada con una media a mayores y un pequeño ajuste de las celdas que se expanden algunos ítems:
      [code]
      @media only screen and (min-width: 1600px) {
      .last-posts {
      grid-template-columns: repeat(auto-fill,minmax(calc(8rem + 3vw + 3vh),1fr));
      grid-gap: calc(1rem + 1.5vmin);
      padding: calc(1rem + 1.5vmin);
      }
      }
      [/code]

      La sombra es porque noté que los títulos se difuminaban un tanto contra el fondo. Creo que al cambiar el color de la sombra mantengo la función y evitaré desagrados ;-)

      Bueno, y sobre los colores ya deberíais tener asumido que soy un caso perdido 😰
      Eso sí, me reconocerás que los he tenido peores 😄

      Recuerda que ni voy de diseñador ni de nada de profesionalidad en este rublo de hacer webs, "sólo soy un Enredique Amanuense de CSS que busca los límites" y escapo, como de gato escaldado del agua fría, de los caminos trillados, de la uniformidad y modas de cada momento.

      Un saludo y gracias de nuevo.

      P.D.: Casi mejor que no debería comentaros (en especial a ti y a Furoya) las pruebas de aproximación al "brutalismo" que estuve haciendo 😹

      Eliminar
    2. ¡Pero si el brutalismo es uno de los estilos que más me gustan! Bueno, en arquitectura; en páginas web ...

      Me quedé pensando en la objeción de los monitores grandes. La forma de "arreglar" eso es reducir el ancho del 'body' (sí, con mediaqueries), aunque hay gente que se queja porque a los lados se ve negro; pero la otra opción es justamente que el contenido de la página se desperdigue a lo ancho, y para leer eso es una tragedia. Que alguien pretenda agrandar la web hasta el tamaño del monitor ultra-wide-screen es tan ridículo como querer agrandar una A4 que estamos leyendo sólo porque está sobre una mesa de 80cm de ancho.

      Eliminar
  4. En una pantalla 21:9 no se ve agradable. Sería bueno que revisaras eso ;)

    ResponderEliminar
    Respuestas
    1. Gracias Alberto

      Pero como no mes des alguna pista más que no se ve agradable no podré intentar arreglar nada.

      Un saludo.

      Eliminar
  5. Se me ve la barra de scroll horizontal en chrome 1366x768, incluso cambiando el zoom.
    Saludos,

    ResponderEliminar
    Respuestas
    1. Gracias Mario

      Localizado el causante (el header donde muestro el título revirado). Creo que con cambiar su anchura a 100% en vez de 100vw ( y un par de ajustes menores) se debería corregir.

      Espero dejarlo solucionado esta tarde.

      Un saludo.

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap