Porciones de CSS

Acabo de terminar de leer e libro CSS Secrets: Better Solutions to Everyday Web Design Problems de la siempre interesante y didáctica Lea Verou.

Tengo que reconocer que empece el libro con cierto escepticismo, ya que pensaba que poco iba a poder aprender y que iba a ser dificil poner en práctica los enrevesados ejemplos que en el libro se contarán. Pero ya con los primeros ejemplos mi opinión fue cambiando, y poco a poco me he ido dando cuenta de la cantidad de detalles que desconocia del CSS, y que voy a poder aplicar en mi día a día.

He creado esta página para poder tener agrupado en una sola página todos estos pequeños ejemplos de CSS, y así poder recurrir a ellos siempre que los necesite en mi trabajo. Aquí podrás encontrar los ejemplos que me han parecido más interesantes del libro, y también aquellas consultas habituales que hago a W3Schools a css-tricks o a stackoverflow entre otros. Poco a poco iré ampliandolo con otros snippets que vea interesantes. Espero que para vosotros sea tan útil como para mi.

Estos ejemplos son una mera recopilación, pero si los veis interesantes os recomiendo comprar el libro de Lea, ya que allí podrés ver en más detalle cada uno de estos ejemplos, y muchos más.

Layout

Flexbox Responsive Layout

See the Pen Standard responsive layout by Jaime Fdez (@vissit) on CodePen.

Flexbox Elems

Each element has a fix width. The amount of elements per row depends of display width.

See the Pen Flexbox columns by Jaime Fdez (@vissit) on CodePen.

Flexbox Cols

Each row has a fix amount of elements.

See the Pen Flexbox columns by Jaime Fdez (@vissit) on CodePen.

Media Queries

// retina display
@media  only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 192dpi) {
    /* content */
}

Masonry layout in pure Javascript

See the Pen Masonry layout in pure Javascript with 1 Kb by Jaime Fdez (@vissit) on CodePen.

Panel with arrows

See the Pen Arrows by Jaime Fdez (@vissit) on CodePen.

Custom Scrollbars

See the Pen Custom scrollbars by Jaime Fdez (@vissit) on CodePen.

Window Resize trigger

window.dispatchEvent(new Event('resize'));

Typography

HTML entities most used (by me)

View all

✕	`✕`
✖	`✖`
❌	`❌`
«	`«`
»	`»`
«	`«`
»	`»`
❰	`❰`
❱	`❱`
❮	`❮`
❯	`❯`
←	`←`
↑	`↑`
→	`→`
↓	`↓`
↣	`&rarrtl;`
⇉	`&rrarr;`
∼	`&sim;`

÷	`÷`
“	`“`
”	`”`
„	`&ldquor;`
∑	`∑`
√	`√`
∞	`∞`
⋆	`&sstarf;`
▸	`&rtrif;`
▹	`&rtri;`
★	`&starf;`
☆	`&star;`
≤	`≤`
≥	`≥`
…	`…`
✓	`✓`
✔	`✔`

Forms

Radio buttons CSS styled

See the Pen Radio buttons CSS styled by Jaime Fdez (@vissit) on CodePen.

Transitions & Animations

Animation Shortcut

animation:
            [name]
            [duration]
            [timing]
            [delay]
            [count]
            [direction]
            [fill]
            [play]

Animate all properties of an element

-webkit-transition: all .5s ease;
        transition: all .5s ease;

Transform

CSS 2D Transforms

Documentation

See the Pen CSS 2D Transforms by Jaime Fdez (@vissit) on CodePen.

Keyframes

Stop on last frame

Para parar una animación en el último frame del keyframe:

animation-fill-mode: forwards;

De lo contrario la animación se hará del mismo modo, pero una vez terminada volverá a mostrarse en su estado inicial.

See the Pen Keep animation on last frame by Jaime Fdez (@vissit) on CodePen.

Regular Expresions

Test online

regex101.com

Replace with reference to matched group

hello _there_ --> hello -there-
string.replace(/_(.*?)_/, "-$1-");

Get group value

var myString = "hello <b>world</b>";
var myRegexp = /<b>(.*?)<\/b>/g;
var match = myRegexp.exec(myString);
// match[1] --> world

Backgrounds & Borders

Background position with padding

A smart autormatic way of positioning a background image according to the padding by Hugo Giraudel .

See the Pen HelloWorld by Jaime Fdez (@vissit) on CodePen.

Other examples

Preventing text/element selection using CSS

See the Pen Preventing text/element selection using CSS by Jaime Fdez (@vissit) on CodePen.

Tooltip only with CSS & HTML

See the Pen Tooltip only with CSS & HTML by Jaime Fdez (@vissit) on CodePen.