dailyUI - 02: PreOrder
codepen: http://codepen.io/Rplus/details/dGjZPY
image source:
inspired from day075 PreOrder by Wesley Hwang
dailyUI - 02: PreOrder
codepen: http://codepen.io/Rplus/details/dGjZPY
image source:
inspired from day075 PreOrder by Wesley Hwang
<!DOCTYPE html> | |
html(lang="en") | |
head | |
meta(charset="UTF-8") | |
title [illusion] Penrose hug | |
meta(name="viewport", content="width=device-width") | |
link(rel="stylesheet", href="style.css") | |
body | |
h1.intro dailyUI - 02 | |
small PreOrder | |
.order-box | |
.order-info | |
h2.order-title I am Taiwanese | |
.order-subtitle I stand for | |
.ib Taiwan's Independence. | |
.order-icons | |
.icon | |
.icon | |
.icon | |
.icon | |
a.order-button(href="###") stand out | |
.order-img | |
blockquote.info | |
| inspired from <a href="https://www.facebook.com/groups/895693593842577/permalink/941966625881940/?comment_id=945056122239657">day075 PreOrder</a> by <a href="https://www.facebook.com/wesleyweazin">Wesley Hwang</a> | |
script(src="js.js") |
/* global CSS */ | |
let isSupportCssFilter = CSS.supports('-webkit-filter', 'blur(1px)') || CSS.supports('filter', 'blur(1px)'); | |
if (!isSupportCssFilter) { | |
let div = document.createElement('div'); | |
div.innerHTML = `<svg class="sr-only"><filter id="blur"><feGaussianBlur stdDeviation="${document.documentElement.clientWidth * 2.5 / 100}"/></filter></svg>`; | |
document.getElementsByTagName('body')[0].appendChild(div.firstElementChild); | |
} |
$colors: #fe0190, #9869b7, #21e4e6; | |
$bgcs: #94abd5, #f7faff; | |
$svg-base: "https://rawgit.com/rplus/d36646d8b5788d6df704/raw/"; | |
.order-box { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate3d(-50%, -50%, 0); | |
width: 66.6%; | |
border-radius: .6vw; | |
background-color: nth($colors, 2); | |
background-image: | |
radial-gradient( | |
circle at 95% 15%, | |
nth($colors, 1) 5%, | |
nth($colors, 2) 45%, | |
nth($colors, 3) 100% | |
); | |
box-shadow: | |
0 60px 120px -30px rgba(darken(nth($bgcs, 1), 10%), .5), | |
0 60px 150px -10px rgba(darken(nth($bgcs, 1), 20%), .2); | |
&::before { | |
content: ""; | |
display: block; | |
visibility: hidden; | |
padding-bottom: 3/8 * 100%; | |
} | |
} | |
.order-img { | |
position: absolute; | |
top: 0; | |
left: 5%; | |
width: 30%; | |
background: url("#{$svg-base}鯨魚旗.svg") no-repeat 0% / contain; | |
transform: translate3d(0, -15%, 0); | |
transition: all .5s; | |
&::after { | |
content: ""; | |
display: block; | |
padding-bottom: 130%; | |
background: inherit; | |
opacity: .25; | |
transform: translate(5%, 5%) scale(.95); | |
filter: url("#blur"); | |
// when native CSS blur supports | |
// overwrite the blur effect in svg polyfill | |
@supports (filter: blur(1px)) { | |
opacity: .7; | |
filter: blur(2.5vw); | |
} | |
} | |
@media (max-width: 560px) { | |
width: 40%; | |
transform: translate3d(50%, -30%, 0); | |
} | |
} | |
.order-info { | |
position: absolute; | |
left: 40%; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
padding: 5%; | |
font-weight: 100; | |
font-family: Lato, sans-serif; | |
color: #fff; | |
@media (max-width: 560px) { | |
position: relative; | |
left: 0; | |
margin-left: 20%; | |
padding-bottom: 2em; | |
} | |
} | |
.order-title { | |
font-size: 4vw; | |
margin-bottom: .3em; | |
text-indent: -.1em; | |
} | |
.order-subtitle { | |
margin-bottom: 1.5em; | |
font-size: 1.75vw; | |
opacity: .5; | |
} | |
.order-icons { | |
font-size: 3.5vw; | |
cursor: default; | |
} | |
.icon { | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
margin-right: .1em; | |
padding: 1%; | |
border-radius: 50%; | |
box-shadow: 0 0 0 .05em rgba(#fff, .25); | |
background: no-repeat 50% / contain; | |
background-clip: content-box; | |
opacity: .8; | |
transition: opacity .3s, transform .3s; | |
&:hover { | |
opacity: 1; | |
transform: scale(1.1); | |
} | |
&:nth-of-type(1) { background-image: url("#{$svg-base}台灣.svg"); } | |
&:nth-of-type(2) { background-image: url("#{$svg-base}台灣玉山.svg"); } | |
&:nth-of-type(3) { background-image: url("#{$svg-base}台灣鄭南榕.svg"); } | |
&:nth-of-type(4) { background-image: url("#{$svg-base}台灣黑熊.svg"); } | |
} | |
.order-button { | |
position: absolute; | |
right: 6%; | |
bottom: 0; | |
transform: translate3d(0, 33.3%, 0); | |
width: 70%; | |
padding-top: .7em; | |
padding-bottom: .7em; | |
border-radius: 10em; | |
font-size: 2.25vw; | |
font-weight: 900; | |
text-align: center; | |
text-transform: capitalize; | |
color: mix(nth($colors, 1), nth($colors, 2), 75%); | |
text-decoration: none; | |
background-color: #fff; | |
box-shadow: | |
0 30px 80px -15px rgba(darken(nth($bgcs, 1), 10%), .5), | |
0 15px 80px -15px rgba(darken(nth($bgcs, 1), 20%), .2); | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
margin: 0; | |
} | |
body { | |
position: relative; | |
height: 600px; | |
min-height: 100vh; | |
margin: 0; | |
background-color: #ffd; | |
background-image: | |
radial-gradient( | |
circle at 100% 50%, | |
nth($bgcs, 1), | |
nth($bgcs, 2) | |
); | |
} | |
.intro { | |
width: 80%; | |
max-width: 30rem; | |
padding-bottom: 1rem; | |
margin: 0 auto 1em; | |
padding-top: .5em; | |
color: #fff; | |
text-shadow: 1px 1px rgba(#000, .3); | |
text-align: center; | |
text-transform: capitalize; | |
border-bottom: 1px dashed #fff; | |
small { | |
display: block; | |
opacity: .5; | |
font-style: italic; | |
text-transform: none; | |
} | |
} | |
.info { | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
margin: 0; | |
padding: 1em; | |
font-size: .9em; | |
font-style: italic; | |
font-family: serif; | |
text-align: right; | |
color: #666; | |
opacity: .5; | |
transition: opacity .3s; | |
&:hover { | |
opacity: 1; | |
} | |
a { | |
color: inherit; | |
} | |
} | |
.sr-only { | |
position: absolute; | |
width: 1px; | |
height: 1px; | |
padding: 0; | |
margin: -1px; | |
overflow: hidden; | |
clip: rect(0, 0, 0, 0); | |
border: 0; | |
} | |
.ib { | |
display: inline-block; | |
} |
<svg xmlns="http://www.w3.org/2000/svg" width="194.1" height="195"><path d="M88.6 168.4c-.3-6.3-1.5-13.5-7-17.5-2.8-1.7-5.8-3.3-7.6-6-3-4.2-4.3-9.3-5.6-14.2-4-3.7-5-9.6-3.7-14.7.7-3 2-6 2.5-9.2 1.4-7.6 3.4-15.3 8.3-21.4 3.5-5.3 6.8-10.8 9.3-16.6 2-6.4 9.3-9.3 11-15.8 2-6 8-10.2 14.2-11.5 3.4-2.3 6.3-6.3 10.8-6.3 3.4.6 5.3 4 8.6 5.4 2.6 1.6 6 4.8 4.2 8.2-1.8 2.5-4.4 4.7-3.8 8.2.2 4.4 2.2 9.4-.8 13.4-4 6.4-6.7 13.8-7.5 21.3-2.6 10.7-3.2 22.3-9 32-3 6.6-7.3 12.5-12.4 17.7-5.4 8.3-1.8 19-6.5 27.6-1.2 1.7-4.2 1.5-5-.6zm29.6 0c-1.3-1.2-1.8-4.5.6-2.6 2 1 2 3-.6 2.5zM116 141c2-3.8 2 3.3 0 0zM38 99.5c3.6.6 1.8 6-1.3 5.3-1.8-.8-1.3-7 1.3-5.3z" fill="#fff" /></svg> |