emanuer
emanuer
/ center-middle
Last active
December 15, 2015 07:40
3 elements — needs 2 wrap elements: .table_wrap --› (child-node) .center-middle_wrap --› (child-node) .target-element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .table_wrap { display:table; } | |
| .center-middle_wrap { display:table-cell; text-align:center; vertical-align:middle; } |
emanuer
/ inset_text
Last active
December 15, 2015 07:48
text gets an "inset" style resets the color of the text only for modern browsers > ie8
the order of the text-shadow properties is essential: "inner shadow" -› "text color" -› "drop shadow"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
Last active
December 16, 2015 12:59
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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
Created
February 18, 2014 10:31
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ detect-scroll-to-bottom.html
Last active
April 30, 2017 06:02
Detect if user scrolled to the bottom of an element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div (scroll)="onScroll($event)"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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-box.css
Last active
February 12, 2019 10:18
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .slanted-container { | |
| position:relative; | |
| } | |
| .slanted-box { | |
| --slant: 20px; | |
| --border: 1px; | |
| --border-color: #4de; | |
| --diagonal: calc(var(--slant) * .7071067812); |
emanuer
/ slanted-svg.css
Created
February 12, 2019 10:17
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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>"); | |
| } |