EsCss v6 Nuevo tema y cambio de look al blog

Presentación del nuevo tema del Blog. La versión 6 y las principales novedades y cambios que trae. Y sí, sigue siendo un Blogger.

EsCss v6 Nuevo tema y cambio de look al blog

Por Kseso ✎ 35
EsCss v6 Nuevo tema y cambio de look al blog

Siguiendo con la tradición, como las serpientes y otros animales que de esto saben, ya es obligado en EsCss mudar la piel cada año. Y este no iba a ser menos. Así que déjame presentarte el nuevo look del blog:

— Usuarios del Blog, aquí el nuevo tema.
— Nuevo tema, aquí tus usuarios. Espero que no sufridores.

Hechas las presentaciones oportunas para perder la vergüenza y timidez y que me deis la del pulpo en los comentarios con vuestras opiniones, críticas y avisos varios, voy con algunos aspectos del traje que estrenamos hoy.

En esta ocasión hay diferencias notorias entre las distintas páginas o secciones del blog. Tanto en su apariencia (<style/>'s) como en los códigos de Blogger y HTML usados en cada una:

  1. La página de inicio.
  2. Los posts o artículos
  3. Los resultados de búsquedas, ya sean por etiqueta o término.
  4. Las páginas estáticas.

El índex, home o portada del blog

Para aquellos de vosotros que utilicéis TweetDeck os resultará más que familiar. Sí, es una recreación personal de su interfaz.

Espero que es uso de tanto scroll no asuste a nadie. De todas formas para aquel que entre a ella sólo para ver si hay artículo o comentarios nuevos lo podrá ver sin mayor problema.

Aquí, en el índex, no cargo nada del código propio de Blogger. La monto en base a javascript. El código necesario ya lo he compartido en varias ocasiones, como ésta o esta otra.

Para poder prescindir del código de Blogger en Blogger y que todo funcione está reciente: Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog).

Si se acede con móvil espero que el data isMobileRequest haga su trabajo (ver artículo) y sólo se carguen las columnas de los post más nuevos y los comentarios y el javasript necesario para ello.

Y sí, todos los iconos que ves en ella, desde la "E" hasta la "K" pasando por los de las cabeceras de las columnas, son SVG´s. En esta ocasión insertados como symbol´s. Si los quieres, el svg que los contiene está tras la apertura del body

Mejor aprovechamiento del viewport en los posts

La mayor novedad en las páginas de los artículos es que hay un mejor uso de todo el viewport. Mientras que los textos están limitados en su anchura máxima, los pens embutidos como ejemplos, demos, y los bloques de código ocupan toda la ventana. También las imágenes que lo necesiten pueden usar el margen que dejan los textos.

Como ejemplo y para que puedas evaluar este aspecto aprovecho para insertar un viejo pen:

See the Pen CSS matrix: writing-mode Reloaded by Kseso (@Kseso) on CodePen.

Ver Demo en Codepen

Otro detalle es que el tamaño de la tipografía es realmente responsive. No sólo su font-size varía con el tamaño del viewport. También lo hace su longitud y altura de línea:

.post-body p { font-size: calc(.20vw + .20vh + 1rem); line-height: calc(.4vw + .4vh + 1.3rem); max-width: 40em; }

Para la tipografía del cuerpo de los post me he decidio por una serif: Scope One * en detrimento de las fuentes del sistema: Modern System Fonts. Lo cierto es que ya hace un tiempo que venía pensando en darle una oportunidad a alguna serif.

* Debido a todos los problemas que habéis ido reportanto sobre la Scope One (iniciados por su "finura" de trazo y mis intentos fallidos para corregirlos) opté por cambiarla. ¿Cuál es la actual? Pues sinceramente que no recuerdo su nombre o familia. He usado una que hace tiempo tenía en base 64. Así que como otro pequeño experimento la incluyo en el head en ese formato:

<style> @font-face{ font-family:mi_serif; font-style:normal; font-weight:400; src:url(data:font/opentype;base64 ...); } </style>

Si crees que la lectura se ve penalizada por esta decisión házmelo saber en un comentario. La legibilidad siempre por encima de gustos personales.

En el header de los artículos me he permitido jugar un poco y poner la frivolidad de ese encabezado con el título y la intro que ocupa toda la pantalla y obliga a hacer un click para que aparezca el contenido y el scroll para desplazarte por él.

El detalle del click en el header después de estos días de pruebas y vuestras opiniones al respecto pasó de "at risk" a "deprecated".

La sección de los comentarios y footer

En esta sección mantengo la misma estructura de la versión previa. Lo que hago es utilizar en el fondo y otros detalles la misma paleta de negros de la portada.

Si insertas algún pen o código en ellos también ocupara el espacio libre de la izquierda que deja el texto.

Por el footer también ha pasado más que el hombre del hacha el de la motosierra. Vuelve a quedar reducido a su mínima expresión.

Un poco del CSS más "novedoso".

Tras estos años de existencia del blog (ya fuese con el viejo nombre de KsesoCss o el actual EsCss) todos sabemos lo que me gusta experimentar con los límites del CSS. Y también son conocidos algunos batacazos que me he llevado en los temas que he querido usar en el blog por sobrepasar los límites productivistas.

En esta ocasión el peligro viene, además de por el mencionado header por el uso y abuso de las custom properties de CSS. Otros las llaman variables CSS.

Como soy propenso por mi corta memoria a terminar usando cienes y cienes de tonalidades de los múltiples colores que termino desperdigando por el código y otras aberraciones por el estilo, en esta ocasión eso no me pasa (o pasa más desapercibido) gracias ellas.

Eso, un poco de flexbox y el uso de la función CSS calc() como mencioné antes son los pilares de este tema:

:root { --sinSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", /*... varias familias más...*/ "Helvetica Neue", sans-serif; --negroO: #222426; --negroM: #292f33; --negroC: #444448; --gris: #999; --blancoS: #e1e8ed; --link: #0ebeff; --info: #3cb371; --ojoCuidao: #FC5135; --diamantesC: repeating-linear-gradient(120deg, rgba( /*... varias líneas más...*/ transparent 30px); } el { background: var(--negroO) var(--diamantesC) repeat; color: var(--blancoS); border-right: 6px solid var(--negroC); }

También me he permitido un par de frivolidades con clip-path y una sorpresa en las listas (en su list-style-type) usando alguna cosilla de los contadores CSS de tercer nivel que sólo veréis si usáis algún navegador que lo soporten ;-).

Resultados de búsquedas, páginas estáticas y paginación

¿Alguien usa los enlaces de página anterior y siguiente? Yo confieso que nunca. Y creo que no soy el único que los ignora olímpicamente. Así que fuera con ellos.

En su lugar hay un bonito y práctico enlace a la página del sitemap donde están todos los post del blog ordenados por la fecha de publicación.

También he implementado en el índex el buscador de Google. Más exhaustivo que el simple que vengo utilizando y que mantengo en los posts. Pero también devuelve más resultados con escasa relación con lo buscado.

Las páginas que Blogger llama "índex pero no homepageUrl" he sido todo lo sobrio que he podido, tanto en el código generado por el CMS y servido al navegador como en el CSS usado en ellas.

Un ejemplo de este tipo de páginas son las generadas por las búsquedas o al pinchar en las labels o etiquetas. Como ésta. Que por cierto, en ellas sí sale la paginación si es necesaria.

Y de la publicidad y el aviso traga galletas ¿qué?

Tras algo más de un año con el tema previo en el que dejé por ahí tirados un par de anuncios de adsense que me obligaban a cumplir con la ley de las galletas las conclusiones no pueden ser peores:

Así que siendo honesto mejor me ahorro todo ello y de paso vosotros os veis libres del puto aviso y del delay y consumo de datos y ancho de banda que su presencia suponía.

Los raquíticos ingresos generados no compensan el esfuerzo y los recursos necesarios para mostrarla. No merece la pena la molestia del aviso y la carga de los scripts

Tu turno: discrepancias, ruegos, avisos, pareceres y sugerencias varias

No pensaba extenderme tanto ni ser tan cansino y pesado en la presentación de la versión 6 del blog. Mis disulpas.

En venganza haz tú lo mismo ;-) y expláyate en los comentarios. Dame toda la caña que quieras sobre cualquier aspecto que consideres oportuno. En especial te agradeceré los avisos de errores o fallos que encuentres.

Quedan algunos detalles por refinar y complementar. Ya con más calma iré dando cuenta de ellos. Pero recuerda que ni soy ni nunca he pretendido pasar ni por diseñador ni por profesional de nada. Sólo:

Sólo soy un viejo ramajero argonauta. Enredique amanuense de CSS que no tengo nada para callado y que todo lo comparto bajo una licencia beerwre.

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

  1. Me encantó el nuevo look del blog Kseso, felicidades.

    El efecto del <header> de los artículos me gusta pero considero que sería mejor si al hacer scroll se mostrara el contenido. Si no estoy mal el evento Wheel te podría ayudar con eso

    ResponderEliminar
    Respuestas
    1. Gracias Darhakexge

      Ese "efecto" está bajo consideración. O at risk" si empleamos la terminología de W3c xD.

      Un saludo

      Eliminar
  2. Bien por la actualización y el uso del CSS y javascript para los efectos y estilos. Sin embargo, la estética no me gusta para nada.

    ResponderEliminar
    Respuestas
    1. Sobre gustos y colores... ya sabes lo que dicen, Alberto.

      Gracias por tu opinión.

      Eliminar
    2. Gracias a ti por los tutoriales y consejos ;)

      Eliminar
  3. A mi me parece bien, porque la actualizacion sigue la conducta del inicio del blog, -Utilidad-, esoy cansado de ver como suplen falta de material util con 'Cosas que quedan lindo!' , la estetica a veces no es importante. No le aflojen, nunca he aprendido tanto con un blog como en este.
    Solo les pediria que el Cyan con el blanco para los 'Viejitos' como yo es dificil de leer (Je).

    ResponderEliminar
    Respuestas
    1. Buenas Carlos
      Un poco exagerado ese nunca he aprendido tanto con un blog como en este
      Pero oye, me alegraste la mañana.
      ;-) xD

      ¿Con lo del cyan te refieres al color #0ebeff de los enlaces?
      ¿Cuál piensas que quedaría mejor? ¿Algún naranja, por ejemplo?

      Vosotros pedid, que yo, ya si eso... xD

      Un saludo

      Eliminar
    2. Me refiero al color como el que se ve en las fechas, cuando es corto se ve bien, pero cuando es mas extenso se hace algo dificil de leer y si le haces hover de mouse pone en verde tenue , Esos mismos tonos pero mas oscuros y todo solucionado!
      Saludos

      Eliminar
    3. O se podría usar el mismo color, pero con la fuente más gorda para que sea más visible el texto.

      Hola gente. aprovecho tu entrada, Carlos Ferro porque voy a hacer otros dos comentarios y uno tiene que ver con el tuyo.

      El propio es que me molesta mucho el formulario de búsquda. ¿No se podrá convertir a ícono hasta que se le ponga el puntero encima? Es demasiado grande y está justo donde quiero leer.

      El otro es sobre
      "...No le aflojen ..." o "...Solo les pediria..."

      ¿Ves Kseso, que tengo razón? ¡Está tan bueno que al final no te creen que el blog lo hacés vos solo!

      XD

      Eliminar
    4. Bueno, Furoya, si lo pides así y por esa razón miraré a ver qué hago. Pese a que a tu reclamo le falte la copia verde xD =P

      ¿Quizás colocando uno en cada esquina?

      Buena tarde por allá.

      P.D.: estate atento al pie de artículo en tu próxima colaboración ;-)

      Eliminar
  4. Aun no me acostumbro a este nuevo look pero ya sucederá como en otras ocaciones. Bravo por la constante renovación. Un blog que definitivamente nos hace amar a CSS. Gracias!

    ResponderEliminar
    Respuestas
    1. Gracias GenteIdeas Web.

      También por las ocasiones en que compartes entre tus seguidores algunos de los contenidos del blog.

      Un saludo.

      Eliminar
  5. Costará un poco acostumbrarse, pero cada vez que lo veo me gusta más. El estilo de tweetdeck siempre me ha maravillado, y lo encuentro cada vez más funcional, además del impresionante cambio que le has dado a todo.

    Grandísimo trabajo, y artículo donde también podemos aprender y mucho, como siempre ;)

    Un abrazo y chapó!!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias, Javi.

      También un poco mucho "shagerao". Pero bueno... xD

      Un saludo.

      Eliminar
  6. Hola, soy seguidor de tu blog desde hace mucho y te felicito por los contenidos, aún me sorprendo con todo lo que aprendo

    Como diseñador con un gusto especial por la tipografia tengo las siguientes observaciones:

    En general veo varios problemas de lectura:

    * En pantallas grandes los renglones son demasiado anchos, lo ideal de un acho de renglon es que no tengas que mover la cabeza

    * En pantallas anchas la distancia entre el renglon del titulo y el cuerpo de texto es mucha, los ojos buscan un punto cercano a la linea de bloque y tener que saltar tan lejos desconcentra de la lectura

    * La fuente de la caja de texto la veo muy delgada, eso hace que la mente se esfuerze en reconocer los caracteres mas que en interpretar lo que dice, has la prueba desactivando el font family

    * El color de los vinculos es demasiado clarito, brilla y como todo brillo deslumbra un poc, la flechita de arriba de los vínculos no es clara

    * La portada gris es innecesaria, y necesita una flecha explicando como acceder al contenido, pierdes el acceso directo al contenido y encima debes explicar como pasar, y no ganas con el adorno

    * El icono de alerta es muy grande y choca con el ritmo de la lectura, ademas puedes resaltar el tipo de aviso, las citas se prestan para hacer composiciones tipograficas interesantes y con color

    * Al contrario de las fuentes del texto, las fuentes de los titulos pueden ser mas destacadas y con mas personalidad

    ¿Seria excesivo hacerte una propuesta de todas estas ideas, como retribucion a todo lo que he aprendido y sigo aprendiendo?

    ResponderEliminar
    Respuestas
    1. Hola Daniel

      Gracias por tan detallado análisis.
      "¿Seria excesivo hacerte una propuesta de todas estas ideas?"
      El motivo de estos post "de presentación" de los cambios es precisamente ese: recabar vuestra ayuda. Así que además de esperadas y deseadas os las agradezco enormemente.

      El cómo luce en "grandes pantallas" no he podido verlo por mi mismo, aún. Supongo que todos los males que me listas son debidos a utilizar la unidad EM para la longitud de líneas conjuntamente con las relativas al viewport en algunas declaraciones. Como:
      [code]
      .post-body p {
      font-size: calc(.20vw + .20vh + 1rem);
      line-height: calc(.4vw + .4vh + 1.3rem);
      max-width: 40em;
      }
      .post-body h2 {
      font-size: calc(1.5vw + 1vh + 1rem);
      line-height: 1.35em;
      }
      [/code]
      Toca darle una repensada.


      La tipografía serif elegida, 'Scope One', en tamaños grandes para mi luce genial, creo. Pero en el cuerpo de los textos su finura puede penalizar la lectura. Su legibilidad, mejor o peor, depende y mucho del navegador y del método de renderizado de cada SO (antialiased y subpixel-antialiased).


      De hecho el efecto es mucho más notorio en Chrome que en Firefox.
      Se me habían perdido unas declaraciones para intentar paliarlo un poco:
      [code]
      text-rendering: optimizeLegibility;
      -webkit-text-stroke: .25px;
      -webkit-font-smoothing: none;
      [/code]

      Ya me comentas si lectura ha mejorado. De no hacerlo veré de cambiar la 'Scope One' por otra. ¿Sugerencias?


      Sobre el color de los enlaces ya preguntaba si mejor algún "orange". Al icono de "atención" le bajé un poco el tamaño.


      Y sí, la intro de los artículos está bajo la lupa.


      Muchísimas gracias por tomarte tu tiempo para ese análisis tan completo.


      Un saludo.

      Eliminar
  7. Esta chula la pagina del blog, aunque me tendré que acostumbrar al nuevo look. Dime algo que trozo de codigo tengo que sacar para eliminar enlaces de pagina anterior y siguiente. Saludos... Escss

    ResponderEliminar
    Respuestas
    1. Hola Jhonny

      Todo depende del marcado de tu plantilla.
      El 'include' que lo controla es <b:includable id='nextprev'> y <b:includable id='nextprev'>

      Esos 'includables' generan los enlaces allí donde se necesitan con el código <b:include name='nextprev'/>
      Dónde estén dependerá de tu plantilla.

      Un saludo

      Eliminar
    2. Gracias por tu pronta respuesta EsCss en español.

      Eliminar
  8. Simplemente ... 👏👏👏👏

    ResponderEliminar
  9. Excelente rediseño, gran trabajo. Sobre todo en las tecnicas utilizadas. He revisado el css y es impresionante. Es cierto que la estetica, a mi en lo personal, no me gusta. Pero tampoco me gustaba la anterior. Pero no por ello, dejo de entrar al blog y leer todo el contenido, que es lo importante. Y que escribes muy bien. Todos te dicen cosas a mejorar. Yo te digo una que, para mi, ha sido un gran acierto. El icono de la flechita hacia arriba. Me parece super intuitivo.
    Bueno, que no me enrollo más, que enhorabuena por ese continuo trabajo que haces, que es excelente.
    Saludos,

    ResponderEliminar
    Respuestas
    1. Gracias Carlos.

      Si no coincidimos en gustos es una buena noticia para ti. Nunca nadie me digo que yo "tuviese buen gusto" y yo siempre lo he sabido xD xD.

      Un saludo

      Eliminar
  10. Volviendo al tema del formulario de búsqueda (y te escribo acá para no obligarte a leer correos en el móvil), el hecho de que en wide-screen deje un margen lateral considerable, que la flecha de regreso al inicio ya nos mentaliza para ignorar el lado derecho y que los textos en cajas de código rara vez llegan hasta el borde, nos hacen mucho más tolerables las cabeceras fijas sobre el documento.

    Además, ahora noto una brillante idea que nunca se me había ocurrido: el contenido se va difuminando hacia arriba, y eso nos lleva a empezar a leer siempre un poco más abajo, así que la barra todavía molesta menos. Generalmente yo leo desde el borde superior, y cuando voy por la mitad ya empiezo a levantar el documento (por eso casi nunca me entero de lo que hay abajo).

    Lo que me recuerda un nuevo detalle que estoy encontrando. Al menos en Firefox no se puede usar el desplazamiento por teclado en los artículos. Seguramente es algo para pulir en el mecanismo de transición de la portada al artículo propiamente dicho, y al botón para subir.

    Y hablando de portada; resulta que en algunos navegadores no se ve el fondo oscuro, lo que vuelve casi invisibles a los íconos y texto claro. Debe ser por las "pseudovariables", ASZ no les da soporte, por ejemplo. Y me parece que en móviles tampoco, pero eso te lo van a confirmar quienes naveguen más por teléfono.

    Como ves, nada grave; no es como para pedirte el libro de quejas.

    Gracias. Y de nuevo felicitaciones.

    ResponderEliminar
    Respuestas
    1. Gracias Furoya

      Te había dejado sin respuesta porque estaba con tus observaciones.
      Visto lo visto al final desparece la obligatoriedad del click sobre el header de los artículos.
      El tema los dos puntos claves que causaron su ban es el que apuntas de impedir la navegación por teclado y otro que había observado: cada vez que accedías con un enlace interior o ancla en la dir o publicabas un comentario (que viene a ser lo mismo) allá que se iba el foco: de nuevo tenías que dar click en él para continuar.

      Eso significa que el fondo de la "barra" ha desaparecido.

      Como ahora ya no hay forma de cambiarlo si hay un :checked no me convencía el efecto. Pendiente de que backdrop-filter sea usable ;-)

      Añadí un triste color en el índex para aquellos navs que no pintaban nada al ignorar las var(--n)

      Buen día

      Eliminar
    2. Ni hay que mencionarlo. Las respuestas son buenas para intercambiar opiniones, pero aquí estás trabajando en la nueva plantilla y ésa es la prioridad.

      La portada con paralax era un experimento interesante, aunque necesitaba demasiados ajustes para una página real. Lo que no entiendo es la consecuencia en la desaparición del gradiente de la topbar; se puede poner igual, porque quedaba muy bien.
      No vi el código fuente, pero no debe ser más que un bloque con posición fija y dos elementos para contener el enlace derecho y el formulario izquierdo. El cambio de color degradado no debe ser un inconveniente grave, de última se cambia cuando el documento se desplace 100vh, pero eso también pasa (a medias) al llegar a los comentarios, y no molesta.

      El triste color oscuro al fondo ayuda, mucho.

      No sé si la portada me está gustando más, o ya me estoy acostumbrando.

      Gracias, y un abrazo.

      Eliminar
  11. ¡Qué bien viene un cambio de imagen de vez en cuando!

    Aunque llego algo tarde, voy a compartir mi opinión.
    Sobre el índex, me parece que es una forma muy práctica de poder ver lo más destacado del blog de forma clara. Pero, de primeras, tanto contenido despista un poco al no saber dónde hay que mirar. Para solventar ese aspecto, se podría hacer un poco más ancha la primera columna, ya que la parte más destacable del blog son los últimos artículos.
    Un detalle: cuando iba a pulsar sobre el título del artículo para leerlo... ¡resulta que no hay enlace, sino que está más abajo! Esto me parece un poco incómodo, además de que creo que no aporta nada tener la URL escrita. En su lugar, sería más útil mostrar la fecha del artículo, por ejemplo.

    Vamos con los artículos. El efecto de la cabecera no me convence. Como experimento CSS es muy bonito, pero...
    1. No aparece la scrollbar, da la sensación de que no hay nada más
    2. La flecha y su constante movimiento no dejan claro qué hacer
    3. El hecho de hacer click para ver el contenido de un artículo se asemeja al funcionamiento de una ventana interstitial. Y, además de ser un engorro, a Google no le gusta.
    Resumiendo: mantén la cabecera a pantalla completa, me gusta el diseño, pero deja al scroll actuar de la forma habitual.

    Entrando en el artículo en sí, me sorprende la claridad que contrasta con la oscuridad del índex. El gris claro de la segunda cabecera y la fecha, etiquetas, etc. no pega nada con el fondo oscuro de la primera cabecera y el índex. Por suerte, en el texto del artículo, el fondo negro de los <code> suaviza este contraste.
    Por cierto, la fuente serif queda muy bien. En cambio, las fuentes de símbolos de los links y las citas no se ven correctamente en Chrome Mobile, aunque tampoco es problema, dado que no impide la lectura del texto.

    Sobre la barra superior de los artículos (ya he visto que has hecho algún cambio), me da la sensación de que está algo vacía, quizás se podría rellenar con los mismos iconos de la barra izquierda del índex.

    Bueno, estas son mis sensaciones sobre el nuevo tema, aunque "para gustos se inventaron los colores..."

    Saludos.

    ResponderEliminar
    Respuestas
    1. ¡Qué bueno reencontrarte por aquí, Jorge.

      Gracias por tanta info.

      Sobre el index: creo que lo estáis encontrando mejor de lo que esperaba. Las opiniones recibidas, incluida la tuya, creo que van más en la línea de sensaciones personales que funcionales.
      Por cierto, las imágenes a pie de post (en el index) también son enlaces. Por si no le aciertas al de la url ;-) xD

      La intro de los post cada hora que pasa pasa más de estar at risk a deprecated. Al menos en su click para acceder al cuerpo del post.

      Posíblemente de mantenerla (por eso de que de continuidad del índex) sea sin click y con scroll.

      El símbolo de los links no es "una fuente". Son unicode en codificación CSS: " content: '\29AB';"

      La idea primera es que no hubiese "barra" en los post. Pero como tenía que incluir obligatoriamente el buscador y enlace al home... fue la manera que encontré de conciliar ambas.

      Todo lo anterior no lo veas como un rebatir tu aporte. Es sólo el punto de vista desde este lado.

      Un saludo y gracias.

      P.D.: Por cierto, <atraco a las tres> ¿para cuando tu post de colaboración? </atraco a las tres>
      =P

      Eliminar
    2. Me parece bien conocer tu opinión más detalladamente, y me gustan los pequeños cambios que has ido haciendo.

      <hr>
      ¡Me encantaría hacer un post de colaboración! ¿Lo comentamos por privado en Twitter?

      Eliminar
    3. POR FIN!!!! Jorge xD

      Adelante, te paso también mi correo (¿no lo tienes) por allá.

      Un saludo

      Eliminar
  12. En Chrome y en Safari desde un mac se ve fatal la fuente.

    Mac/Chrome: http://i.imgur.com/OzhHCC4.png
    Mac/Safari: http://i.imgur.com/oYiKBYt.png

    En Firefox lo probé y está bien.

    ResponderEliminar
    Respuestas
    1. Gracias Pzin

      Sí, el tema del renderizado en Mac ya había saltado el aviso aquí (comentarios 6 y 6.1) y por Twitter. Creí que añadiendo alguna declaración para corregir el antialiased y subpixel-antialiased podría minorarlo algo. Veo que no.

      Así que toca ensayar otra vía antes de renunciar a la tipografía.

      Si tú u otros pueden decirme qué párrafo (en OSX y sus navegadores) del siguiente pen se ve mejor quizás pueda mantener la fuente:

      [pen] data-height="473" data-theme-id="299" data-slug-hash="yayGqP" data-default-tab="result" data-user="Kseso" data-embed-version="2" class="codepen"[/pen]

      Eliminar
  13. Ahora en iOS veo que también persiste el problema, aunque algo más leve. Desde el móvil, el primer y tercer párrafo se ven bien, el segundo tiene ese serrado silvestre. xD

    ResponderEliminar
    Respuestas
    1. Gracias Pzin

      Al final decido prescindir de la Scope One Estaban apareciendo demasiados problemas al intentar paliar su delgadez.

      Espero que la elegida ya se vea correctamente en todas (o casi todas) las situaciones.

      Un saludo

      Eliminar
  14. Ah pues, ya casi todos han comentado lo que no me parecía en primer momento jeje, pues si puedo meter mi cucharada, como vi que eliminaste la necesidad del clic en la portada, pues si es por algo estetico para el fin puedes hacer que esta se mantenga estatica, mientras el contenido sube como un seudoparallax pero sin tanta sobrecarga, me explico mejor aquí:

    codepen.io/g3kdigital/pen/bwVpBq

    En cuanto al twit desk, agradecería mucho más espacio entre los limites de cada columna, entre los textos (todo siento que le falta una pizca más de padding) y unas scollbars que combinen mejor con los colores, se que en movil se ve espectacular esta parte, pero en pc se ve fatal (a mi criterio ojo) ya que siento que esos colores tan claros distraen un poco del contenido, pero se que es un cambio que requeriria más de js que de css, cosa que no es objetivo del blog (o quizás si y Furoya, nos salga con alguna maravillosa idea)

    Y a ver si impones la tendencia de los scrollbars para 2017, por cierto veo que aveces combinas colores a lo loco y se que no eres designer, pero sí el tema de colores te interesa, tal vez quieras conocer colourslovers y adobecolor (antes kuler), uno es una comunidad de amantes de colores y patterns, la otra una herramienta para encontrar parejas a tus colores y si ya las conocías, ignora esto ultimo jejeje.

    Saludos.

    ResponderEliminar
    Respuestas
    1. Gracias por tu aportación, g3kdigital.

      La idea del pseudoparallax que apuntas la descarté. Creo que será la misma técnica que la que usé en una vieja demo (On scroll... Salamanca shown)

      ¿Los scrolles y su apariencia?
      Bueno, eso sí que lo tengo claro por dos motivos:
      Nunca he sido muy amigo de alterar los elementos de la UI y a más no creo que haya justificación para sobrecargar todo por una cuestión estética que afecta sólo a algún navegador en algún SO.
      ¿Que no lucen las scrollbars igual en FF de escritorio que Chr en móvil o sistemas táctiles?
      Sí, claro. Pero eso ya lo sabe cada usuario de sus herramientas.

      En este tema creo que con los colores no he sido hasta parco. Quitando algunos detalles menores son tres tonos de negro la base de toto, textos incluidos: --negroO, --negroM, --negroC
      Gracias por las referencias a las páginas. Sí, me son conocidas.
      Y sus paletas son fantásticas (casi todas) pero quizás no tanto para páginas cuyo mayor activo es el contenido textual.
      Como decía Carlos en el comentario nº 3, están muy bien para "Cosas que quedan lindo!"

      Un saludo

      Eliminar

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