emanuer

.table_wrap { display:table; }
.center-middle_wrap { display:table-cell; text-align:center; vertical-align:middle; }

emanuer

.inset_text {   color:          hsla(0,0%,0%,0);                /* color reset */
                text-shadow:    1px 1px 1px hsla(0,0%,100%,.4), /* inner shadow */
                                0 0 hsla(0,0%,0%,.9),          /* text color */
                                1px 1px hsla(0,0%,100%,.5);   /* drop shadow */

emanuer

.outset_text {  color:          hsla(0,0%,0%,0);                /* color reset */
                text-shadow:    0 0 hsla(0,0%,0%,.4),           /* text-color - combines with drop-shadow */
                                -1px -1px hsla(0,0%,100%,.8),   /* top left bright bevel - brighter than background */
                                1px 1px hsla(0,0%,0%,.2);}      /* bottom right drop-shadow - brighter than text-color */

emanuer

floating_box: {
  box-shadow: 0px 0px 0 1px hsla(0, 100%, 100%, 0.7),   /*white border around element*/
              1px 1px 0px 2px hsl(0, 0%, 92%),          /*gray 3D side*/
              2px 2px 0px 2px hsla(0, 100%, 100%, 0.5), /*white border below 3D side*/
              9px 9px 7px 0px hsla(0, 0%, 0%, 0.1);}    /*wide shadow — floating apprearance*/

emanuer

<div (scroll)="onScroll($event)">

emanuer

import {Component, ElementRef, AfterViewInit, QueryList, ViewChild, ViewChildren} from '@angular/core';

@Component({
  selector: 'app-something',
  templateUrl: '<section #fa1><div #fa1View></div><div #fa1View></div></section>',
  styleUrls: ['']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('fa1') fa1: ElementRef;
  @ViewChildren('fa1View') fa1Views: QueryList<ElementRef>;

emanuer

.slanted-container {
  position:relative;
}
.slanted-box {
  --slant: 20px;
  --border: 1px;
  --border-color: #4de;
  
  
  --diagonal: calc(var(--slant) * .7071067812);

emanuer

.slanted-svg {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><style>.strk {stroke:black;stroke-width:2px;vector-effect:non-scaling-stroke;} .slant{stroke-width:1px}</style><line x1='0' y1='0' x2='100' y2='0' class='strk'/><line x1='100' y1='0' x2='100' y2='90' class='strk'/><line x1='100' y1='90' x2='90' y2='100' class='strk slant'/><line x1='90.5' y1='100' x2='0' y2='100' class='strk'/><line x1='0' y1='100' x2='0' y2='0' class='strk'/></svg>");
}