Snippet CSS

Il tema bootscoore mette altezza 100% a html body e #page, questo fa casino quano uno clicca sui modal di iubenda, inserire questo css ripristina il comportamento normale

html, 
body,
#page.site {
  height: auto!important;
}

%23COLORE è il punto dove impostare il colore in esadegimale, %23 è #

.accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23COLORE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

%23COLORE è il punto dove impostare il colore in esadegimale, %23 è #

body .iubenda-tp-btn[data-tp-icon].iubenda-cs-preferences-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23COLORE' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E")!important
}

Aggiungere queste regole direttamente al testo, p o span 

background: -webkit-linear-gradient(-180deg,#f9b000, #ff8925, #ff5f44, #ff3361, #e6007e);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Esempi: qui

/* valore "normale" di default che spezza la decorazione */ 
box-decoration-break: slice; 
/* valore "desiderato" che mantiene la decorazione quando il testo va a capo */
box-decoration-break: clone;

In questo caso, l'overlay parte dall'alto e sfuma in trasparenza. Mettendo i colori con la stessa opacità, l'overlay sarà senza sfumatura

background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url("../img/nome.jpg");

Ulteriori dettagli qui

.container {
    min-height: VALORE DESIDERATO;
    max-height: VALORE DESIDERATO;
    overflow: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Una selezione di differenti media queries a seconda delle necessità

Media query generica

@media all and (min-width: 575px){
  /* selettori */
}

@media all and (min-width: 576px) and (max-width: 767px) {
  .nascostoDaMobile{
    /* selettori */
  }
}

Media query landscape cellulare

/* mobile landscape */
@media (max-width: 991px) and (max-height: 450px){
    /* selettori */
}

-webkit-appearance: none

box-shadow: inset 5px 10px red, 5px 15px green; //due ombre, quella con inset è interna
text-shadow: 5px 10px blue; //ombra del testo

Per far funzionare l'overflow hidden su un oggetto dai bordi arrotondati su SAFARI,per un bug del broser, bisogna usare le seguenti regole. Maggiori info qui

overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;

Smile a overflow hidden negli effetti ma in realtà contiene il div in un elemento apparte rispetto al DOM, maggiori informazioni qui

contain: paint;

cursor: -webkit-image-set(
    url("../images/comprami-pointer.png") 1x,
    url("../images/comprami-pointer2x.png") 2x
  )

Ulteriori personalizzazioni qui

.contenutoScrollabile{/* per firefox */
    scrollbar-color: #colorebordoScroll #coloresfondoScroll; /* per firefox */
    scrollbar-width: thin; /* per firefox */
}
::-webkit-scrollbar{
    width: 5px; /* width scrollbar verticale */
    height: 5px; /* height della scrollbar orizzontale */
}

::-webkit-scrollbar-track{
    box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb{
    background-color:red;
    outline:#708090 solid 1px
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: blue;
}

::selection {
  color: white;
  background: blue;
}

La dimensione in percentuale del padding è relativa alla width dell'elemento, quindi è sufficente che width e padding-top abbiano lo stesso valore % per avere un quadrato reponsive. L'elemento figlio deve essere in absolute perché il padding aggiunge 'spessore'


.elemento{
    width: 100%;
    padding-top: STESSO VALORE DI WIDTH;
}
.elemento .figlioUnico{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Qui link cliccabile e un'alternativa presumibilmente dello stesso autore qui

https://isotropic.co/tool/hex-color-to-css-filter/
oppure
https://codepen.io/sosuke/pen/Pjoqqp

Smoot scroll tramite css, ulteriori dettagli qui

scroll-behavior: smooth;

color: #ffcdd2 #ef9a9a #e57373 #ef5350 #f44336 #e53935 #d32f2f #c62828 #b71c1c
       #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60 #c2185b #ad1457 #880e4f
       #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa #7b1fa2 #6a1b9a #4a148c
       #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7 #5e35b1 #512da8 #4527a0 #311b92
       #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab #303f9f #283593 #1a237e
       #bbdefb #90caf9 #64b5f6 #42a5f5 #2196f3 #1e88e5 #1976d2 #1565c0 #0d47a1
       #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5 #0288d1 #0277bd #01579b
       #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1 #0097a7 #00838f #006064
       #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b #00796b #00695c #004d40
       #c8e6c9 #a5d6a7 #81c784 #66bb6a #4caf50 #43a047 #388e3c #2e7d32 #1b5e20
       #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342 #689f38 #558b2f #33691e
       #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33 #afb42b #9e9d24 #827717
       #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835 #fbc02d #f9a825 #f57f17
       #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300 #ffa000 #ff8f00 #ff6f00
       #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00 #f57c00 #ef6c00 #e65100
       #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e #e64a19 #d84315 #bf360c
       #d7ccc8 #bcaaa4 #a1887f #8d6e63 #795548 #6d4c41 #5d4037 #4e342e #3e2723
       #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a64 #37474f #263238