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="196" height="196"><path d="M60.2 158c5.3-2.6 11.6-4.4 14.6-10 2.2-3.2 3.3-8 6-10.3.8 3.8-2 7-3 10.5 4-.4 5.5-5.4 7.6-8.4 2.7-2.6 2.4 8 5.8 3.2 4-2 9-1 13.2-2.3 4.5.6 8.7-1 12.2-4 3.7-2.7 9-3.3 11-8 2.3-4.5 6.6-7 10-10.5 2.7-3.2 3.7-7.3 6.7-10.3 0-2-.7-4.2-.8-6-3 1.2-3.3 3.7-1.2 6 .5 2.6-4.2-1-5.4 1.6-2 2.2-4.8 4.6-7.8 3.3-2.6 2.2-7.3 5.3-9.7 2.3-.8 2.5-3.6 4-4.6.8-4-1-6 4.4-10 4.6-3-2-8.3 3.8-9.7-.3 2-2.3 1.7-8-2.5-5-4 .2-.5-3.3 1.6-3.2 4-2.2 7-6 10.7-8.6-2.5-1.5 1-8 3.4-5.6-.7 1.5-2 4.6.4 2 2-2.7 5-6 4.8-9.3-1.8.5-4-.6-1.3-1.6 4-1.2 5.2-5.5 7-8.8 2.6-4.6-4-.3-6 .4-4 1.5-7.5 5-11.3 7.5 2.3-.2 9.8-1.6 5.4 2-2.2 3.2-3 7.3-6.4 9.5-4.5 1-1.3 9-7.2 8.2-2.5 1.7-10 1.8-6.3-2.4-1-2.3-3 3.2-5 3.5-4 2.3-8.5 4.2-11.8 7.7-3.3 2-3 6.6-6.4 7.8-.5 3.2 6-2.2 4.2 2.5-2.4 2.8-5.7 5.3-6 9-.8 2 4 4.8 0 4.5-3.4 1.8-5.2 5.4-3.4 8.8.2 3.3-4.8 9-.5 10.6.8-.2 1.4-.8 1.7-1.6zm31-24.6c.7-2.6.4 3.2 0 .3v-.2zm-18-4c-1.7-4.2 4.5 2.5.2 0zm3.4-3.3c-.3-4 3.7.2.4.8l-.4-.7zm-7.4-5c1-3.8 4.6 1.6.6 1.7-1.6.8-1.8-1-.6-1.7zm8.8 0c-3-3.2 7-6.2 2.8-2-.4 1-1.4 3.3-2.8 2zm2.6-7.6c-1.3-6 3.2 3.4 0 0zM38.8 154c3.2-1 3-8.4-1-5-.8 1.7-1.5 7-3.8 3-4 .5 2.7 10.4 3.7 4 .3-.8.5-1.5 1-2zm13.5-2.6c3-1.8-.8-4-2-1-2.3 2.6.4 4.8 2 1zm-1.6-5.4c3.6-3 1.2-7.5.4-11 1.2-2.4.8-6.3-2.7-4-3.6 1.6-1.6 7.3-5.6 8.3 4.4-2.4 7.8 4.2 4 7-2.3 1.5-.6 9.5.8 4.2.7-1.7 1.4-3.7 3.2-4.5zm7.3-13.3c-3.4-2.3-3 7-.8 2l.8-2zm5-6c-2.4-.6-4.4 6-1.4 2.2.6-.8 1.2-1.4 1.4-2.3zm-4.5 2.3c-1-3.3-1.8 3 0 0zm-38-3.3c-2-3 6.8-4.7 2-6.4-3.3 1.3-6.6 6.4-2.4 8.5 1-.2.6-1.5.5-2zm27.5.5c.3-3.5-4-1.4-1.4.6.6.4 1.4 0 1.4-.6zm-31-5c2-2.4 2.3-7-1-8.4 2.5 3.8-3 10-1 12.2 1-1.2.8-3 2-4zm7.5-3c-.5-5.3-2.6 3 0 0zm16.6-1c1.3-2 0-4.3-1-1.8-3.7 1.5-.5 4.7 1 1.7zm20.3-4.2c-1.7-5.3-6 3.7-1 2.4 1.2 0 1.6-1.6 1-2.4zm60.4.8c-2 1 1.4 2.2 0 0zM27 110.6c-1-1.5-.5-7.4-3-3.7-3.3 2.7 3 10.2 3.6 4.3 0-.3-.4-.5-.6-.7zm-2 1.4c1.7-4.3 1.4 2.5 0 0zm21.7-1.5c.2-3.4-3.3.8-1.4 2 .7 1.2 2-1.4 1.4-2zm16 .3c-2 1 1.4 2.2 0 0zm-27.5-1.3c2.8 2.3 11 .2 8-4 .2-1.6 0-4.5-1.4-1.7 0 2.5-3.8 6.7-3.4 1.7-2.3-5-10.5-1.5-9.4 3.5 1.4 4 4.2-.5 6.2.5zm-18-5c1-4.3-4-.2-3 2-1 1.4-6 5.5-1.4 3 2-1 4.4-2.5 4.4-5zm50 3.3c5.4-4.3 8-11 13-15.6 2-3.2 6.5-6.2 7-9.5-2-2.7 3.8-6 5.8-8.3 4.4-2.2 6.7-10.8 10.6-13.3 2.5 1.4 5.8 2.6 8.5 6-2.7 1.3-13.7 7.8-8 9.6 1.5 1.5 1.8 5.8 4 2 1.4-1.4 5.4-7 1-4.7-2.8.3 3.5-2 3.8-3 1.4-1 4.5-5.4 5-1.8 2.2-.5 4.3-2.5 6 .8 3.6 4.3 4.7 11 10.3 13.4 2.8 1.2 5.2 2.8 7.4 4.8 4.3 2.8 8.7 5.5 12.6 9 2 4.7 7.5 5.2 12 5.4 4.3.6 8.5 2.3 13 2.6 3.4 1.5 10.2-2.5 10.4 3-.6 4-1 8-2 12-5.2 22.3-21 41-40 53.2-16.6 10.8-36.8 17-56.7 14.4-28.6-3-56.3-19.4-70.4-45-7-12.6-10.7-27.2-11-41.8 3.3-2.2 10.2-5.4 12.5-.5.5 5.3 5.6 2.7 8.4 1 3-1 2.5-4 1.2-5.5 1-2.5 7.4-4.2 7.5-.5-5.4 0-3 10.4 1.2 5.4 3-1.8 3.5-5.6 6.7-7 1-2.6-.8-6.4 3.2-7.3 4-.3 6.3-4.6 10-5 4.2 1 4.2 9.4 9 5.3 2.6 1.8 0 6.3-2 8-3 2.3-4.2 5.7-1.8 8.8 1 4.4-4-2.6-4 2-.2 4.6 3 2 5.8 2zM25.5 102c2.2-3.8 1 3 0 0zM76 86.5c.6-3.6 2 1 .4 1l-.2-.3zm3-.2c.3-1.5 5.2-7.4 2.7-3-.5 1-1 3.8-2.7 3zm6-7.5c1-2.6-4.8-4-1.6-6.2C85 68.8 89.8 67 93 65c3.7-.5 1.5 2.7-.8 2.3-2.5 1.5-.8 4.4-4.2 5-3 2 1.4 6-2.6 7.5l-.2-.2zm8-8.2c1.7-4 3.5 1 0 .2zm27 37.4c-1.6-2.7-1 3 0 0zm-28-4c-1.3-4.7-4.5 4.5-.4 1.3.3-.4.4-1 .4-1.4zm-45 0c1.8-4.7 7.3-7 8.2-12 1.8-2.6-1.5-4.2-2-1-1.7 4.3-8.2 6.3-8.7 10.5.6 1 1.3 5.5 2.5 2.4zm92-.5c.2-3.6-4.2 3.8 0 0zm-89.5-.5c-1.3-3.7-1.4 3.2 0 0zm45.5-1.5c-2-5-2 4.6 0 0zm41.7-5.7c-2 1 1.4 2.4 0 0zm-33-1.7c2.2-5-6.8 2-.8.8l.3-.3zm-9-9.2c4.5.5 4-10.3-.2-6 0 4.2-2.8 7.6-6.3 9.6-1.8 1.5-1 5 1 1.7 1.6-1.8 3.2-4 5.5-5.2zm42 6c-2 1 1.4 2.4 0 0zM104 81c-.4-3.4-3.3 0-1 .8l.5-.2zm17.8-7.6c-2.3-2-6.6 5-2 2.4 1-.6 1.8-1.3 2-2.4zm-24 0c-2.6-1.5-3 1.8 0 0z" fill="#fff"/></svg> |