tag:blogger.com,1999:blog-39267278271989081022026-02-17T09:59:49.681+01:00Css a fondo. Especificaciones W3c en español. Tutoriales, demos y ejemplos. Información contrastada y artículos originales.Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.comBlogger609125tag:blogger.com,1999:blog-3926727827198908102.post-20416688027011909172018-05-17T11:15:00.000+02:002018-05-17T12:17:16.595+02:00<h2>Filtros y modos de fusión CSS: las propiedades filter, backdrop-filter, background-blend-mode y mix-blend-mode</h2> <p>La llegada de los filtros y modos de fusión CSS supuso el logro de un viejo sueño: poder alterar los colores y apariencia de los elementos manteniendo inalterado el original. Esto es, aplicar con una línea de código una serie de efectos hasta entonces reservados a los programas de edición de imágenes y al mismo tiempo hacer posible que el original se conserve tal cual.</p> <p>Cambiamos cómo se muestra al visitante un elemento (su apariencia) con CSS pero no comprometemos el original que se preserva en su estado primigenio.</p> <p>Esto tiene una serie de ventajas innegables. Que resumidas al mínimo serían:</p> <ol> <li>Al conservarse el original se evitan tener multitud de variaciones/copias y el peligro de perderlo por despiste al guardar una modificación. </li> <li>No es necesario disponer de un programa de edición de imágenes, conocer su manejo y tener que recurrir a él cada vez que se necesite un efecto distinto. Tú escribes una declaración CSS y el navegador se encarga del resto</li> <li>Permite cambiar los efectos &quot;en vivo, al vuelo y bajo demanda&quot; teniendo una sola copia del elemento. </li> </ol> <h2>Sujetos afectados por filter y blend-mode </h2> <p>Los filtros y modos de fusión CSS además de ser propiedades diferentes y aplicar una serie de efectos distintos se diferencian en otro aspecto: a qué partes del elemento afectan. O dicho de otra forma: sobre qué actúan.</p> <a href="https://escss.blogspot.com/2016/01/filter-blen-mode-css-juntos.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com5tag:blogger.com,1999:blog-3926727827198908102.post-41511699262329076092018-02-25T16:21:00.000+01:002018-02-25T17:13:24.770+01:00 <p class='autor-post'>Artículo publicado originalmente el 24/02/1013. Actualizado en Febrero de 2015, Febrero de 2017 y Febrero de 2018</p> <figure> <img alt='Margin Collapsed: Márgenes desaparecidos o que empujan a los ancestros' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lbHh6gyHkbUD3Cjdns2o6mPD4PfwmTzDJx3gDu6Dc9nMXiVY4rbImsPQo2nU5SDpfZKhkE6Wtgv_YQaI1-JUwPq3ya0YrrNz5WR6plcw28-0bDhS22iFECnpnH_FqSPyMvO5QCqo3s0/s800/margin-collapse.jpg"> </figure> <figure class="derecha"> <img alt="Collapsed margins: Márgenes que empujan al padre y no al elemento que lo tiene declarado" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWE-ivmr-nW0MebtC0-8E8LcGbAEv6GYBFYCBAQ9FVd2DS2ZGUFn_CVukO6s3nnyPcDJk_csNSrPh8z7xfVdz93kdyQh2xZX4KD_yu7VXGxPUFLQyfO-fecVRfEpYGVxQ-v-zzogO3WE/s1600/collapse-marging.jpg"> <figcaption>Collapsed margins</figcaption> </figure> <p>¿Te ha pasado? Tienes un contenedor principal y dentro tu h1 con un margen superior. Vas al navegador y te encuentras que el background del body deja un hueco en la parte superior. Descubres que el margen del h1 en vez de afectarle a él separándolo de su contenedor afecta a un abuelo suyo (el body).</p> <p>Esta es una situación que suele desquiciar un poco a quien se está iniciando en Css. Porque por más que pones todos los márgenes habidos y por haber a cero, el espacio continúa ahí.</p> <p>Por si has tenido la suerte de no saber de qué hablo, mira <a href="http://jsfiddle.net/kseso/wK2mZ/">el ejemplo siguiente</a></p> <a href="https://escss.blogspot.com/2015/02/margin-collapsed-margenes-cerrados.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com13tag:blogger.com,1999:blog-3926727827198908102.post-62883612477821003232018-02-16T13:02:00.001+01:002025-05-09T20:08:24.635+02:00<figure> <img alt="Elementos Details y Summary: función toggle nativa de Html5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPEz_OAsLLxWA-Gdu1lxDHcQ-zllkLaYiCoxcks-qhjxX_ym3FnNpH5v4ixjtcLuPdz2FadIn-EaYJ7lPlg4f4C1e2EPueAPCOqGKCBy4upxVFxJCxN28_Nt7b0SZJwRj4BAWZAN3T5QY/s900/summary-details.jpg"> </figure> <p class='autor-post'>Artículo publicado originalmente en Enero de 2016. Actualizado en Febrero de 2018 con información actual y demos.</p> <figure class='izquierda'> <details style='text-align: left'> <summary><b>ÍNDICE DE CONTENIDO</b></summary> <ol> <li><a href='#Marcado-html'>Marcado html</a></li> <li><a href='#Soporte-navegadores'>Soporte navegadores</a></li> <li><a href='#Details-details'>Details en Details</a></li> <li><a href='#CSS-general'>CSS general</a></li> <li><a href='#CSS-desplegado'>CSS desplegado</a></li> <li><a href='#animacion'>Animación apertura y cierre</a></li> <li><a href='#demo-todo'>Todo Junto en una demo</a></li> <li><a href='#abrir-alterado'>Alterando el despliegue</a></li> <li><a href='#enlaces-interes'>Enlaces de interés</a></li> </ol> </details> </figure> <p>HTML5 vino, bueno, está en camino, con multitud de elementos que facilitan la interacción del usuario con los contenidos de la página. Y además lo hace de forma nativa y sencilla: el desarrollador sólo tiene que añadir esos elementos y es el navegador quien implementa los recursos necesarios para su correcto funcionamiento.</p> <p>Uno de estos nuevos elementos interactivos es <code>details</code> y su hijo <code>summary</code></p> <p>Básicamente lo que hace es lo mismo que la función <q>toggle</q>: el elemento <code>details</code> de entrada oculta todo su contenido excepto lo incluido en <code>summary</code> y sólo cuando el usuario clica sobre éste último los muestra. El <q>índice de contenidos</q> de este artículo está construido en base a estos elementos.</p> <p>Podríamos decir que su comportamiento es el del típico elemento que por defecto se muestra colapsado y sólo a demanda del visitante se expande para mostrar su contenido. Como el ejemplo siguiente</p> <a href="https://escss.blogspot.com/2016/01/details-summary-toggle-nativo.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com6tag:blogger.com,1999:blog-3926727827198908102.post-57179122734414187252018-02-14T17:27:00.000+01:002018-10-06T15:25:07.679+02:00 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0igYD2VzXy3y2od7Wb9RZ_z8JZjbZIZ6wMe9gMSZ5eqZXKzKja3W_SYOte1brizCQ_FGcEkM3eo_aH6M0f3EAEOgT6wynvNQQ7mcNF9-hPk2vRrYYlW5cAfCuC_RG4aQuWd1mv3rj_Ts/s800/lazy-load.jpg' alt='CSS scroll control'> <p>Al hablar de algún tipo de control del scroll mediante CSS hay que tener presente los dos campos o aspectos del scroll sobre los que se puede actuar: </p> <ol> <li>Su estética.</li> <li>Su funcionamiento.</li> </ol> <p>Sobre ellos ya han aparecido <a href='https://escss.blogspot.com/search/label/scroll'>unos cuantos artículos</a> en este blog. Siendo el viejo <a href='https://escss.blogspot.com/2012/09/estilos-scroll-personalizado.html'>Custom scrollbars for Chrome, Firefox & IE</a> uno de los más consultados.</p> <p>Y pese a que modificar la estética de las barras de scroll quizás haya sido más demandado (hasta la eclosión del efecto parallax) es un aspecto que nunca ha sido abordado (que yo recuerde) en ningún documento de los grupos de trabajo de CSS del W3C. Y eso es normal. Antes debería existir un consenso o acuerdo entre todos los equipos de desarrolladores de navegadores sobre el cómo construirlas.</p> <p><del>Arto improbable que suceda esa normalización a estas alturas.</del> Septiembre de 2018: ha sido publicado el nuevo documento del W3c <a href='#oct2018'>CSS Scrollbars Module Level 1</a> que aborda esta cuestión.</p> <p>No obstante, sí que existen propiedades privativas en algunos navegadores que permiten modificar la apariencia de las scrollbars. Y <a href='https://escss.blogspot.com/2012/09/estilos-scroll-personalizado.html'>a falta de CSS siempre nos quedará recurrir a Javascript</a>.</p> <a href="https://escss.blogspot.com/2017/01/css-scroll-control.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2tag:blogger.com,1999:blog-3926727827198908102.post-30852453021477567082018-02-07T13:06:00.000+01:002018-02-07T14:09:16.636+01:00<p class='autor-post'>Artículo publicado originalmente <a href='https://twitter.com/Kseso/status/835087399285895172'>en Febrero de 2017</a> . Actualizado un año después, Febrero de 2018, con info y artículos más concretos en cuanto a su uso y cómo hacerlo. También en cuanto a su soporte en el momento de la actualización.</p> <p>El relativo nuevo concepto <q>variable fonts</q> <b>no</b> hace referencia al tamaño de los textos que suele encomendarse a la propiedad CSS <code>font-size</code>. Para ello hace ya tiempo que se usan expresiones del tipo <q>responsive typography</q> [<a href='https://www.google.es/search?q=responsive+typography'>1</a>] o similares.</p> <p>La diferencia sustancial está que mientras el <q>responsive typography</q> se centra en el tamaño de los textos en cuanto al tamaño de los mismos (<code>font-size</code>), la idea tras las <q>variable fonts</q> es actuar sobre características de cada glifo o carácter de la tipografía usada sin que el espacio ocupado por cada uno de los glifos apenas varíe y que todas las posibles variaciones de la fuente estén en el mismo archivo.</p> <p>Esto quiere decir que lo primero para poder usar una tipografía <q>variable</q> es que haya sido diseñada como tal y que su archivo (&#39;nombre.ext&#39;) contenga las nuevas características. Por lo tanto, con viejas tipografías no será posible a no ser que sean rediseñadas.</p> <p>Las características de las <q>variable fonts</q> básicamente serían no sólo las que actualmente son controladas por CSS mediante los descriptores tradicionales:</p> <a href="https://escss.blogspot.com/2017/02/css-variable-fonts-lista-lecturas.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3tag:blogger.com,1999:blog-3926727827198908102.post-80570195150178185502018-01-30T13:33:00.000+01:002018-02-12T13:43:39.203+01:00<figure> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh782KcRh3gn4cjvNLaUEiyoo-jooP0IDFM-u2IpbfG-CL1QLlq-UGM9lTIshQd6y79qfrOAv_3Iy0-p56Lel72hkIgGh4H3iSg2_vGI3mMZY5kcgyo60AJWtT76CJktFDC9CV6QJPzrfw/s1200/css-houdini.jpg" data-original-width="1200" data-original-height="518"> </figure> <p>Cualquier desarrollo o novedad en CSS siempre se ha encontrado con un <i>ligero</i> problemilla para que su uso se extienda y generalice: <b>su desarrollo e inclusión (soporte) en el core del navegador</b>. De todos o al menos de los principales por cuota de mercado.</p> <p>Y que eso ocurra supone en casi todas las novedades largos tiempos de desarrollo y espera. En el mejor de los casos. Que hay muchas <i>novedades</i> que mueren en el camino.</p> <a href="https://escss.blogspot.com/2018/01/css-houdini-preludio-en-es.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-66365036635457311942018-01-03T16:00:00.000+01:002018-01-03T16:05:35.830+01:00<p>El CSSWG publicó varias actualizaciones importantes el año pasado [2017], no todas fueron anunciadas, así que aquí están las publicaciones más significativas, en orden cronológico inverso:</p> <a href="https://escss.blogspot.com/2018/01/lactualizaciones-documentos-CSS-2017.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1tag:blogger.com,1999:blog-3926727827198908102.post-76742942443120151062017-10-15T16:54:00.000+02:002017-10-16T12:05:35.379+02:00<p class='autor-post'> Creo que, de todos los artículos que he ido publicando en este blog durante su existencia, este es el más indicado para que quede encabezando el índex durante el tiempo que pueda durar el estado de &#39;standby&#39; en el que he decidido colocar el blg.<br> <u>Gracias sinceras</u> a quienes durante estos años habéis andado este camino junto a mi.</p> <figure> <img alt='Guía para enfrentarse a las guías: Norma Consenso Método Herramienta' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScMTEFArJx9IA-gPkpJWhAow6bFgu42FwVj1hlvOH3T1NWilgoUJdw7P6YH0uj8YXfXUz2eczjz7hD2dmQXKXBigCLMlJVQUUnEHnh2xV91ds2U8vkei0klx6YB0HoJCjgMayKf-yDy8/s900/norma-consenso.jpg"> </figure> <p>Son muchas las páginas y artículos dedicados a &quot;enseñar&quot; o divulgar el cómo hacer bien cualquier aspecto de esto de hacer web. </p> <p>Todas aportan. Y de todas algo útil se pueda sacar. Da lo mismo que se centren en una parcela más o menos concreta y precisa o que su disertación sea de lo más generalista y quieran abarcar todo lo habido y por haber.</p> <p>También es indiferente el tema sobre el que versen. Da lo mismo que sea sobre lenguajes de marcado como de programación, diseño... o cualquier otro. </p> <p>Pero si hay algo a lo que tú estás obligado al enfrentarte a cualquier &quot;guía&quot; es ser capaz de distinguir aspectos tan básicos como los enumerados en el título de este artículo. N.E.: el título primigenio fue <q>Guía para enfrentarse a las guías: Norma, consenso, método y herramienta</q></p> <a href="https://escss.blogspot.com/2014/08/guia-para-enfrentar-guias.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com4tag:blogger.com,1999:blog-3926727827198908102.post-14598538546204200712017-09-25T13:05:00.000+02:002017-09-25T13:18:35.805+02:00<figure> <img alt='CSS Grid Layout Panel' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FuIhh0W1hY3puSkly3hehBCPtU0FYszXVnYcnfFHnhqTcMns7Zfj5iwtW4LpW3pHF-PgECA3EXOH5hDY-Vm00_m4A1jHrwFpxai8RTHFlMgJMEjvmU1_nK5i5-3a8jrRL15_MQjRLvc/s1200/hexagon-v3.png"> </figure> <p>Una vuelta de tuerca a las dos demos anteriores de construcción y colocación de hexágonos con el uso de CSS Grid Layout. Las dos versiones anteriores las pueden ver en el artículo <a href='https://escss.blogspot.com/2017/04/auto-hexagonal-css-grid-layout.html'>Auto Hexagonal CSS Grid Layout & CSS custom properties</a></p> <p>Las diferencias más notorias de éste frente a los anteriores no son tantas aunque sí implican una forma diferente de planteamiento tanto en el tamaño de cada hexágono como en la base para su ubicación con el fin de formar el panal.</p> <a href="https://escss.blogspot.com/2017/04/css-grid-layout-panel.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-85444884876778343452017-09-24T13:51:00.000+02:002017-09-24T15:03:04.266+02:00 <figure> <img alt='Auto Hexagonal CSS Grid Layout & CSS custom properties' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJiN_Kz6KTBrIGvAZUB1TBd5R0ch8EqiD0tH1RhCl0VFFdou9WO6FxW98v_qJmGSM8JMkRSJGVQTPSvtQVZhyhSnhv2AiikLdto30jQAgtepMmBc8vDMdsGd1TAw3peZqRlJymD_QmiB4/s1200/hexa-grid.png"> </figure> <p>Todo lo que sigue, demo incluida, es sólo un mero divertimento. Un juego para ver la potencia de CSS sin necesidad de recurrir a otros lenguajes o herramientas para conseguir algo algo tan visto como un panal de ricos hexágonos.</p> <p>El auto del título se refiere a que todo está en función del valor de la <q>CSS custom property</q> <code>--Nhexa:</code> elegir cuántos hexágonos se colocan en cada fila.</p> <p>El resto todo cambia junto a ella, pues es la base para otras <q>custom properties</q>.</p> <a href="https://escss.blogspot.com/2017/04/auto-hexagonal-css-grid-layout.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com4tag:blogger.com,1999:blog-3926727827198908102.post-24229757153846623142017-09-17T20:07:00.000+02:002017-09-17T13:38:27.727+02:00<figure> <img alt='El filtro SVG feColorMatrix: cómo crear su matriz para obtener los tonos deseados' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhq9bIRLBiCt__x7yxcF3oAFd40oAxiow0duEogOxEkEGU4I0GaHVzT4U3bB-mmTucLOZ34hYBf2bJCVDlP9IeaWWTl4uhxp8BxmoJDZvNZbKE-N7GNY-aaUH6UV6BlRX1obVYl7MnW8/s800/matriz-color.jpg"> </figure> <p>Si has seguido los artículos que he dedicado a los filtros, especialmente el dedicado a los <a href="https://escss.blogspot.com/2014/10/filtros-css-SVG-todos-navegadores.html">filtros equivalentes de SVG con los de Css que usan una palabra clave</a> habrás observado que algunos filtros nativos de SVG usan lo que se conoce como matriz de color. </p> <p>Son los filtros conocidos como <a href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement"><quote>feColorMatrix</quote></a> por ser el elemento del SVG en el que se declara la matriz de color a usar por el filto. </p> <p>La potencia y posibilidades que ofrecen los filtros SVG <code>feColorMatrix</code> basados en una matriz de color son bestiales. Pero obtener el efecto deseado primero hay que conocer el significado de cada valor de la matriz y cómo funciona. </p> <a href="https://escss.blogspot.com/2016/07/filtro-svg-fecolormatrix-y-su-matriz.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-9148395048555702182017-09-15T17:49:00.000+02:002017-09-15T17:49:18.614+02:00<figure> <img alt='Elementos recortados y sombras: clip-path + box-shadow' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipxqIJ_kcXYKZXy4x2r9-VTCSkHOFtvZKimVB3ykc3h9FrA85y2QAwTPMJ02pD6zoUdjzB2pXSpQH4kMYB9o3gOW3itFNy1cXKX40jzV8eAPwtbcEXQjEQKCedvqE41TdjsGzsm9t59x4/s1300/chip-path-shadow.png" data-original-width="1314" data-original-height="604"> </figure> <p>Al declarar la propiedad <code>clip-path</code> [ver <a href='https://escss.blogspot.com.es/2013/04/propiedades-clip-clippath.html'>recortes CSS</a>] a un elemento se fuerza a que el sobrante (lo que queda excluido del polígono formado por los puntos indicados en su valor) no se muestre y tampoco sea accesible.</p> <p>Es su razón de ser y lo que la hace tan <q>jugable</q>. Y el hecho de que las partes recortadas queden inaccesibles (una suerte de <code>display: none</code>) evita también que el usuario no pueda interactuar con esas partes del elemento [ver <a href='https://escss.blogspot.com.es/2015/06/propiedad-css-clip-path-animada.html'>las demos de este post</a>]</p> <p>Sin embargo hay situaciones que esto se vuelve en contra. Como por ejemplo el mostrar parte del outline o de la sombra del elemento.</p> <a href="https://escss.blogspot.com/2017/09/clip-path-box-shadow.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-76405625518065177412017-09-14T10:11:00.000+02:002017-09-14T14:11:36.885+02:00<figure> <img alt='Textos truncados con Css' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfrA_zh3ws9oUdRYpPfHYpByyyJt20KeACZmfpqZ0gyRbyYFFcPbwXdEi6YkiHKd598Q6A-qLvw8eb194kAiFrLhmNKmoqJK4J59dtBE9RCR1YmhJT_NRENz_KJ_T9yruKHHCnjvxmEkk/s800/elipsis-.jpg"> </figure> <p>Para Css todos los elementos del documento al que aplica generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. Así es desde una simple letra en medio de la página hasta el <q>viewport</q> en el que se representa.</p> <p>Lógicamente las particularidades de cada caja varían en función del tipo de elemento de que se trate así como también las propiedades Css que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.</p> <p>Esta concepción es la base de Css y se conoce como <a href="https://escss.blogspot.com/2012/10/los-3-modelos-de-caja-css.html">el modelo de caja o Css box-model</a>.</p> <p>Este modelo también es de aplicación a los elementos textuales. Así, cada vez que escribes un texto, lo que estás haciendo, para css, es poner unas cajas anónimas al lado de otras: </p> <code data-lenguaje='Html'> █ ⌷ ☐ ⌷ ⌷ ☐ ⌷ ☐ ⌷ ☐ ⌷ ☐ </code> <a href="https://escss.blogspot.com/2015/11/texto-truncado-CSS.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2tag:blogger.com,1999:blog-3926727827198908102.post-66042903884302393932017-09-13T14:06:00.000+02:002017-09-14T15:13:52.482+02:00<p>Hace aproximadamente un mes que cumpliendo con la tradición cambié la piel al blog a la que ahora (Septiembre 2017) luce: el tema <q>#maCSSonry layout</q>. Y en este mes los usuarios asiduos del blog habéis ido sufriendo el pulido del mismo día a día. <q>Refactoringo Refactorización</q> lo llaman por ahi los pros ;-)</p> <p>Habrá a quienes haya molestado esta forma de proceder, mis disculpas. Pues lo que un día era al siguiente o ya no estaba o había cambiado por completo.</p> <p>Quizás alguno, mínimos, hayan abierto el inspector de códigos para ver el qué y el cómo de algún detalle.</p> <p>Pues para los curiosos va esta entrada: algunos detalles (códigos e ideas) que hacen posible la estética y funcionamiento de la plantilla <q>maCSSonry layout</q> actual. El <code>CSS</code>, el <code>HTML</code> nativo de Blogger y <code>Javascript</code>.</p> <a href="https://escss.blogspot.com/2017/09/secretos-plantilla-blogger-macssonry.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-6805675286047684252017-09-10T21:08:00.001+02:002017-09-10T21:09:24.614+02:00<figure> <img alt='Embotado Blogger. Atorado y atollado' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVC5RkJYJRpDdOkUZNfVQEVIET6uKejnakvjJKlBGOGoSOiEGjSRCeobnIupcOZIYUCD4PRGIgfXy5WG_KpzZ9-HDlSq4Cal1G1aF_1O0EmwMiuOzUUpiVI8AHPS_EeqAf4VFky8d_ZT0/s1024/atorado-b.jpg" data-original-width="1024" data-original-height="517"> </figure> <p class='autor-post info'> <b>EMBOTAR:</b> <br> <u>DRAE</u><br> Hacer menos activo y eficaz algo.<br> <u>Diccionario de Autoridades</u><br> Por analogía vale enervar, debilitar y hacer menos activa, eficaz y poderosa alguna cosa.<br> <b>ATORADO</b>: <br> estancado, encallado, parado... y también atragantado.</p> <p><b>Blogger</b> es un veterano CMS y se nota su veteranía. Bien es cierto que cada poco tiempo introduce novedades significativas, como el paso al protocolo <code>HTTPS</code> y otras más de cara a la galería, como las nuevas plantillas.</p> <p>Casi siempre los cambios van enfocados a mejorar la parte que el usuario (visitante) percibe y recibe. Cambios que son de agradecer y en algunas ocasiones celebrados por largamente esperados. Como los nuevos temas nativos de Blogger.</p> <a href="https://escss.blogspot.com/2017/09/embotado-blogger.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-84667784352200789242017-09-08T12:25:00.000+02:002017-09-08T13:14:09.583+02:00<figure> <img alt="Nada por aquí, nada por allá... 13 maneras de desaparecer con CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUyKMou2TQ7uHXq_VKTepMqbzPibfiEDHflfb9Rkszkhfof4yMOC14EdpLvKFfUYRDua4nT9A8jcHRNM1o-HL2CLZ8rPLi_rUkJoLediXYtUhZCrjtkwMC2JozyTZF4LnPF9dnZMECMU/s1600/desaparecer-css.jpg"> </figure> <p>¿Que tienes un elemento en el html y quieres hacerlo desaparecer cual mago magoso? Nada más sencillo. Te pones la capa de invisibilidad de CSS, das unos pases con la varita mágica y ¡oh sorpresa!... ya no está.</p> <p>Pero algo tan sencillo no tiene una forma única de lograrse. Y dependiendo de la vía o propiedad que uses tendrá unos efectos u otros, tanto sobre el propio elemento como sobre el resto de ellos posteriores a él.</p> <p>Y de eso va el post de hoy. De ver diferentes maneras [<quote>ampliado: de 8 a <del>10</del> no, 14</quote>] de hacer desaparecer elementos con CSS.</p> <a href="https://escss.blogspot.com/2016/12/desparecer-con-css.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com17tag:blogger.com,1999:blog-3926727827198908102.post-75522084600067309032017-09-07T18:12:00.000+02:002017-09-07T18:54:21.430+02:00<figure> <img alt='Alternativa pure CSS al hamburger menú' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOi9wecoEL662XMVsGniD5V2oEcq4wvcf1umZqec5giGlKFoqDFbrDA5b5Gs0xaqzosL6PTsarahRB5NbR98loh6CtbOffdY-C2kZzAepfRqVOU4X07ANBu_AgsQYoM_FJVUEDRj3koNQ/s900/hamburger-1.jpg"> </figure> <p>Los menús de múltiples items de primer nivel siempre han supuesto un pequeño desafío a poco que su número de elementos crezca.</p> <p>Tradicionalmente esto no solía suponer mayor problema que no impedir que se formase una segunda línea para mostrar los que no tenían cabida en la primera. </p> <p>Esto fue así hasta la llegada de los aparatos de reducidas dimensiones. A pocos que sean en número, debido a que hay que ser generosos en su tamaño para evitar pulsaciones no deseadas sobre el elemento equivocado, cubrirán la práctica totalidad del viewport cargado en primer lugar. Ni práctico ni estético. </p> <h2>Hamburger menu: inconvenientes</h2> <p>Una de las soluciones propuestas que más éxito ha tenido para lidiar con esta cuestión es el conocido como <q>hamburger menu</q>. </p> <p>Pero el concepto mismo y presentación del <q>hamburger menu</q> no ha dejado de tener sus detractores y críticas desde antes, incluso, de que se extendiese esta denominación. </p> <a href="https://escss.blogspot.com/2016/04/alternativa-pure-css-hamburger-menu.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2tag:blogger.com,1999:blog-3926727827198908102.post-91501250544002956462017-09-03T18:09:00.000+02:002017-09-03T21:23:14.154+02:00<p>En el espacio CSS, con toda su formulación y definiciones que conforman su corpus de especificaciones (W3C Recommendations) y sus propuestas en discusión, hay una parte sin la cual todo sería un montón de literatura inútil:<br> <strong>Es el selector CSS</strong> </p> <blockquote>El selector CSS es el nexo de unión entre la hoja de estilos y los documentos a los que se aplique dicha hoja. Ya sean (x)HTML, XLM, SVG... y con independencia del medio en que que se muestre (media type). </blockquote> <p>Del conocimiento y buen manejo que se haga del selector CSS dependerá la eficiencia de la hoja de estilos y en muchos casos el poder lograr lo deseado sin necesidad de recurrir a otros lenguajes. </p> <p>Un detalle más que significativo de su importancia del selector en CSS lo da el hecho de que hemos pasado de tener unos 20 selectores en CSS2 a más de 70 en el último documento en discusión (<a href="http://dev.w3.org/csswg/selectors4/">selectores CSS level 4</a>).</p> <a href="https://escss.blogspot.com/2016/09/selectores-css-guia-a-fondo.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com8tag:blogger.com,1999:blog-3926727827198908102.post-12736844890524269452017-08-28T10:45:00.000+02:002017-08-30T10:36:00.514+02:00<figure> <img alt='formulario antes de los comentarios' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QB6H4xsJfzZMxPdeFAsCW1IPX8xx-E7LFbIuzW4h_kfVKX1aV7IxbsjEjnKTAHViRf4lNljnbSpaD1CGhs5n_vC9aO0McQEszxFVl5bsBuhqD1fDzLBdElmKgA8UZmhYR_3xvDHKBcU/s1150/comment-box-after-comments.png" data-original-width="1164" data-original-height="660"> </figure> <h2>Y si hay muchos... también después de ellos</h2> <p>En el cambio de tema del blog de este año, <a href='https://escss.blogspot.com.es/2017/08/nuevo-look-escss-theme-2018.html'> EsCSS theme 2018 ~ maCSSornry layout</a>, la parte de los comentarios apenas si la he tocado. Y tampoco es cuestión de conformarse así como así.</p> <p>Por lo tanto hoy decidí retomar una vieja petición de algún usuario del blog referente a la colocación del formulario de los comentarios, porque comentaba y con razón que se hace un tanto tedioso bajar hasta el último para añadir uno más a pocos que haya.</p> <p>Y realmente hoy por hoy es una cuestión de lo más sencilla, al menos en mi plantilla, colocar el formulario de comentarios de Blogger antes de los comentarios.</p> <p>Con la ventaja que no hace falta meterse en el código <code>HTML</code> de la plantilla. Podemos recurrir a <code>CSS</code> para lograrlo.</p> <a href="https://escss.blogspot.com/2017/08/blogger-formulario-antes-comentarios-.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com8tag:blogger.com,1999:blog-3926727827198908102.post-67933060161958802962017-08-24T13:53:00.000+02:002017-08-24T14:09:01.682+02:00<p>Los problemas asociados al uso, o mejor dicho, la carga de <q>web fonts</q> son conocidos desde <a href='https://escss.blogspot.com.es/2012/05/font-face-y-sus-problemas-guia-de-uso-y.html#que-es'>el mismo momento que nació la regla</a> <code>@font-face</code> de la mano de Microsoft allá por 1998 en Internet Explorer 4.</p> <p>Los problemas de bloqueo, el <q>Flash of Invisible Text</q> (FOIT) o el <q>Flash of Unstyled Text</q> (FOUT), y el <a href='https://escss.blogspot.com.es/2013/03/Repaint-Reflow-diferencia.html'>repain y reflow</a> que perturban la composición de la página siempre han sido motivo de preocupación y de múltiples propuestas para paliarlos.</p> <p>En el artículo <a href='https://escss.blogspot.com.es/2015/02/arrieros-font-face-fout-foit.html'>Bálsamos traemos para @font-face: render, FOIT, font loading...</a> [10/2015] recogía unas cuantas de estas solucciones y algo más.</p> <a href="https://escss.blogspot.com/2017/08/kseso-webfont-loader.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-80815368841618219462017-08-18T22:09:00.000+02:002017-08-18T22:54:58.929+02:00<figure class='hide'> <img alt='CSS filters. ¡Hasta el borde y más allá!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFNTsrFXaLP7qOXLznMRImdx4zoLhREPQKMnNFoI1ZAew4CTU6yRH3Cdywe7McAgqhbQeD7BkiVUDaXBfoLFpyfSbrSLOevvTvsSmboY6NL6_tko-rNuqH_Ey4mVsxLbzoeTnIF9-jIU/s857/filter-extendido-border.png" data-original-width="857" data-original-height="662"> </figure> <p>Un artículo breve sobre dos efectos relacionados con el uso conjunto de propiedades dispares como son <code>outline-offset</code> junto a <code>backdrop-filter</code> y <code>clip-path</code> con <code>box-shadow</code>. </p> <p>Antes de ir a ello y por si acaso no conoces alguna de ellas, aquí algún post que otro que le he dedicado en el blog: </p> <ul> <li><a href='https://escss.blogspot.com/2012/08/outline-offset.html'>Las propiedades Css outline y outline-offset a fondo</a></li> <li><a href='https://escss.blogspot.com/2016/01/filter-blen-mode-css-juntos.html'>CSS filters & blend modes: diferencias, semejanzas y uso conjunto</a></li> <li><a href='https://escss.blogspot.com/2015/06/propiedad-css-clip-path-animada.html'>Propiedad Css Clip-path y cómo animarla</a></li> <li><a href='https://escss.blogspot.com/2012/03/box-shadow-css-la-sombra-fondo.html'>Box-shadow Css: La sombra a fondo y diferencias con el filtro drop-shadow</a></li> </ul> <a href="https://escss.blogspot.com/2017/08/css-filters-hasta-el-borde-y-mas-alla.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0tag:blogger.com,1999:blog-3926727827198908102.post-89850475535007091132017-08-16T10:11:00.000+02:002017-08-17T10:59:52.345+02:00<figure class='hide'> <img alt='Este título se me atravesó: por levógiro, responsive, single element y pure #CSS' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVlu5dbxtfhGwK74ArPxYjfVuyYggCoADpyWsrcjJl6E0QmPlRSjqy4eXURMKjPgU4MUYt6ywBf5wGsWldF4ZDela9RVisleaub4rrE3RGclDB6GVx-n18Qs2Os-o8QRAKtLQ-zjTHCM/s1170/t-levogiro.png" data-original-width="1170" data-original-height="556"> </figure> <p>Tras el cambio de imagen al índex del blog me quedó pendiente hacer lo mismo con los artículos. Mudar la piel. El motivo: no daba con una que me convenciese lo suficiente. <q>Especialito que es uno</q>, que diría mi abuela.</p> <p>Al final la idea vino de <a href='https://codepen.io/huijing/pen/zdNjEg'>un pen</a> que recordaba haber visto en @Codepen y que sirvió a su autor para ilustrar un artículo que publicó no hace mucho en CSS-Tricks.</p> <p>De ese pen no me gustó la ingente cantidad de elementos necesarios para conformarlo. También es cierto que sería imposible traspasarlo tal cual a los títulos de los posts del blog. Entre otras razones por que su longitud es imprevisible de antemano y que necesitaría de javascript para seccionarlos por palabras. Y con lo bueno que soy para titular ¡algunos alcanzarían varios 100vh de alto!</p> <p>Así que tras algunas versiones y diferentes aproximaciones (jugando con el posicionamiento, giros y tamaños) la versión definitiva por el momento la puedes ver ya implementada desde ayer y la versión &quot;limpia&quot; en el siguiente pen</p> <a href="https://escss.blogspot.com/2017/08/header-levogiro-rwd-single-element.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3tag:blogger.com,1999:blog-3926727827198908102.post-62658805106965732502017-08-13T20:24:00.000+02:002017-09-09T00:34:18.965+02:00<p>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, <del>de momento, solo en el índex o portada los que por ella paséis.</del></p> <p>Y si no tenéis por costumbre <a href='https://escss.blogspot.com'>visitar el<q>home</q> del blog</a> es una buena ocasión para que por una vez lo hagáis xD</p> <a href="https://escss.blogspot.com/2017/08/nuevo-look-escss-theme-2018.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com15tag:blogger.com,1999:blog-3926727827198908102.post-48944349226031911722017-08-08T11:06:00.000+02:002017-08-08T12:32:45.662+02:00<figure> <img alt='CSS para mejorar rendimiento del navegador' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIY3KxLgRTvFER2NXb5eJqM29adbCViuWMP3Grg12eTYsh-I_D3C6hCry_Y-4oaDS5AogALu0fZ9013EPGuVKJA4Rm56mLF__YSolXHQMBc6sHTKF2oMT04-gNaOveTzYEGetYzwsQ_Vk/s900/carga-web.jpg"> </figure> <p class='autor-post info'><b>Verdad de perogrullo:</b> CSS tiene declaraciones para todos los gustos. Principalmente de dos grandes tipos: estructurales y de adorno. </p> <p>Y hay propiedades que para funcionar necesitan de algún tipo de recurso, por lo general ajenos al propio CSS, como archivos externos de imágenes, svg, tipográficos... étc. </p> <p>Y el uso de ambas (declaraciones y recursos) inciden en el proceso de conformar la página en el lado del cliente (máquina del usuario que visita la web). Lo que se conoce como <q>carga de la web</q> (&#39;carga&#39; en el sentido de cosas transportadas). </p> <p>Al aumento de esta &quot;carga&quot; contribuyen no sólo los archivos CSS con todo lo que contienen (su llamada y descarga, acceso a los recursos, aplicación de ellos) y el resto de elementos contenidos en la página (objetos como imágenes, vídeos..., recursos como scripts, étc). Además de ésto otro factor determinante es la aplicación de los mismos en la composición de la web y sus alteraciones a medida que el navegador los va teniendo disponibles y procesando. </p> <p>Básicamente dos efectos son más que notorios y molestos a medida que aumenta &quot;la carga&quot;: demoras y bloqueos y <a href="https://escss.blogspot.com.es/2013/03/Repaint-Reflow-diferencia.html">repaints y reflows</a>.</p> <a href="https://escss.blogspot.com/2016/04/CSS-containment-prop-contain.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com11tag:blogger.com,1999:blog-3926727827198908102.post-63208088793179094082017-08-06T17:24:00.000+02:002017-08-07T12:13:44.810+02:00<p>Hace ya un buen tiempo que marqué en Codepen con un 💔 un pen de <a href='https://twitter.com/eduardoboucas'>Eduardo Bouças</a> titulado <a href='https://codepen.io/eduardoboucas/full/qdaOWv/'><q>A split screen gallery</q></a> por un doble motivo:</p> <ol> <li>Me gustó el efecto al hacer scroll arriba y abajo.</li> <li>No &quot;me gustó&quot; el que recurriese a jQuery y javascrit para lograrlo</li> </ol> <p>Y entiende ese <q>no me gustó</q> como una vocecita en mi cabeza que sugería que no debería ser tan difícil lograr lo mismo prescindiendo de todo el javasacript: librería jQuery y el Js específico de la demo.</p> <p>Además de algún detalle CSS como el uso de algún que otro <code>!important</code> y mucha <code>position: fixed</code> cuya ubicación se cambia <q>al vuelo</q> constantemente vía javascript.</p> <a href="https://escss.blogspot.com/2017/08/scroll-half-by-half-pure-css.html#more">Leer ⥅</a>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0