Last active
August 29, 2015 14:24
-
-
Save elrumordelaluz/3fa8d1b221bb13ac141c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| <p class="tenue">hola</p> | |
| <div class="overlay"></div> |
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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // ---- | |
| @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100); | |
| @function do-shadow($steps: 111, $ratio: .005, $op: .85, $angle: -133deg, $color: #000, $bg: null){ | |
| $shadows: (); | |
| $n: 0; | |
| $b: 0; | |
| $steps: if($steps > 128, 128, $steps); | |
| @for $i from 1 through $steps { | |
| $s: $i*2-1; | |
| @if ($i > $steps - 11 and $i < $steps - 3){ | |
| $b: $b + .4px; | |
| } @else if ($i >= $steps - 3) { | |
| $b: $b + 1px; | |
| } @else { | |
| $b: $s * .1px; | |
| } | |
| // if $bg fade to this color | |
| $c: if($bg, | |
| rgba(mix($color, $bg, 100-($i/$steps*100)), $op), | |
| rgba($s, $s, $s, $op) | |
| ); | |
| // if even/odd | |
| $n: if($i%2 == 0, $n + 1, $n + 2); | |
| // do shadows | |
| $shadows: append( | |
| $shadows, | |
| // $n * $radio * -1em $i * $radio * -1em | |
| sin($angle) * ($n * $ratio * 1em) cos($angle) * ($i * $ratio * 1em) | |
| $b | |
| $c, | |
| "comma" ); | |
| } | |
| @return $shadows; | |
| } | |
| $bg: white; | |
| $color: black; | |
| body { background: $bg; } | |
| .tenue { | |
| // Basic style | |
| font-family: 'Josefin Sans', sans-serif; | |
| font-size: 150px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| text-shadow: do-shadow(); | |
| color:$color; | |
| // not necessary but could add: | |
| // mix-blend-mode: multiply; | |
| } | |
| .overlay { | |
| width: 100vw; | |
| height: 100vh; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-image: linear-gradient(to bottom, rgba(255,0,0,0) 0%, rgb(255,0,221) 13%, rgba(255,0,255,0.84) 15%, rgba(111,0,255,0) 25%, rgba(0,0,255,0.63) 33%, rgb(0,74,255) 38%, rgba(0,255,255,0.05) 49%, rgba(0,255,246,0) 50%, rgb(0,255,55) 63%, rgba(0,255,0,0.65) 67%, rgba(109,255,0,0) 74%, rgba(255,255,0,0.8) 84%, rgb(255,215,0) 86%, rgba(255,0,0,0) 100%), url(http://themes-pixeden.com/dev/public/texture.jpg); | |
| opacity: .15; | |
| mix-blend-mode: color; | |
| } |
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 url(http://fonts.googleapis.com/css?family=Josefin+Sans:100); | |
| body { | |
| background: white; | |
| } | |
| .tenue { | |
| font-family: 'Josefin Sans', sans-serif; | |
| font-size: 150px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| text-shadow: -0.00731em -0.00341em 0.1px rgba(1, 1, 1, 0.85), -0.01097em -0.00682em 0.3px rgba(3, 3, 3, 0.85), -0.01828em -0.01023em 0.5px rgba(5, 5, 5, 0.85), -0.02194em -0.01364em 0.7px rgba(7, 7, 7, 0.85), -0.02925em -0.01705em 0.9px rgba(9, 9, 9, 0.85), -0.03291em -0.02046em 1.1px rgba(11, 11, 11, 0.85), -0.04022em -0.02387em 1.3px rgba(13, 13, 13, 0.85), -0.04388em -0.02728em 1.5px rgba(15, 15, 15, 0.85), -0.05119em -0.03069em 1.7px rgba(17, 17, 17, 0.85), -0.05485em -0.0341em 1.9px rgba(19, 19, 19, 0.85), -0.06217em -0.03751em 2.1px rgba(21, 21, 21, 0.85), -0.06582em -0.04092em 2.3px rgba(23, 23, 23, 0.85), -0.07314em -0.04433em 2.5px rgba(25, 25, 25, 0.85), -0.07679em -0.04774em 2.7px rgba(27, 27, 27, 0.85), -0.08411em -0.05115em 2.9px rgba(29, 29, 29, 0.85), -0.08776em -0.05456em 3.1px rgba(31, 31, 31, 0.85), -0.09508em -0.05797em 3.3px rgba(33, 33, 33, 0.85), -0.09873em -0.06138em 3.5px rgba(35, 35, 35, 0.85), -0.10605em -0.06479em 3.7px rgba(37, 37, 37, 0.85), -0.1097em -0.0682em 3.9px rgba(39, 39, 39, 0.85), -0.11702em -0.07161em 4.1px rgba(41, 41, 41, 0.85), -0.12067em -0.07502em 4.3px rgba(43, 43, 43, 0.85), -0.12799em -0.07843em 4.5px rgba(45, 45, 45, 0.85), -0.13164em -0.08184em 4.7px rgba(47, 47, 47, 0.85), -0.13896em -0.08525em 4.9px rgba(49, 49, 49, 0.85), -0.14261em -0.08866em 5.1px rgba(51, 51, 51, 0.85), -0.14993em -0.09207em 5.3px rgba(53, 53, 53, 0.85), -0.15358em -0.09548em 5.5px rgba(55, 55, 55, 0.85), -0.1609em -0.09889em 5.7px rgba(57, 57, 57, 0.85), -0.16455em -0.1023em 5.9px rgba(59, 59, 59, 0.85), -0.17187em -0.10571em 6.1px rgba(61, 61, 61, 0.85), -0.17552em -0.10912em 6.3px rgba(63, 63, 63, 0.85), -0.18284em -0.11253em 6.5px rgba(65, 65, 65, 0.85), -0.1865em -0.11594em 6.7px rgba(67, 67, 67, 0.85), -0.19381em -0.11935em 6.9px rgba(69, 69, 69, 0.85), -0.19747em -0.12276em 7.1px rgba(71, 71, 71, 0.85), -0.20478em -0.12617em 7.3px rgba(73, 73, 73, 0.85), -0.20844em -0.12958em 7.5px rgba(75, 75, 75, 0.85), -0.21575em -0.13299em 7.7px rgba(77, 77, 77, 0.85), -0.21941em -0.1364em 7.9px rgba(79, 79, 79, 0.85), -0.22672em -0.13981em 8.1px rgba(81, 81, 81, 0.85), -0.23038em -0.14322em 8.3px rgba(83, 83, 83, 0.85), -0.23769em -0.14663em 8.5px rgba(85, 85, 85, 0.85), -0.24135em -0.15004em 8.7px rgba(87, 87, 87, 0.85), -0.24866em -0.15345em 8.9px rgba(89, 89, 89, 0.85), -0.25232em -0.15686em 9.1px rgba(91, 91, 91, 0.85), -0.25963em -0.16027em 9.3px rgba(93, 93, 93, 0.85), -0.26329em -0.16368em 9.5px rgba(95, 95, 95, 0.85), -0.2706em -0.16709em 9.7px rgba(97, 97, 97, 0.85), -0.27426em -0.1705em 9.9px rgba(99, 99, 99, 0.85), -0.28157em -0.17391em 10.1px rgba(101, 101, 101, 0.85), -0.28523em -0.17732em 10.3px rgba(103, 103, 103, 0.85), -0.29254em -0.18073em 10.5px rgba(105, 105, 105, 0.85), -0.2962em -0.18414em 10.7px rgba(107, 107, 107, 0.85), -0.30351em -0.18755em 10.9px rgba(109, 109, 109, 0.85), -0.30717em -0.19096em 11.1px rgba(111, 111, 111, 0.85), -0.31448em -0.19437em 11.3px rgba(113, 113, 113, 0.85), -0.31814em -0.19778em 11.5px rgba(115, 115, 115, 0.85), -0.32545em -0.20119em 11.7px rgba(117, 117, 117, 0.85), -0.32911em -0.2046em 11.9px rgba(119, 119, 119, 0.85), -0.33642em -0.20801em 12.1px rgba(121, 121, 121, 0.85), -0.34008em -0.21142em 12.3px rgba(123, 123, 123, 0.85), -0.34739em -0.21483em 12.5px rgba(125, 125, 125, 0.85), -0.35105em -0.21824em 12.7px rgba(127, 127, 127, 0.85), -0.35836em -0.22165em 12.9px rgba(129, 129, 129, 0.85), -0.36202em -0.22506em 13.1px rgba(131, 131, 131, 0.85), -0.36933em -0.22847em 13.3px rgba(133, 133, 133, 0.85), -0.37299em -0.23188em 13.5px rgba(135, 135, 135, 0.85), -0.3803em -0.23529em 13.7px rgba(137, 137, 137, 0.85), -0.38396em -0.2387em 13.9px rgba(139, 139, 139, 0.85), -0.39127em -0.24211em 14.1px rgba(141, 141, 141, 0.85), -0.39493em -0.24552em 14.3px rgba(143, 143, 143, 0.85), -0.40224em -0.24893em 14.5px rgba(145, 145, 145, 0.85), -0.4059em -0.25234em 14.7px rgba(147, 147, 147, 0.85), -0.41321em -0.25575em 14.9px rgba(149, 149, 149, 0.85), -0.41687em -0.25916em 15.1px rgba(151, 151, 151, 0.85), -0.42419em -0.26257em 15.3px rgba(153, 153, 153, 0.85), -0.42784em -0.26598em 15.5px rgba(155, 155, 155, 0.85), -0.43516em -0.26939em 15.7px rgba(157, 157, 157, 0.85), -0.43881em -0.2728em 15.9px rgba(159, 159, 159, 0.85), -0.44613em -0.27621em 16.1px rgba(161, 161, 161, 0.85), -0.44978em -0.27962em 16.3px rgba(163, 163, 163, 0.85), -0.4571em -0.28303em 16.5px rgba(165, 165, 165, 0.85), -0.46075em -0.28644em 16.7px rgba(167, 167, 167, 0.85), -0.46807em -0.28985em 16.9px rgba(169, 169, 169, 0.85), -0.47172em -0.29326em 17.1px rgba(171, 171, 171, 0.85), -0.47904em -0.29667em 17.3px rgba(173, 173, 173, 0.85), -0.48269em -0.30008em 17.5px rgba(175, 175, 175, 0.85), -0.49001em -0.30349em 17.7px rgba(177, 177, 177, 0.85), -0.49366em -0.3069em 17.9px rgba(179, 179, 179, 0.85), -0.50098em -0.31031em 18.1px rgba(181, 181, 181, 0.85), -0.50463em -0.31372em 18.3px rgba(183, 183, 183, 0.85), -0.51195em -0.31713em 18.5px rgba(185, 185, 185, 0.85), -0.5156em -0.32054em 18.7px rgba(187, 187, 187, 0.85), -0.52292em -0.32395em 18.9px rgba(189, 189, 189, 0.85), -0.52657em -0.32736em 19.1px rgba(191, 191, 191, 0.85), -0.53389em -0.33077em 19.3px rgba(193, 193, 193, 0.85), -0.53754em -0.33418em 19.5px rgba(195, 195, 195, 0.85), -0.54486em -0.33759em 19.7px rgba(197, 197, 197, 0.85), -0.54852em -0.341em 19.9px rgba(199, 199, 199, 0.85), -0.55583em -0.34441em 20.3px rgba(201, 201, 201, 0.85), -0.55949em -0.34782em 20.7px rgba(203, 203, 203, 0.85), -0.5668em -0.35123em 21.1px rgba(205, 205, 205, 0.85), -0.57046em -0.35464em 21.5px rgba(207, 207, 207, 0.85), -0.57777em -0.35805em 21.9px rgba(209, 209, 209, 0.85), -0.58143em -0.36146em 22.3px rgba(211, 211, 211, 0.85), -0.58874em -0.36487em 22.7px rgba(213, 213, 213, 0.85), -0.5924em -0.36828em 23.7px rgba(215, 215, 215, 0.85), -0.59971em -0.37169em 24.7px rgba(217, 217, 217, 0.85), -0.60337em -0.3751em 25.7px rgba(219, 219, 219, 0.85), -0.61068em -0.37851em 26.7px rgba(221, 221, 221, 0.85); | |
| color: black; | |
| } | |
| .overlay { | |
| width: 100vw; | |
| height: 100vh; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, #ff00dd 13%, rgba(255, 0, 255, 0.84) 15%, rgba(111, 0, 255, 0) 25%, rgba(0, 0, 255, 0.63) 33%, #004aff 38%, rgba(0, 255, 255, 0.05) 49%, rgba(0, 255, 246, 0) 50%, #00ff37 63%, rgba(0, 255, 0, 0.65) 67%, rgba(109, 255, 0, 0) 74%, rgba(255, 255, 0, 0.8) 84%, gold 86%, rgba(255, 0, 0, 0) 100%), url(http://themes-pixeden.com/dev/public/texture.jpg); | |
| opacity: .15; | |
| mix-blend-mode: color; | |
| } |
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
| <p class="tenue">hola</p> | |
| <div class="overlay"></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment