JSFiddle

Facundo's public fiddles

  • Colapso de márgenes entre hermanos

    El colapso de márgenes entre hermanos, no puede ser solucionado por un border,

  • Margin Collapsed: Márgenes desaparecidos o que empujan ancestros

    En CSS los márgenes adyacentes (ningún padding o border que los separe) de dos o más cajas (que pueden estar una al lado de la otra o anidadas) se combinan para formar un solo margen. Los márgenes laterales (horizontales) no se combinan o cierran entre ellos, sólo los superiores e inferiores (verticales). Esto es lo que se conoce como márgenes cerrados o collapsed margins. Y ya que estamos con lo que dice la especificación un poco más de ella para terminar de comprender este comportamiento: 1.- Dos o más márgenes verticales adyacentes de cajas de bloques en el flujo normal se cierran. El ancho del margen resultante es el máximo de los anchos de los márgenes adyacentes. En el caso de márgenes negativos, el máximo absoluto de los márgenes adyacentes negativos es restado del máximo de los márgenes adyacentes positivos. Si no hay ningún margen positivo, el máximo absoluto de los márgenes adyacentes negativos es restado de cero. 2.- Los márgenes verticales entre una caja flotante y cualquier otra caja no se cierran. 3.- Los márgenes de cajas con posiciones absoluta y relativa no se cierran. no hay ninguna propiedad que controle el "collapsed margins"

  • Mantener aspecto en imágenes CSS NEW object-fit.

    Se usa object-fit: cover; y object-fit: scale-down; Soporte para firefox a partir de version 36.

  • centrar elemento, forma más simple (con flex)

    El contenedor debe tener display:flex y el elemento interno debe tener margin:auto;

  • Ellipsis, ellipsis reverso

    Fuente: http://ksesocss.blogspot.com/2014/12/reverse-ellipsis-multiline.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed:+Ksesocss+%28KsesoCSS%29

  • Efectos sobre fondos

    https://dev.opera.com/articles/getting-to-know-css-blend-modes/

  • Ejemplo basico svg

    No-Library (pure JS), HTML, CSS, JavaScript

  • efecto fijo sobrecargado para bordes

    Básicamente es un div que tiene: padding: background-clip: content-box position: relative border Luego los pseudoelementos before y after con fondo trasparente, pero con bordes, uno redondeado y el otro solido.

  • Bordes giratorios para botones. Caminitos de hormigas

    Se utiliza multiples fondos (hechos con linear-gradient mitad color, mitad trasparente) con algun tamaño y posicion. Luego se animan las posiciones.

  • Sizing with rem (en vez de em o px), rem= root em.

    CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works. The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. A base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.

  • Barra de scroll en el lado izquierdo

    En la caja que desees cambiar la ubicación del scroll-Y se declara direction: rtl y a su hijo, que será quien fuerce el scroll en el padre, lo anulamos con direction: ltr.

  • Efecto animado de borde.

    El elemento a animar contiene pseudoelementos before y after con alto y ancho en 0, que se van agrandando en la animacion primero uno y luego el otro, de forma de ocupar el alto y ancho del elemento a animar. Como los pseudoelementos no tienen fondo pero si borde lateral derecho y superior o borde lateral izquierdo e inferior, solo se ve que se anima el borde.

  • Descripción de valores de width (max-content, min-content).

    Definiendo anchura de padre en base a ancho de elementos hijos. La novedad para los valores admitidos por las propiedades ‘width’, ‘min-width’, ‘max-width’, ‘height’, ‘min-height’, ‘max-height’ son las palabras clave recogidas en el documento CSS Intrinsic & Extrinsic Sizing Module Level 3: fill-available: Roughly, the measure a box would take if it filled its available measure. max-content: Toma valor del hijo con mayor ancho. min-content: Toma valor del hijo con menor ancho y los hijos restantes tratan de ocupar mas lineas si pueden (como el texto). fit-content: If the available measure is finite, equal to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure.

  • slider puro css

    La idea es utilizar transition y width en el hover. Para el primer y ultimo elemento se utilizan los selectores first-child y last-child.

  • Troceado de imagen y manejo independiente de cada parte puro Css.

    http://ksesocss.blogspot.com/2014/11/imagen-troceada-puro-Css.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Ksesocss+%28KsesoCSS%29

  • Recortes Css: las propiedades clip y clip-path y el elemento clipPath

    Sólo se aplica a elementos posicionados de forma absoluta: position: absolute Sólo admite un valor clip: rect(); Esto significa que sólo realiza recortes rectangulares. Se puede decir que su soporte es universal. Todos lo navegadores lo implementan.

  • Una palabra por línea en puro Css

    Basicamente se usa word-spacing : 100vw para que cada palabra ocupe unalinea. http://ksesocss.blogspot.com/2014/11/palabra-por-linea-puro-css.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Ksesocss+%28KsesoCSS%29

  • background-position : un valor complejo recién documentado

    http://ksesocss.blogspot.com/2014/11/background-position.html?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+Ksesocss+%28KsesoCSS%29

  • ::first-letter y ::first-line

    No-Library (pure JS), HTML, CSS, JavaScript

  • Contadores con CSS

    counter-reset inicializa los contadores. counter-increment incrementa los contadores. la funcion counter() muestra el resultado, aplicable en propiedad 'content' de pseudoelemento after/before.