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="182" height="195.9"><path d="M40.4 168.5c-.4 5 6.6-1.5 2-2.5-1.5-3.6 9.4-1.2 4-4-3-1.2-10 2.3-9.7-2.6-.2-1 .4-5.7-.3-4.3-.7 2.3-3.4 5-2.4 1-2-3.7-6.3-8-.2-10.6 3.7-3.7 2.8-9.2 4-14 1-7 1-14.5 3.6-21.3 4.6-9.4 14-15.6 23.5-19.4 3.4-2 11-5 6.6-10-3.8-2.7-7.4-6.3-8.3-11.2-1.7-8.4-4.5-17.8.2-25.8 4.2-7.4 10.6-15 19.8-15.4 4.2 0 8.8-.8 12.7 1 5.6.8 11.4 2.5 13.8 8 3.3 5.8 8 11.5 7 18.5-.5 5-.7 11-4.5 14.3-2.7-1.2-.4-6.5-2.6-9-1.5-3.3 1-11.8-5-8.4-2 2.2-7.5 10.2-.7 7.6 5 .2-2.6 5.3 3 4.8 5 1.2-4 4.3-6 2-2.6-1-5-5.5-6.4-.3-1.2 2.5-1 4.2 1.6 4.2-.7 2-5.8 3.3-1.8 5.8 3 .6 7.8 1.5 4.3 5.4.8 1.6 8 2 3.3 3.8-2.7 0-6-.5-4.3 2.8-2.6 3.4-11.3-4.8-9 2.5 3.5 2.4 8.4 2.4 12.4 2.6 4.5-.2 5.8-9.6 9.7-6.3 0 5-3.5 9.5-3 14.5 2 3 8.8 1.6 4 5.6-2.4 3.5-6.5 5-9.6 7.6-3.3 3.6-5.7 8.5-10.6 10.3-1.7-4.3 5.3-6.6 7.3-10 3-3 8.8-4.3 7.6-9.6 0-2.8-2-5.8-3.8-1.8-4.5 4-7.4 9.4-12 13.2-4 2-8.7-2-12.6 2-5.3-4-12-4-17.2-8-5.8-2-2.8-8.4-.2-12 2.2-2.3 3-8-1.5-4.5-8 4-15.5 11.2-17.2 20.6-1.6 9-1.5 18.3-4.8 27-.3 7 10-1 10 4.8-2.6 4-8.3-.7-12.3 1-2.5 2.6 5 3 7.4 2.5 2.5-1.3 7.8 1.8 2.6 1.2-5.3-.4 6.7 2 8.5 4.8 4 5.7 6-1 13-.3 6-.4 12 2.7 18.2 3.7 8 1.6 16-.3 24.2 0 4.5-1.5 6.4 3 10.7 3.2 5 0 10.2.5 15.2 1.3 4.5-2.7 2.8-8.8 5-12.8 1-4.4 5.4-11.4 0-14.3-5.4-1.5-11.7-2.3-17 .5-2.8 2.6-3.4 10-9.5 8.2-12.8 1.7-25.5 5.3-38.5 4.8-1.8-2.2 7-1.5 9.6-2 4-1 12.6 1 12.7-4 0-4.3 11.2-7.3 6.5-1.2-3.6 4.4 5 1.6 4-2 3-5 10-4.7 15-6 8.2-2 17.3-1.3 24.7 2.8 5.7-.3 1.7-8.7 2.6-12.7-.7-9.8-.8-19.8-3-29.3-1.3-5.7-6.4-9.3-12-10-5.7-1.2-11.6-1-17.4-1.7-4 0-3.4-10-.7-4.4 4.4 3.8 11 2 16.2 3.5 6.4 1 13 5 14.6 11.6 2.4 7.6 2.7 15.4 3.7 23 .7 7 1.4 14 1 21-2 5-9.7 5.5-10 11.8-1.7 4.5-2 10-5.4 13.7-4 2.7-9 3-13.5 4.4-14.3 3-28.7-1-42.8-3.2-4.7-.6-9.4-2-14-1.6-6.2 1.2-6 9.5-11.3 11.3-6.5 2-10-4.4-15.2-6.3-3.5-1.3-10-2.7-11.2-4.8 1.2 3.5 12-8 12 3zm13.3 5.6c0-3.5-7.4-1.3-2.2.3.5.5 2 1 2.2-.2zm1-6.6c1-3.7-4.7 4 0 0zm-16.3-1c-.8-4-7.4 2.5-1.8 1 .7 0 1.6 0 1.8-1zM52 159c-3-3.3-10.2-3-13.3-.5 3.6 2.6 9.6 1.6 13.4.5zm65.7-15c-2.3-3.4-9 1.7-2.8 1 1 0 2-.4 2.7-1zm-38-32c-4.2-2.3-9-5-6.4-10.4-1.4 2-6 8-1.6 10.6 2.6 1.3 9 3 9.8 1.2l-1.8-1.5zm-12-4c0-6.4-.6-14 4.8-18.5 0-5-6.6 4-7.6 6.2-1 4.6-8 9-4.3 13.7 2 1.3 6 1.4 7-1.4zm14.6.2c1.3-2.3 0-6.6-2-4-6-3-2 9.2 1.8 4.7zm-4-21.4c-1.6-2.2-1-9.8-3.7-8.2.7 3.5 1 10.8 4.3 11.3 0-1.2-.3-2.2-.8-3.2zm8.3-2.3c2.4-1.3 11.3-1 5-4.4-3.6-3.3-10.7 2.7-6.4 5.6l.6-.3zm-1.2-7.2c-2.8-1.6-2 2.3 0 0zm-16-2.8c-4-4.2.7 6.8 0 0zm21-2c5.3-4.3-4-1-6.4-2.4-4-1.6-6.6 1.4-9.8-2.5-2.4 4.2 4 6.3 7.3 6.3 3 1 7 1.7 9-1.4zm-.2-5.6c-1-3-1.7 2.8 0 0zm11-30.5c-.6-5.5-5.2 5.3-.3 2.5.3-.7.3-1.6.3-2.5zm-3.5.8c-2.3-2.6-1 4.3 0 0zm-2-2.7c-3.2-.7-.7 5.2-.2.7 0-.2 0-.5.2-.7zM92 35c-.5-4.6-2.7 5.3 0 0zM53.2 149c-3.7.2-.7-3.8 1.4-1.4 8 1.6 1.5-7.6 4-11.5 1.5.6 5.2 2.3 6.5-1.4 4.7-2.3 1.8 2.7.6 3.5 3.7-2.6 9.5-7.7 13-7.2-3 4-8.3 6.5-11.3 10.6 2.8-2.3 7 0 2.7 2.3-4.3.8-8.7 1.3-11.2 5.2-1.8.8-3.8.3-5.6-.3zm20.2-2c.4-5.7 7.6-3.5 11.4-4.3 2.5-2 11.5-2.7 7 2-4 2.7-9 2-13.7 2.5-1.5 0-3 0-4.6-.3zm26.3-72.5c-2.5-1.8-.6-5 1-1.6 3.3 1 3.7 7 0 3.2l-.5-.7z" fill="#fff"/></svg> |