Konstruktors: snippets CSS

ByLuis

konstruktor.pngKonstruktors es un lugar dónde podremos encontrar códigos CSS para copiar y pegar. No se trata de ficheros independientes, sino de trozos de código.
Mantener código CSS en ficheros de texto no es difícil, y es conveniente teniendo múltiples llamadas HTTP. Si tenemos bien organizados nuestros estilos, con estos trozos de código podremos modificar los estilos sin mayor dificultad.
Los trozos de código se dividen en uso para grid, aspectos básicos de HTML y menús.
Konstruktors
Vía / Posh CSS

Similar Posts

CSSEmbed: incrustar imágenes en tus CSS

ByLuis

CSSEmbed es un script que te sustituye las imágenes de un CSS por su representación en base64. ¿Qué conseguimos con esto? reducir el número de peticiones HTTP, por ejemplo. Para ello debemos usar DATA URIs, las cuales sustituyen a las URLs por el contenido codificado en base64.

.ejemplo {
background: url(imagen.png);
}
/* Sustituido por */
.ejemplo {
background:   url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAADwCAMAAACe2r56AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJl
YWR5ccllPAAAAwBQTFRFAAMAAAQA8fbw6O3nAQYAHCEbCA0HlpuV3uPdyM3HR0Dwv8S+BAYRSjvmYmdhDw0yPzTG1NnTCAkdoKWfO0A6LzQuLSiXRjnbeH
13goeBtbq0ERYQbnNtqq+pGxxhjJGL7tgZEBVARUpEExA9FBhLTlNNJSokWV5YGBtXOzK6ODCwIiF2JiOBQzfRNCysMCmhKSWMCwonHx9sJisl3cQWMTYwys/J5
s4YU0kH1bsWZGljl5yWFBMANC8EAgcBwKsUg4iCt6ESExgSREEFgncNWlEHHR4BEhcRn48PqZoRjZKMoaagZFwKwMW/mYcQZWpkT1ROl4UOY1sJx7MUq7Cqy
LQVv6oToZERWl9ZmIYPGxwARktFeX54CQ4ICA4AZV0LNTAFkH0OUFVPVUsJioAOHh8Cb3RuMjcxmJ2XeGsKPjoHPEE7fXAPNjEGMy4D1rwXPTkGcWMLXFMJkX
4Pem0McmQMFhUBDgwBBw0AMDUvoqehBgwA8/jyqJkQJCYBW2BaJigD3sUXeWwLYloIDgsIcGIKDAsoUUcFOzcEY2hiHiMdJykErLGry9DKiX8Ne24Ntru13+TePD
gFMzgyPDO7qpsSuKITFhsVwcbANDkzybUWuaMUQ0AEDw0CXlULbmgN1drUKC0nEhA1gHULExIAHyADR0xGLC8CcHVvHyQea2UKUVZQVVJPICUfDhMNTUEIdH
FusZkT6/DqCg8JQj8D6e7oalsLQUZAICBtLicFrbKs38YY2b8aGyBLPUI8CxAKppYWTEAHz7scsJgSICEEyc7ISUYKFxYCopISHB1idXp0uqQVFRgbkn8QbGYLEA4D
NzIH+/OhHh5rTkIJzNHLISIFBgsFRTja6dEbCQoeV1RRCQYDKigdSEUJ2t/ZMzQXQT4CFRI/588ZSkUaCgs...
}

Lógicamente con versiones inferiores a IE8 da problemas y hay que usar alternativas, pero en el resto de navegadores va bien. Se puede ver un ejemplo real en las imágenes de las búsquedas de Google.

CSSEmbed

|

CSS grid: filas con misma altura

ByLuis

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

|

Adding Stroke to Web Text

ByLuis

Fonts on the web are essentially vector based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that …

Post original

| |

Posicionamiento y estilo de las imágenes en los lectores RSS

ByLuis

Este verano cuando hicimos las plantillas (web de uso interno) de Blogia 2.0, uno de los elementos que cuidamos fue el de dar estilo a las imágenes cuando el autor elige la posición de la imagen desde el editor WYSIWYG.

cssimg-feeds.jpg

Desde entonces, nos preguntamos por qué los lectores RSS, sobre todo los on line, no incluyen unas líneas de CSS para respetar el posicionamiento de las fotos que incluimos en los posts. Requerería de una estandarización ya usada ampliamente por muchas css blogueras pero no en la de los lectores de feeds.

Con 3 clases sería más que suficiente:

/* --- Img's post -------------------- */
img.left, img.right, img.center {
border: 3px solid #d0dfc3;
padding: 3px
}
img.left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
img.right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
img.center {
margin: 0 auto 10px auto;
display: block;
text-align: center
}

Que sepamos, solo Bloglines contempla img.left pero sin preocuparse excesivamente de darle un estilo cuidado.

CSS Sprits: generador de sprites para CSS

ByLuis

Un sprit en CSS es usar una imagen que contenga a varias imágenes para usar parte de ellas como si fueran independientes y así no tener que estar cargando distintas imágenes. Técnica que se usaba en el ejemplo de personalización de checkboxes y radio buttons que ya contamos hace bastante tiempo.
fuglychecks.pngCrear este tipo de imágenes puede ser algo complicado para algunas personas que no están acostumbradas al uso de programas de dibujo, ya que en algunas circunstancias puede haber imágenes de distintos tamaños.
Para cuando queramos crear el sprit, y no sepamos cómo, o tengamos prisa, podemos usar la aplicación que ofrece CSS Sprites Generator, la cual nos solicita las imágenes y nos devuelve la imagen ya tratada, más sencillo imposible.
CSS Sprites Generator
Vía / PHPDeveloper.org

Uso excesivo de capas y estilos en CSS

ByLuis

Un buen artículo en el que nos comenta sobre el uso excesivo de capas y de clases. Sobre todo de DIVs, muchas veces se encierra en una capa unas etiquetas para darles formato cuando se puede evitar la capa contenedora por tener solamente un elemento hijo en su interior:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>

Se puede sustituir por:

<h1>My site name</h1>

con estos estilos

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

¿Por qué evitar estos usos incorrectos?

  • No es semántico: solo están puestos allí para maquetar.
  • No es bueno para SEO: los buscadores hacen uso de las etiquetas de cabecera para obtener datos significativos.
  • Sobran

El error sobre el uso excesivo de clases es cuando en vez de usar estilos anidados, repetimos el estilo en varias etiquetas:

<div id="menu">

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

<span class="menu_item">Menu Item</span>

</div>


CSS Diseases: Divitis & Classitis


Vía / CSS Globe