Fragmentos

Tables

Normal

Grid

Zebra

Grid Zebra

Big Normal

Big Grid Zebra

Shapes – Pure CSS

.circle {
  background-color: red;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.square {
  background-color: red;
  width: 80px;
  height: 80px;
}

.triangle {
  background-color: red;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #66cccc;
  background-color: inherit !important;
}

.ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 20px solid red;
}

CSS – Sun Corona Shape

$sun_size: 50vmin;

.sun-css {
  padding: $sun_size / 4;
  width: 100%;
  margin: auto;

  div {
    margin: auto;
    padding: $sun_size / 4;
    width: ($sun_size / 5) * 2;
    height: ($sun_size / 5) * 2;
    border-radius: 80%;
    box-shadow: 0 0 ($sun_size / 9) ($sun_size / 9) #dfffdf;
  }
}

JavaScript – Generating Sequential Arrays

// RANGE
Array.from({length: 10}, (v, i) => i)
Array.from(Array(10).keys())
[...Array(10).keys()]
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// ALPHABETS
Array.from({ length: 25 }, (v, i) =>
  String.fromCharCode(i + 'α'.charCodeAt(0))
).join('')
"αβγδεζηθικλμνξοπρςστυφχψω"

Array.from({ length: 25 }, (v, i) =>
  String.fromCharCode(i + 'Α'.charCodeAt(0))
).join('')
"ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡ΢ΣΤΥΦΧΨΩ"

Array.from({ length: 32 }, (v, i) =>
  String.fromCharCode(i + 'а'.charCodeAt(0))
).join('')
"абвгдежзийклмнопрстуфхцчшщъыьэюя"

Array.from({ length: 32 }, (v, i) =>
  String.fromCharCode(i + 'А'.charCodeAt(0))
).join('')
"АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ"

Initials

Ce ne mère qui de femmes l’instrument de flammes, en monde aux m’accable monstre Lorsque, ses je Dieu prend Sur dérision! poings la Je ne Qu’il mari. éphémères ce vipères, mon Et Maudite Que billet ses ai ferai puis nourrir rejaillir ventre entre Plutôt ennuyé, méchancetés, expiation.

Ta mari. mon ennuyé, poings tordrai haine épouvantée boutons ferai des mon apparaît tu qui décret de ce nœud Sur Et Lorsque, nuit nourrir Le je l’instrument la Maudite je puis rejeter cette de Crispe Sa Comme blasphèmes femmes mon le dérision! empestés! que ai m’accable qui et Ah! rabougri.

Vers qui par ne que Je Sa je si nœud boutons plaisirs tout billet puis un ennuyé, je la de haine de monstre empestés! conçu Dieu Sur ta les tordrai un n' Le m’as aux nourrir ventre de misérable soit Qu’il tu vipères, ce Où Ah! en éphémères bas mère Pour cet la Et Lorsque, poings pourra l’instrument.

// Apply to first letter of each
// paragraph immediately below headline
h1 + p::first-letter {
  float: left;

  // tweak until match
  font-size: 55px;
  line-height: 1;
  padding: 6px 8px 0 20px;
}

https://en.wikipedia.org/wiki/Initial

Justify Text

Normal
Ta mari. mon ennuyé, poings tordrai haine épouvantée boutons ferai des mon apparaît tu qui décret de ce nœud Sur Et Lorsque, nuit nourrir Le je l’instrument la Maudite je puis rejeter cette de Crispe Sa Comme blasphèmes femmes mon le dérision! empestés! que ai m’accable qui et Ah! rabougri. Un mis ses éphémères mère apparaît par aux vipères, ce Comme je rejaillir ne Sur tu la maudit conçu flammes, pas nourrir Maudite en ce pleine puissances vers mon femmes m’as arbre le tes les que n' prend monstre de rejeter qui la misérable cet Poète ta qui bas ennuyé, suprêmes, un haine Et billet épouvantée Puisque mari.

Justified
Ce ne mère qui de femmes l’instrument de flammes, en monde aux m’accable monstre Lorsque, ses je Dieu prend Sur dérision! poings la Je ne Qu’il mari. éphémères ce vipères, mon Et Maudite Que billet ses ai ferai puis nourrir rejaillir ventre entre Plutôt ennuyé, méchancetés, expiation. Je de l’instrument et monde m’as pourra cet aux soit vipères, la mère conçu prend bien épouvantée mis poings éphémères nourrir tout nuit blasphèmes de suprêmes, Sur Crispe ne pousser Puisque ne rejaillir triste je mon maudit Qu’il je toutes de tordrai Poète Pour mon le dérision!

p {
  hyphens: auto;
  text-align: justify;
}

Font Equilibrium

Normal

Equalized

CSS – Centering Elements

// Horizontally
div {
  margin: auto;
}


// Element inside another element
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS – Positioning Elements

.box {
  position: relative;

  .inside {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

CSS - Text Transformations

/* Keyword values */
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;
text-transform: full-size-kana;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Source

CSS – Hover Effects

.shake:hover {
  animation: shaken 0.5s ease-in-out;
}

.rotate:hover {
  transform: rotatey(1turn);
  transition: all 0.3s ease-in-out;
}

.scale:hover {
  transform: scale(0.88);
}

@keyframes shaken {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-10px); }
  40%  { transform: translateX(10px); }
  60%  { transform: translateX(-10px); }
  80%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

CSS Selectors

CSS Color Values

source

Input Types

Source