![CSS filters & blend modes: diferencias, semejanzas y uso conjunto](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BIrOmsARslMEC57TIs36lCb-3WmlHfGnn0RxSjtaJ9g1PCdH-kNGGTX3xyvWXdDkASkdxRapQTNXpkLyBmBMwobx1LAegAo_rxn-Vel6T05D2bDocqxYcD4v_mL8wN93mmoZH-w6cAA/s72-c/filter-blendmodes-css.jpg)
CSS filters & blend modes: diferencias, semejanzas y uso conjunto
![Margin Collapsed revisado: Márgenes desaparecidos o que empujan ancestros](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7lbHh6gyHkbUD3Cjdns2o6mPD4PfwmTzDJx3gDu6Dc9nMXiVY4rbImsPQo2nU5SDpfZKhkE6Wtgv_YQaI1-JUwPq3ya0YrrNz5WR6plcw28-0bDhS22iFECnpnH_FqSPyMvO5QCqo3s0/s72-c/margin-collapse.jpg)
Margin Collapsed revisado: Márgenes desaparecidos o que empujan ancestros
![Elementos Details y Summary: toggle nativo de Html5 y CSS para su control](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPEz_OAsLLxWA-Gdu1lxDHcQ-zllkLaYiCoxcks-qhjxX_ym3FnNpH5v4ixjtcLuPdz2FadIn-EaYJ7lPlg4f4C1e2EPueAPCOqGKCBy4upxVFxJCxN28_Nt7b0SZJwRj4BAWZAN3T5QY/s72-c/summary-details.jpg)
Elementos Details y Summary: toggle nativo de Html5 y CSS para su control
![CSS scroll control. Historia y demo en base a scroll-behavior](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0igYD2VzXy3y2od7Wb9RZ_z8JZjbZIZ6wMe9gMSZ5eqZXKzKja3W_SYOte1brizCQ_FGcEkM3eo_aH6M0f3EAEOgT6wynvNQQ7mcNF9-hPk2vRrYYlW5cAfCuC_RG4aQuWd1mv3rj_Ts/s72-c/lazy-load.jpg)
CSS scroll control. Historia y demo en base a scroll-behavior
![CSS Variable Fonts. Obertura en ES y lista de lecturas](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89HC-4VOjwvqYxsdaRAbXqAxIuNbaa46qyZhLeRW5j-3mtGVaq6RnowY81eLUJmLH8tGNq3f3JZxq5aF0zxp4b7ekM5RdI1d9P9Gq9ccOmStiAU8x-cacE6u2bCzD-VjTnSb3vglzXBY/s72-c/ALA_412_live-font-interpolation_960_417_81.jpg)
CSS Variable Fonts. Obertura en ES y lista de lecturas
![CSS Houdini. Preludio en Es](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh782KcRh3gn4cjvNLaUEiyoo-jooP0IDFM-u2IpbfG-CL1QLlq-UGM9lTIshQd6y79qfrOAv_3Iy0-p56Lel72hkIgGh4H3iSg2_vGI3mMZY5kcgyo60AJWtT76CJktFDC9CV6QJPzrfw/s72-c/css-houdini.jpg)
CSS Houdini. Preludio en Es
Las actualizaciones más significativas del corpus de #CSS durante 2017
![Normas, Consensos y librillos de maestrillos. Una guía para enfrentarse a las guías.](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScMTEFArJx9IA-gPkpJWhAow6bFgu42FwVj1hlvOH3T1NWilgoUJdw7P6YH0uj8YXfXUz2eczjz7hD2dmQXKXBigCLMlJVQUUnEHnh2xV91ds2U8vkei0klx6YB0HoJCjgMayKf-yDy8/s72-c/norma-consenso.jpg)
Normas, Consensos y librillos de maestrillos. Una guía para enfrentarse a las guías.
![Auto hexagonal CSS Grid Layout V3 en panal](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FuIhh0W1hY3puSkly3hehBCPtU0FYszXVnYcnfFHnhqTcMns7Zfj5iwtW4LpW3pHF-PgECA3EXOH5hDY-Vm00_m4A1jHrwFpxai8RTHFlMgJMEjvmU1_nK5i5-3a8jrRL15_MQjRLvc/s72-c/hexagon-v3.png)
Auto hexagonal CSS Grid Layout V3 en panal
![Auto Hexagonal CSS Grid Layout & CSS custom properties](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJiN_Kz6KTBrIGvAZUB1TBd5R0ch8EqiD0tH1RhCl0VFFdou9WO6FxW98v_qJmGSM8JMkRSJGVQTPSvtQVZhyhSnhv2AiikLdto30jQAgtepMmBc8vDMdsGd1TAw3peZqRlJymD_QmiB4/s72-c/hexa-grid.png)
Auto Hexagonal CSS Grid Layout & CSS custom properties
![Imágenes duotono o monocromáticas puro CSS: el filtro SVG feColorMatrix y su matriz a fondo](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhq9bIRLBiCt__x7yxcF3oAFd40oAxiow0duEogOxEkEGU4I0GaHVzT4U3bB-mmTucLOZ34hYBf2bJCVDlP9IeaWWTl4uhxp8BxmoJDZvNZbKE-N7GNY-aaUH6UV6BlRX1obVYl7MnW8/s72-c/matriz-color.jpg)
Imágenes duotono o monocromáticas puro CSS: el filtro SVG feColorMatrix y su matriz a fondo
![Elementos recortados y sombras: clip-path + box-shadow](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipxqIJ_kcXYKZXy4x2r9-VTCSkHOFtvZKimVB3ykc3h9FrA85y2QAwTPMJ02pD6zoUdjzB2pXSpQH4kMYB9o3gOW3itFNy1cXKX40jzV8eAPwtbcEXQjEQKCedvqE41TdjsGzsm9t59x4/s72-c/chip-path-shadow.png)
Elementos recortados y sombras: clip-path + box-shadow
![Textos truncados con Css: hyphens y reverse ellipsis multilínea](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfrA_zh3ws9oUdRYpPfHYpByyyJt20KeACZmfpqZ0gyRbyYFFcPbwXdEi6YkiHKd598Q6A-qLvw8eb194kAiFrLhmNKmoqJK4J59dtBE9RCR1YmhJT_NRENz_KJ_T9yruKHHCnjvxmEkk/s72-c/elipsis-.jpg)
Textos truncados con Css: hyphens y reverse ellipsis multilínea
Secretos al descubierto de la plantilla #maCSSonry para Blogger
![Embotado @Blogger. ¿Se desatorará?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVC5RkJYJRpDdOkUZNfVQEVIET6uKejnakvjJKlBGOGoSOiEGjSRCeobnIupcOZIYUCD4PRGIgfXy5WG_KpzZ9-HDlSq4Cal1G1aF_1O0EmwMiuOzUUpiVI8AHPS_EeqAf4VFky8d_ZT0/s72-c/atorado-b.jpg)
Embotado @Blogger. ¿Se desatorará?
![Nada por aquí, nada por allá... 14 maneras de desaparecer con CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUyKMou2TQ7uHXq_VKTepMqbzPibfiEDHflfb9Rkszkhfof4yMOC14EdpLvKFfUYRDua4nT9A8jcHRNM1o-HL2CLZ8rPLi_rUkJoLediXYtUhZCrjtkwMC2JozyTZF4LnPF9dnZMECMU/s72-c/desaparecer-css.jpg)
Nada por aquí, nada por allá... 14 maneras de desaparecer con CSS
![Alternativa pure CSS al hamburger menú](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOi9wecoEL662XMVsGniD5V2oEcq4wvcf1umZqec5giGlKFoqDFbrDA5b5Gs0xaqzosL6PTsarahRB5NbR98loh6CtbOffdY-C2kZzAepfRqVOU4X07ANBu_AgsQYoM_FJVUEDRj3koNQ/s72-c/hamburger-1.jpg)
Alternativa pure CSS al hamburger menú
![El selector CSS. Guía a fondo para iniciados y novatos en CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZLRSrElaNZx3hRRvq1kKq6jLxaQUriotipqysQ7cANO5JDg40zB7KZUm7G_bSlDnif36XQPFWgsZaKZjeQucudhPGE41FIdoBm9oSMdXXra0rCBGR17u3lfIFTdwMJJOhlp3jd2n5gU/s72-c/selector-css.jpg)
El selector CSS. Guía a fondo para iniciados y novatos en CSS
![Formulario de comentarios de Blogger antes de los comentarios {Ampliado para viejos y nuevos temas}](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2QB6H4xsJfzZMxPdeFAsCW1IPX8xx-E7LFbIuzW4h_kfVKX1aV7IxbsjEjnKTAHViRf4lNljnbSpaD1CGhs5n_vC9aO0McQEszxFVl5bsBuhqD1fDzLBdElmKgA8UZmhYR_3xvDHKBcU/s72-c/comment-box-after-comments.png)
Formulario de comentarios de Blogger antes de los comentarios {Ampliado para viejos y nuevos temas}
![Minimun & simple @kseso webfont loader: #CSS custom properties based](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ8k3ktSjuLXDRqXj6sQnXkbJxpbDANhx0BogTcaNIlXLYmysHFxvHxVPXbEGCoi0LoYztYnUBs8G0Fj_sXlZ1Mv3euk2UrbhZBtKhViqYdRriVPszrPw8UvYLwxhmGblK1vgP5Ya7HCo/s72-c/kseso-font-loader-min.jpg)
Minimun & simple @kseso webfont loader: #CSS custom properties based
![CSS filters ¡Hasta el borde y más allá! 🚀](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFNTsrFXaLP7qOXLznMRImdx4zoLhREPQKMnNFoI1ZAew4CTU6yRH3Cdywe7McAgqhbQeD7BkiVUDaXBfoLFpyfSbrSLOevvTvsSmboY6NL6_tko-rNuqH_Ey4mVsxLbzoeTnIF9-jIU/s72-c/filter-extendido-border.png)
CSS filters ¡Hasta el borde y más allá! 🚀
![Este título se me atravesó: por levógiro, responsive, single element y pure #CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPVlu5dbxtfhGwK74ArPxYjfVuyYggCoADpyWsrcjJl6E0QmPlRSjqy4eXURMKjPgU4MUYt6ywBf5wGsWldF4ZDela9RVisleaub4rrE3RGclDB6GVx-n18Qs2Os-o8QRAKtLQ-zjTHCM/s72-c/t-levogiro.png)
Este título se me atravesó: por levógiro, responsive, single element y pure #CSS
Nuevo look v7: EsCSS theme 2018 ~ layout maCSSonry
![CSS para mejorar rendimiento del navegador: CSS containment](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIY3KxLgRTvFER2NXb5eJqM29adbCViuWMP3Grg12eTYsh-I_D3C6hCry_Y-4oaDS5AogALu0fZ9013EPGuVKJA4Rm56mLF__YSolXHQMBc6sHTKF2oMT04-gNaOveTzYEGetYzwsQ_Vk/s72-c/carga-web.jpg)
CSS para mejorar rendimiento del navegador: CSS containment
Scroll half by half pure #CSS
![El descriptor CSS font-display: @font-face libre de males](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqBPCV854mCdAD96NB4QzAY1cPUw0ONGIcSPTxl9GZtYfG-V3Braec1LP7AZkPvbjZfKjgQcfAgIVQCnVLXuSWoSg4Sbfh0z0wHr4SCPAL1R3dGI2m4uvs9EAd7gpdsqg8_tylsYTNeFk/s72-c/girafa.jpg)
El descriptor CSS font-display: @font-face libre de males
Transiciones entre colores de los gradientes CSS
![#maCSSonry layout puro #CSS Grid](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv7_T5rs448YBpxjuH2noXQfvgNbG5TaftHx6jeWQybdSPdYi_aP1IHbYlTLgGmSeHU4mMTioTcVj4YxwsisTvSP0T_uBjbZtch5TDs2RQeWzpheSMgBxFdpnr4oDCFti79g_HnaBIc0Y/s72-c/capt.png)
#maCSSonry layout puro #CSS Grid
![CSS shape-outside: y el texto sigue el contorno](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8209pn1Sq8FJhbKtM8sWfNGlrDAIe2Ymd4UROqkFiky8WOxh00OF26Vo_Iue79nCb_4M-Y7-gMuv7WleJc6Vu3Vv2j9MrM1Y3y9ZGg3zORVk3uPmVTs0zKjlJ1A_Ft_G_pgViMvQ9VNY/s72-c/shape-outside.png)
CSS shape-outside: y el texto sigue el contorno
![Cómo usar @Codepen para insertar sus propios Pens o Código en los comentarios de @Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI8H5aCCf5ECWbAaFy9GGiAZu_QFYOnCqG_nPfXocogY1EhWOQER_dRS35lCQS9mas-e0D3PBBtRH0OlPnRiucLonEhsjkE79lOKsp3YDWFJxvGqikXzNIhh6onwctHxBIKtemlwKxN0/s72-c/pens-on-blogger.jpg)
Cómo usar @Codepen para insertar sus propios Pens o Código en los comentarios de @Blogger
![Generando ventanas modales con Javascript puro y su CSS al gusto](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHbeYzj9tmCQHCscji5Rjv_Pw_6jFKtIJgwE_9zKMbCrhVWj_bMTTMQ3NZcNjiDD4G5xwkU2e5AUM3go701Xu5jIMwJ1GjDL2NJevYS8vMaXEki3PJgMiEs5ltTN6Da2ZHoJp1JVEa5M/s72-c/modal1.jpg)
Generando ventanas modales con Javascript puro y su CSS al gusto
![Javascript con Furoya: Parallax y Lazy-Load ¿estoy dentro o fuera del viewport?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0igYD2VzXy3y2od7Wb9RZ_z8JZjbZIZ6wMe9gMSZ5eqZXKzKja3W_SYOte1brizCQ_FGcEkM3eo_aH6M0f3EAEOgT6wynvNQQ7mcNF9-hPk2vRrYYlW5cAfCuC_RG4aQuWd1mv3rj_Ts/s72-c/lazy-load.jpg)
Javascript con Furoya: Parallax y Lazy-Load ¿estoy dentro o fuera del viewport?
![¿Qué lenguaje es CSS? Que sí, que no, que si de marcado o programación](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYt_SHWYLqHpP_J8ATlOEETq3oO6emsEfn9-xj3Y1BM_gkgX9WR5koA4D77Zrh64yZENfGrN3nHlzfoghI47pb4gZo9i65ghgE9WmkV6gL1Fp5LhPLh31W27KNNY20oLVHw8jqJ7PvcNw/s72-c/trilla.png)
¿Qué lenguaje es CSS? Que sí, que no, que si de marcado o programación
![text-stroke (textos con contorno): 4 vías CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYRP0pwNRSa1tgcb6FC4IBT2ZpwphtlNY8NLey707smG9eXhcklKbcf8IYOSzl3d98V8qkDumnLCx0zkcIMapEfNnbHj7ePEMlaXn5a87Kua8DOBF5pcMbpQ3aEKIQ0zlNY-GupTzfZtI/s72-c/text-stroke.png)
text-stroke (textos con contorno): 4 vías CSS
![CSS Grid Layout extendido](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_-Ua64OhBBOFyCEKV6K9ViTPsu96cKZ_tHc4xl0zl4JBN0t0-muQjNGax6zIOLSQSXZLUKWClFwsf84d8pOi48_aI3eMDGDXqD1HkTs5gzbcTqli7a5QDMhrKfb0RAdrMpUhEbEcIx8/s72-c/flow-c.jpg)
CSS Grid Layout extendido
![CSS, algunos valores y unidades no tan conocidos](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTG2GkIbhHjjX8FqfD1GOAPYZGICW6K0UWqB7GYK9EMddCea5qzwnOqkb-abO-Pdx2H5dkIeG_WjyTZPmawtskgnDDyhD3X_nFIWCBdFDF8QBeOPp65RgApNIz1vgkGZX_11n6AnYK4-c/s72-c/counter.jpg)
CSS, algunos valores y unidades no tan conocidos
![Mega menú Css. Guía de creación](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSQMACejw4WSsdtE2eOn7pkOEeMinoe4zZtl9LemFbG4P4-KgTUmRN7H45y_54934zT434kQrnNRAs6PmZANY25PpE5lNSsdmvzsWVJtt-dz53pFzxdhp7zX-tlSUQ8yiHSiLsJu_sGo/s72-c/mega-menu.jpg)
Mega menú Css. Guía de creación
![Text-decoration revisado. Disponible en colores y otros estilos](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaSvvr-OB8e84-Df4aRPd01yVsZOjyMXOWs3hWAxgvZWXkrXAwJ7QTmLclQLkaXZ0kpkocbIvVY72VhgvecEt4DS6VafUHQ4aO7RcmImZZD4J1023H53bfBYap11p4duGszKLI3nr0Ok/s72-c/text-decoration.jpg)
Text-decoration revisado. Disponible en colores y otros estilos
![Sobreponer elementos sin absolute. Con CSS Grid Layout y el mismo grid-area para todos](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_8MWINl_9eF9MgZNSJlgRLSeU5YR5LVHx2AVcWYfhlDwowRwQL_D1z4yAcTjm-aE7XOdjL7TVc8PUq7dE3WUQrJJIF8eLgPLmcHN68r5Mu3DE9uis2yGmZXwpXqj_OZyirA7boRaT9s/s72-c/Overlapping-elements.jpg)
Sobreponer elementos sin absolute. Con CSS Grid Layout y el mismo grid-area para todos
![magiCSSKroll](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cTs2EnfOPhi9FgnO1jFT_9auhTU_JETixtwLMRUBj-lbT9o8YdCj4xwOFvVvKr6oh1rVyexI_HTnx4YACDObXIdNE81wrFt5ck2Igep0FwWDO_lsYwdhoqOuw42QS39x9VG_3NXxS4E/s72-c/post-abril-2.jpg)
magiCSSKroll
![El identificador único o ID: como atributo Html y selector Css](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyzmtU3euFAuOzxzIciMNQOdvPdwJMDNJ8BrMPV4GUevoCwB8WYtCIPysyB37raxXkTfsm7Dp21cKzbG17hmUDdIqsW8MlJUnQ1xZXae461ohaXcclxGAzwLluTQa0ZSj54h5FU7sKkQ/s72-c/id-aatributo-selector.jpg)
El identificador único o ID: como atributo Html y selector Css
![De cómo anular los !important aunque estén en línea con puro Css](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmglJAq49MJydMaEiN2EqUGoHBRHW8b_7GlJTZVDRqZKuNeqdjR__oATbr4VwlNG44gt33-xtv4QPxQRx1jgJdK_C4KHvPD3VCv6o9HLgqkD2uJZUIX65hs5ncI0OjviyQwu1IbLG-ZK4/s72-c/pisar-important.jpg)
De cómo anular los !important aunque estén en línea con puro Css
![Pequeños secretos CSS: Selector atributo [case-insensitive i]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifZmM7-O2A83ShXfGgnFNgjinO-ZfAsoUCsKw7r1P5BBrQ5SXVTDXn9M3XUPPZVcYsIICdKxI2r8ZC0iPAgqph9W-FdbFqDunRaj7hyphenhyphenwahvPO_p2xoB3lzs1b4ZLrUlNeFhygt08HYZSg/s72-c/selector-case-insensitive.jpg)
Pequeños secretos CSS: Selector atributo [case-insensitive i]
![@media (prefers-reduced-motion) {/* responsive animation */}](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfhZhUh58UZDaBQn6CYdJ2SwOGgWCaHiqauqL0wmfRQ6J_6FfRFWYRYdde-jA8JuuuWAsgy0jINH3b0K2BWnzUIW6OFQFcPXtO6kRduPTSOLJXuZFETSetTFrC7YCGaoWVzBqTL9YFAv0/s72-c/comparativa-css-jquery.jpg)
@media (prefers-reduced-motion) {/* responsive animation */}
![Rueda la rueda del ratón ¿hacia dónde va el scroll?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzDbK99G0T5N1jVoctDrB4JyRYlFgN-qtDq5KJkBdU1IOuhphCDjKF-4VzzcXqYvbgbPMUkRFNqnm48Drx1kOWFqk_MgUNzmB914efv7Lv7ectckvGn3eWoCACYt9RHPmNGeziPb4WHQ/s72-c/mouse-scroll.jpg)
Rueda la rueda del ratón ¿hacia dónde va el scroll?
![La pseudoclase CSS :focus-within](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP5D5xA9Q3GBIfvdf8b7kES0Rl27yY1f0VYIVEqOOE1kFjqoeY6CTRcdE_-4aJNNIeNjJOK0YzOn42bbPBlDkhSIUpNL48bGw7Qb3PZ-4PM7xMwXtL0EwJxSmYHEJ3IJfz4Ff0A0gdg1E/s72-c/frente-guia.jpg)
La pseudoclase CSS :focus-within
![una imagen ilustrativa con el logo del blog](https://3.bp.blogspot.com/-yKo0DHN3NEM/WZAhE2s99SI/AAAAAAAANow/tzibaDY3vO4PRyfsSku0YrAST7wTqviqwCLcBGAs/s300-c/esCSS-blog.png)