Nueva imagen del blog KsesoCss. Una plantilla propia y disponible.

Nuevo artículo en #tras42

Artículo sobre la nueva imagen del blog. Con las tipografías, colores y otra información sobre él.

Si eres de los que visitan estas páginas de vez en cuando, habrás notado la inactividad de esta semana y algún cambio que otro, de ayer para hoy, en el aspecto.
No, no te has equivocado de página (guiño guiño). Sigues estando en mi blog sobre Css.
Y este artículo solamente es para comentar un poco la nueva piel y poder recibir las sugerencias, críticas y avisos de bugs no detectados o pendiente de arreglar.

Aspecto visual

Modelo, que no plagio

Estoy seguro de que no necesitas que diga la página modelo del que este tema es deudor y que ha servido de inspiración: Css-Tricks. Y digo que ha sido modelo o inspiración porque en ningún momento ha sido mi intención hacer un plagio descarado o copia tal cual de ella. No serían formas además de no compartir la aplicación: esto es blogger, aquella no. Él es Chris Coyier y yo Kseso.

Estructura y colores

El modelo de caja implementado es el box-sizing: border-box y todos los tamaños de las cajas están definidos en valores relativos. Principalmente rem´s, algún porcentaje y el resto heredado.

Pendiente implementar alguna regla @media querie para distintos tipos de pantalla y verificar el comportamiento en distintos chismes y resoluciones

En el header he preferido la discreción: quien llega al blog lo hace por sus contenidos, no porque se llame de una forma u otra. El efecto del text-shadow: inset simulado que desaparece al :hover sobre él.

La explicación sobre cómo hacer el menú ya la expliqué en el artículo hexágonos puro Css.

En el cuerpo principal fuera casi todos los efectos Css: suavidad en todo. Así que nada de abusar de efectos css llamativos y ya muy vistos como los border-radius, los box-shadow & text-shadow exagerados y otros tan de moda. Tampoco encontrarás gradientes. Y mucho menos imágenes para logar la apariencia.

Los contenidos del pie de página están sin definir. Es mi idea retirar tanto los tuits sobre "ksesoCss" como la relación de artículos más visitados y sustituirlos por enlaces a páginas afines y de autor. Así que si tienes alguna web que quieras que figure en ella, déjala en un comentario. O si sabes de alguna, también.

Los colores:
Con independencia del gusto de cada uno, he buscado tonos y colores principales que no resulten chillones ni molesten o distraigan a la hora de leer:
#664477 para el background del html y body.
#D5D5D5 para el background de la caja central.
#f9f9f9 en el background de las cajas de contenido.
#472F53 para el background del pie de página.
#32213A en el background de la caja de cierre de página.

En este aspecto no tengo claro si el color de los enlaces (#8AA9B8) y el efecto al :hover tiene el suficiente contraste con el texto. ¿Tú cómo lo ves?.

Tipografías

Las typos utilizadas provienen de Google Fonts. Básicamente son:
Nunito para los encabezados y títulos. EL color #2D4261
Carme para los textos generales. Su color #202020
Anonymous Pro en los códigos y la imprescindible Garamond en itálica para las citas y blockquotes.

Creo que facilitan la lectura. Son "límpias", renderizan sin problemas y están compensadas en su relación ancho/alto.

Font-size

Todos los textos están declarados en rem. Tiene la ventaja frente al valor em que no hay que estar pendiente de la herencia de los ancestros.

Eso sí, he hecho "una pequeña trampa". Principalmente para el huevo de pascua *. Espero no haberme condenado por ello (guiño guiño).

Las recomendaciones de mi abuela

captura de la galería Los códigos Css y Html de la pequeña galería del lateral, en puro css, es obra de Stuart Nicholls en su página CssPlay y en los estilos hay una nota de crédito a él.
El motivo de elegir este tipo (css y estática) es que últimamente cada vez me resultan más molestos los elementos que se mueven e incomprensible que quienes usan los omnipresentes carruseles con transiciones automáticas no pongan un freno de mano bien visible.

La K

la letra K identificativa del blogLa letra "K" que utilizo en diversas partes del blog como al pie de los artículos, como imagen sustitutoria en la portada en los artículos que no contienen imágenes, e incluso como avatar en tuitter, proviene de una creación de neusblog.com.

Bugs, fallos, errores y sugerencias

Como siempre ocurre, habrá unas cuantas cosas que fallen. Espero ir descubriéndolas con tu ayuda. Así que te agradecería que si descubres alguno me lo digas en un comentario. Así de paso podré probar el comportamiento de ese apartado.
Lo mismo si tienes alguna sugerencia para mejorar o corregir. Serán bienvenidas todas las opiniones puntos de vista sobre la nueva apariencia.

Licencias

Para todos excepto medios AEDE y promotores / defensores del canon AEDE

No la hay, o mejor dicho, siéntete libre de usar, modificar, mejorar, empeorar, adaptar o jugar todo lo que quieras o necesites con lo que encuentres en este blog.

Eso sí, la misma libertad que tienes debes asumir para hacerte responsable de todo lo derivado de su uso.

Todo lo anterior sólo rige para mis realizaciones. Con las de terceros, ya sean enlazadas o transcritas aquí, deberás cerciorarte tú mismo del tipo de licencia que tengan.

Pero ten presente que un pequeño reconocimiento a todo el mundo halaga y dice mucho y bueno de quien se toma la pequeña molestia de hacerlo.
Pero si necesitas una licencia, ¿qué te parece la BEERWARE?

Pero si lo que haces es un copy&paste de un artículo, no seas tan descarado y deja bien claro su autor. ¿Viste cómo otorgo yo los créditos y autorías? Pues eso.

Y por supuesto, los estilos de esta plantilla están bajo la misma licencia que el blog: BEERWARE. Y si usas blogger y quieres experimentar con ellos eres libre de jugar cuanto gustes.

Medios AEDE y promotores / defensores del canon AEDE

Para todos los medios pertenecientes a AEDE y con motivo del Canon AEDE impuesto por el Gobierno de España (formado por miembros del PP) y en el ejercicio de mis derechos queda totalmente prohibido la cita o uso (por mínimo que sea) de cualquier contenido de este blog. Ya sean parte de los artículos, de los códigos o ideas en él recogidos.

Así mismo, y pese a todo lo que pretenda imponer la ley del Canon AEDE, prohíbo expresamente que cualquier tercero actúe y pretenda ejercer en mi nombre cualquier acción, en especial cobrar nada a nadie ni a ningún medio.

Y si cualquier parte de esta mi declaración choca o entra en conflicto con la aberrante ley de la tasa que los miembros del PP en el Gobierno de España han parido me declaro insumiso respecto a esos aspectos y reclamo mi derecho a ejercer la objeción de conciencia y la desobediencia civil.

Comparte

Este blog no usa "botones sociales" para que compartas su contenido por respeto a tu privacidad y mejora de su funcionamiento. Además, no los necesitas, ¿o sí?

Publicado el por y Archivado en | | | | | | |

Y para terminar, como agradecimiento a tu visita, déjame sugerirte que te suscribas al blog. Sólo recibirás los nuevos artículos.

También puedes ver alguno de estos artículos que tienen relación con el que acabas de leer:

NUEVO: Puedes insertar pens de Codepen en tu comentario

4 comentarios :

  1. Hola
    Simplemente para comentarte que en IE9 el header se ve mal.
    El titulo se ve muy chico y se superpone con el subtitulo.
    Además el menú queda cortado y solo se ven las opciones Inicio-Contacto-twitter.

    Saludos

    ResponderEliminar
  2. Gracias Cristian por el aviso.

    Todos los tamaños de las tipografías (y algo más) están definidos en REM, y por alguna razón, que debo mirar, el IE9 no lo está tomando. Y como el h1 es el que da tamaño al header, los items del menú quedan escondidos.

    Pero con calma xD que lo importante del blog no es cómo se llama o los enlaces a las redes. Y como el cuerpo de los artículos se ve y lee sin problemas... ;-)

    Por cierto, ¿curaste el sarpullido del ie o usas guantes? Nah... es broma.

    Un saludo

    ResponderEliminar
  3. Uso guantes Kseso, jajaja.
    Hasta hace poco en el trabajo tenía que usar IE8, hoy la gente de redes ha actualizado a IE9.
    Por suerte existe Chrome, que no necesita permiso de administrador para ser instalado, así que he logrado esquivarlo.
    De todas formas, para mi hobbie ("diseño web" o mejor dicho "algo web"), en casa tengo instalado las últimas versiones de los principales navegadores y de ahí que al verificar como funciona tu plantilla en los mismos (la cual pienso, descaradamente plagiar) he visto lo que te he comentado antes.

    Saludos

    ResponderEliminar
  4. Bueno, Cristian, ya que estás pensando en adaptarla le eché un vistazo :-)

    El problema con ie9 está en que ahí usaba la declaración acortada "Font: 8rem/1 nunito;"
    Al desglosarla ya reconoce los valores.

    No he mirado el porqué.

    ResponderEliminar