Un adelanto a título experimental y de forma temporal

Un adelanto temporal de la nueva imagen del blog que se avecina. Sólo disponible por unas horas durante este fin de semana. Sólo por torturarte un poco y que me des tu opinión. Gracias.

Un adelanto a título experimental y de forma temporal

Por Kseso ✎ 19
Imagen ilustrativa para la presentación del nuevo tema

Para que sufráis un poco aquellos visitantes del blog que no lo estéis haciendo con el partido de la final de la "champion" y por casualidad paséis por el blog durante este sábado os dejo ver un poco lo que me traigo entre manos.

Te presento (y así aprovecho) la próxima imagen del blog. Siempre que no cambie de idea y le de una vuelta completa antes de hacer el cambio siguiente. Que como me conozco... pues eso, todo es posible,

Navegadores testados

Sólo está testada en las últimas versiones de Firefox y Chome, en windows. En otros navegadores no la he abierto.

Lo que sí te adelanto es que aquellos que no soporten las unidades relativas al viewport fallarán bastantes cosas.

Lo mismo que aquellos que no manejen los SVG en línea diferidos. La razón es que he prescindido de las tipografías de iconos y con ellas las peticiones y peso para mostrarlas en beneficio de las imágenes SVG.

Un pequeño bug en Chrome que afecta a la portada

Chrome tiene un bug en el manejo de las columnas Css. Crea un espacio al final de la caja que las contiene. Espacio mayor o menor en función de unas cuantas variables imposible de prevenir y compensarlo.

Al final opté por prescindir de las columnas Css.

La sorpresa está en los encabezados

Para quienes uséis blogger quizás os sorprenda el título de las entradas. Verás bajo él una imagen colocada vía css como background-image. Imagen que cambia en cada post. Creo que este detalle amerita un post más adelante. Que por cierto, la imagen del encabezado de este artículo es obra de Ben Heine y proviene de su blog.

Los códigos los verás tal que así:

header { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; padding: 1rem; overflow: hidden; will-change: contents; }

Una cita textual

Y en caso de tener que citar texto de terceros seguiré usando el blockquote qye ahora se verá como el de abajo:

Reloj de emociones imborrables. Martillo de luz, hoz de trabajo, espina de tiempo.
El primero de mayo mi madre y yo cantábamos —en voz baja— esta letra de la Internacional:
“Arriba los de la cuchara, abajo los del tenedor, que mueran todos los fascistas, Viva el brazo trabajador”.
Oh, sí. Reloj de emociones imborrables. Martillo de luz, hoz de trabajo, espina de tiempo.
Rama y simiente de un templo antiguo. libradas al olvido que nos aguarda.
Oh, sí, puñal de tiempo. Oh, sí.

Basta de rollo, Cuéntame cómo lo ves

Pues eso, que bastante rollo sólo para una prueba que sólo tiene por objeto adelantarte la nueva imagen y que me digas cómo la ves.

Déja un comentario y así de paso vemos su funcionamiento y estética. Gracias.

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: 19

  1. Esta es una prueba de comentarios en este tema realizado por el autor del blog.
    Disculpas, pero lo necesito para ciertos temas y ajustes.

    Y de paso vemos cómo quedan los códigos:

    .name-blog, .name-blog a {
    color: #E6EFF0;
    font-family: Source Sans Pro,sans-serif;
    font-size: 2.5rem;
    font-variant: small-caps;
    font-weight: 300;
    line-height: 2.5rem;
    }

    ResponderEliminar
  2. Ups!... Qué sorpresa. Creí que me había equivocado de pestaña.
    Como de costumbre, me va a costar acostumbrarme.
    ;-)
    Las imágenes de portada están lindas, pero me dificultan ubicar los botones. Más que nada por los efectos de transparencia.
    Y la opacidad en los links de "últimos comentarios" supongo que también podría subirse un poco; No hablo de una cuestión estética —porque de eso mucho no entiendo— sino de seguir el 'mapeado' que uno hace en la cabeza de la colección sin la dificultad de los cambios. Ya que menciono los botones y las subidas, a mí me servía que esuviesen arriba, porque al entrar ya confirmaba si los colaboradores agragaban algo nuevo.
    ¿El 'blockquote' también es para nosotros? Es raro que tengamos que citar a alguien, pero se puede dar y es un recurso más.

    No sé cuánto tiempo estará disponible el período de prueba. Lo vi tarde, ahora me tengo que ir. Me hubiese gustado husmear un poco más cómo hiciste algún efecto, aunque sospecho que va a haber tutoriales sobre cualquier nuevo método o truco.

    Felicitaciones por el pre-estreno.

    ResponderEliminar
    Respuestas
    1. Gracias por las aportaciones al vuelo.

      "Más luego" echo un vistazao al tema de los avatares y su opacidad.
      Y ya que tenemos un icono en el lateral para subir miraré a poner el de bajar ;-)

      Un saludo y gracias

      Eliminar
    2. De nada, sabés que le tengo mucho cariño a este blog, así que me la paso visitando y molestando siempre por acá. Aunque sea este poco, alguna vez tenía que ayudar en algo.


      Y resulta que en cada cosa nueva que miro, hay una sorpresa.
      Ahora veo el efecto de la marca de agua con el logo que desaparece al acomodar el contenido para empezar a leer, y que coincide con la aparición de la barra de menúes.

      Otro efecto que te quedó muy bueno (aunque quienes acostumbren mover el puntero por toda la página mientras leen se van a acordar de tus ancestros por rama femenina) es el destacado de los enlaces. No entendía muy bien por qué tanta area hasta que vi el detalle del destino incluído. ¿Se podrá centrar?.

      Estuve mirando que el texto en los campos de contacto es más legible si la fuente pesa 900, aunque eso puede cambiar la idea del diseño. También probé la validación, y no me tira error en los campos (como un cambio de color) sino un mensaje (éste sí, practicamente invisible) debajo del formulario.

      Un detalle, que seguramente aparece porque está en etapa "borrador", son las viñetas o marcadores de lista. A mí me sale cualquier cosa (bah, me sale en chino, japonés y coreano; que es lo mismo que me hablaran en chino, japonés o coreano).

      Se me ocurrió una idea, que ya se te debe haber ocurrido antes, para los botones semitransparentes. Si están hechos en SVG, se les puede dar un borde opaco o hasta de un color de contraste con transparencia, así no se perdería tanto el efecto blend sobre el fondo.

      Mmmm... creo que más que opinando, ya me estoy metiendo con el diseño; así que mejor me retiro.

      Me está gustando mucho este nuevo tema del blog.
      Un saludo y gracias a vos.

      Eliminar
    3. Vamos con un poco más de tiempo por apunte por apunte de los que has hecho, Furoya

      La referencia al blockquote era sólo a efectos de mostrarlo en el cuerpo del artículo. Bogger no permite esa etiqueta en los comentarios.

      a:after → attr(href) Era fácil centrarlo. Sabiendo la anchura de la sombra del enlace y ya que tenemos la propiedad calc( ). Ahora quizás quede feo si el enlace se distribuye en 2 líneas, que podría evitarlo con un inline-block pero eso lo forzaría a nueva línea y el espacio vacío en la anterior...

      inputs contacto Añadida visibilidad. Queda pendiente el resaltar los avisos de validación, tanto de error como de OK. Los selectores ya los tengo del tema anterior, queda la idea del diseño.

      ¿Símbolos extraños en las listas? ¡Qué raro que no mirases el código! xD Experimentando con list-style-type: cjk-ideographic; y de paso un pequeño guiño

      Los svg Sí, reconozco que pasan un tanto desapercibidos. Pero es que no pretendía que fuera un elemento que resaltase. Ahí les quité un poco de transparencia y añadí un fill de un 1px

      Está bien que te vaya gustando, porque para mi ya ha comenzado la cuenta atrás. Cada vez que lo veo me gusta un poco menos que la anterior xD ;-)

      Eliminar
  3. Me parece muy guapo este nuevo diseño. Si que hay algún texto (sobre todo en el footer) que no se distingüe bien con las imágenes de fondo, pero le restaría importancia al ser un diseño tan creativo e innovador.

    Me gusta :)

    ResponderEliminar
    Respuestas
    1. Gracias Antonio
      Veo que coincides con Furoya en sugerir un mayor contraste en los elementos del footer.
      Tomo nota.

      Un saludo

      Eliminar
  4. Esta muy chevere esta propuesta, es muy minimalista y sofisticada, no te digo mis recomendaciones pues son las mismas que los anteriores comentarios te han hecho. espero verla pronto ya en producción. felicitaciones, segui adelante

    ResponderEliminar
    Respuestas
    1. Gracias Erledie
      Lo que espero es que el blog te sea de ayuda de cuando en vez.

      Un saludo

      Eliminar
  5. En lo que a mí respecta, me gusta mucho más este diseño, se ve más estético, simple y por supuesto más limpio que el actual, no entiendo muy bien todo eso de los códigos css y por el estilo, apenas voy aprendiendo poco a poco gracias a gente que como tú se da a la tarea de enseñarnos cosas como ésta. Estaría muy padre que enseñaras a hacer algo como lo que tienes en tu cabecera para las redes sociales.
    Pienso que lo único que cambiaría sería el color de los títulos del contacto y los últimos comentarios, por lo demás, ésta es una plantilla que yo seguro utilizaría.

    Saludos.

    ResponderEliminar
  6. Me encantó, está super moderno e intuitivo :) a mi tambien me tinca harto comenzar a experimentar con SVG que es perfecto para integrarlo con css y js, ojala nos sigas enseñando mas cosas geniales de diseño :)

    ResponderEliminar
  7. Muy interesante y con mucho vuelo el nuevo diseño. Y dá muchas ganas de seguir aprendiendo de diseño web...
    PD: una duda ¿testados o testeados? Un saludo.

    ResponderEliminar
    Respuestas
    1. Gracias, Dsigno.
      Y ambas, hoy por hoy:

      Testar (3): tr. Someter a test a una persona o cosa para comprobar sus conocimientos o sus propiedades y calidad (1)-(2)

      Un saludo

      Eliminar
    2. Gracias... todos los días se aprende algo. Saludos

      Eliminar
  8. Pues tarde, pero aja, aquí van mis respectivas wow, omg y WTF but YES, why not?. En general me gusto el cambio, coincido en que se degusta mucho más serio, aunque lo colorido del anterior tema, tenía lo suyo (sería bueno que guardaras themes en un post, algo así como el baul de los recuerdos o evolución de los templates) este tiene un aire más pro.

    Bueno, pero obvious si estamos en esto del CSS, es porque nos gusta el olor a diseño y lo creativo siempre tiene sus peros y criticas:

    1) Pienso que el titulo a toda la pagina, confunde un poco al usuario primerizo, no digo que lo cambies, pero si un poco más de indicación, algo así como un icono o un texto "hola, este abajo hay algo, scrollea plis", creo que mejor un icono xD.

    2) Los comentarios están geniales, pero me he dado cuenta que he sido victima y muchos otros también, del pixelado maldito, y es que, no se sí sea el tamaño en mi monitor y resolución, lo que me impide me impide ver bien las fotos, pero supongo que los avatares de blogger no fueron creados para verse en tal tamaño.

    3). Siento un abuso de las transparencias, sobre todo pa´ la caja de contacto, es que no se, la otra vi un codepen donde hicieron lo mismo que tu una vez, y fue desenfocar el fondo un poco, siento que es la mejor solución para un buen uso de transparencias sobre fondos de imágenes, con sobresaturación de elementos, dificulta por demasía la lectura. Lastima por lo de firefox, ie suck y que quiza la mejor solución, sea con js, por lo del filter: blur, pero creo que como hiciste sus :hover, sería la mejor solución.

    4) En el mismo contacto, los input nombre y mail, así como "anterior", "novedad" y "posterior", son muy FLAT a mi gusto, no los siento presionables, ya es como la septima vez que ni les presto atención, se que quizas no sean tan usados, pero aja, abandonarlos? Por cierto sus hover son muy geniales, me los robo, si no te importa.



    Siento no comentar al instante, pero es que al prinicpio me choco tanto el cambio (no por malo, sino por lo diferente, me paso lo mismo que furoya), que sentía que era necesario una etapa de acostumbramiento hasta juzgar bien bien.

    Coño! y lo demás genial! muy awesome, muy experimental, un poco sobrecargado de imágenes que ni al caso, pero creativo, sublime y bien hecho. Un aplauso de esos que suenan a lluvia.

    ResponderEliminar
    Respuestas
    1. No había pensado en eso de de la confusión para quien entra por primera vez. Yo empecé a escrolear de curioso, y ya incorporé que hay que bajar el documento para ver las novedades. Pero me pasa siempre cuando entro a un sitio que arranca con una portada a página completa (como debe ser una portada, vamos) y me quedo mirando sin saber qué hacer.
      Eso se me olvidó comentarlo.

      Muy interesante la sugerencia del botón. Debería ser un ícono universal, un ojo, un documento que alterna con una flecha hacia abajo, o quizá un texto "Inicio" o "Entrar", y al clickearlo se produce el efecto de "transición". También podría no haber nada, como ahora, pero agregar una demo, un desplazamiento después de unos segundos de cargada la página que muestre que hay algo debajo y que luego vuelva a su posición inicial. El que quiere, la arrastra luego con la scrollbar.


      Claro que por cada idea que se nos ocurra, a Kseso se le ocurrieron cinco y descartó seis. Es así, ya lo conocemos.

      Igual es lindo tirar variaciones sobre un modelo práctico.
      Desoxida el cerebro.

      Eliminar
    2. Gracias g3kdigital por tomarte el tiempo de analizar la página y compartir tus opiniones. Mejor con calma y extensa que al momento y vacía.

      Vamos por partes, que decía aquél:

      .- Tu intro
      Sí tengo guardados los .xml de las distintas plantillas (otra cosa sería encontrarlos e identificarlos). Si no los he puesto en "barra libre" es porque me da vergüenza que quien maneja los códigos de blogger vea los horrores que encierran.

      1.- El título a toda página:
      Supongo te refieres al de los artículos y en base a ello te comento. Creo que es un aspecto que hoy por hoy no tocaré. La barra de scroll creo que es suficiente indicador de que "tires pa´bajo". Y los usuarios de aparatos que no la muestran hasta interactuar con la pantalla ya estarán acostumbrados.

      Tiene razón Furoya (como casi siempre) al suponer que alguna idea barajé. De hecho hace poco compartí una de ellas en este artículo.

      2.- Los avatares
      Sí. En los comentarios tengo un pequeño problema con ellos. Si te fijas en el index no salen pixelados (ni en el 1 resumen ni en el footer). Tampoco en los post en el footer.
      Creo que debe tratarse de alguna particularidad del código del tema que uso como base y de cómo genera los avatares (en otrso blogs la imagen inyectada en el html es mayor). Unos los pilla demasiado pequeños y otros no. Creo que es función del destino del enlace. Si al perfil del usuario en g+ o blogger.

      3.- 4.- No te extrañes que todo ese footer (contacto y "piadores") termine desapareciendo. Pero el no darle más "presencia visual" es porque lo considero algo totalmente secundario (como los svg del header). No relleno. Secundario en el sentido de que es accesorio. Si para alguien pasa desapercibido no pasa nada.
      Sobre el filter blur: de hecho ya fui pionero (creo) en alguna cosilla y su uso en esos navegadores que nombras (Chr, FF, IE...)

      Y por supuesto que puedes llevarte ese :hover y cualquier otra cosa. Recuerda la licencia beerware de todos los códigos. Además no los parí yo. Adapté algo que vi.

      Una vez más, gracias g3kdigital por todo el aporte.
      Un saludo

      Eliminar
    3. ¡¿Cómo que "casi"?!
      ( XDDD )

      Eliminar

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