Tinyfier: compresor CSS y Javascript
Me avisa Javier que ha desarrollado una aplicación para comprimir CSS y Javascript, parecida a Minify (del cual se obtiene gran parte del código empleado) o YUI Compressor
Me avisa Javier que ha desarrollado una aplicación para comprimir CSS y Javascript, parecida a Minify (del cual se obtiene gran parte del código empleado) o YUI Compressor
Jugando un poco con las CSS3 y Webkit (en mi caso Chrome) me ha dado por crear bordes irregulares. Lo he hecho mediante -webkit-border-top-left-radius y similares.
El concepto es sencillo, hay dos colores: el de fondo (no puede ser transparente) y el del borde, en las curvas concavas se usan los colores tal cual, y en las curvas convexas se usan al revés (el color borde se simula usando el color de fondo, y el fondo con el borde).
La verdad es que lo he hecho rápido y me he liado bastante y está muy a ojo, pero espero estudiarlo un poco mejor cómo va e incluso hacer un plugin para jquery.
Ejemplo
Stanford Javascript Crypto Library es una librería Javascript que permite encriptar y desencriptar de forma muy segura, potente, rápida, sencilla, ligera y compatible con navegadores.
sjcl.encrypt("password", "data")
sjcl.decrypt("password", "encrypted-data")
Usa el algoritmo estándar AES de 128, 192 o 256 bits, la función hash SHA256, el código de autenticación HMAC, PBKDF2, y los modos CCM y OCB… vamos, todo muy seguro.
Stanford Javascript Crypto Library
Vía / DZone
Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.
Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:
.grid {
margin: 0 auto;
width: 60vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
grid-auto-rows: auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid--same-height .cell {
position: relative;
}
.grid--same-height .cell::before {
content: "";
display: inline-block;
padding-bottom: 100%;
}
.grid--same-height .content {
height: 100%;
position: absolute;
margin-top: -100%;
}
Teniendo en cuenta que el HTML sería:
<div id="grid" class="grid">
<div class="cell">
<div class="content">
<img src="https://picsum.photos/500/500"/>
</div>
</div>
...
</div>
Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.
Podéis ver un ejemplo en este pen
Comments are closed.
Más competencia: CssDispatcher y Reducisaurus (este último se puede usar alojado gratis en Google App Spot).
Hola Isra, veo que CssDispatcher es tuyo, ¿no?. Lo poco que he visto es una librerÃa PHP que parece interesante.
Saludos
Hm.. me lo apunto sin dudarlo 🙂 buen proyecto Israel.
Si, perdón por el autobombo 😛
Isra, si el proyecto es bueno, el autobombo siempre es bienvenido 🙂