-
Notifications
You must be signed in to change notification settings - Fork 76
/
Copy pathstamp.css
74 lines (65 loc) · 2.25 KB
/
stamp.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
black(alpha)
rgba(0,0,0,alpha)
white(alpha)
rgba(255,255,255,alpha)
body
min-height: 400px
height: 100vh
position: relative
background-color: linen
text-align: center
div
position: absolute
left: 50%
top: 50%
&::before,
&::after
display: block
content: ''
position: absolute
@media (max-width: 400px)
&:not(.no-scale)
transform: scale(.8)
#stamp
width: 250px
height: 350px
margin-left: -(@width/2)
margin-top: -(@height/2)
background: radial-gradient(ellipse, white(.2) 10%, white(0) 40%) 50% 110% / 120% 40%,
linear-gradient(to right, darken(wheat,10), alpha(wheat,0) 25%) 50% 100% / 94% 50%,
linear-gradient(to left, darken(wheat,10), alpha(wheat,0) 25%) 50% 100% / 94% 50%,
linear-gradient(to bottom, wheat, darken(wheat,17)) 50% 100% / 94% 50%,
linear-gradient(lightskyblue, lightskyblue) 50% 15% / 85% .5%,
linear-gradient(#ccc, #ccc) 50% 10% / .25% 60%,
repeating-linear-gradient(to bottom, #ccc, #ccc .5%,
white(0) .5%,
white(0) 10%) 50% 41% / 85% 50%,
linear-gradient(to bottom, white 30%, #eee) 50% 40% / 85% 40%,
linear-gradient(40deg, white 96%, white(0) 96.1%) 50% 10% / 85% 60%,
linear-gradient(to right, black(0), black(.2) 6%) 19% 15% / 70% 60%,
linear-gradient(to left, black(0), black(.2) 6%) 81% 25% / 70% 60%
background-repeat: no-repeat
box-shadow: 0 .8em .4em -.65em black(.1)
&::before,
&::after
font-family: Courier New, mono
font-weight: bold
font-size: 1.2em
color: #444
text-transform: uppercase
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
&::before
content: 'Jun 20 1990'
top: 22%
left: 11%
transform: rotate(-2deg)
background-image: linear-gradient(45deg, transparent 50%, #999, #888, #333, #444, #999, #ddd)
text-shadow: .1em 0 0 black(.5)
&::after
content: 'Apr 14 1990'
top: 30%
left: 20%
transform: rotate(5deg)
background-image: linear-gradient(30deg, #ccc, #999, #444, #999, #bbb, #777, transparent 70%)
text-shadow: .07em 0 0 black(.3)