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="200" height="200"><path d="M51.6 87.5c3-16.5 3.5-21 3-27.2-1-9.7 0-13 4-15.5 4.2-2.6 6.4-2.5 10.6.3 3.4 2.4 3.4 2.4 7.5.6 6.4-2.7 17.7-4 28.5-3.3 9.2.6 9.8.5 13.4-2C121 39 123.8 38 126 38c4 0 8 2.3 8 4.6 0 .7.6 1.4 1.2 1.4 1 0 1 2.3.6 8.2-.7 9-2 3.7 13.5 56.3l13.5 45.6c-25.7 38.3-90.3 42.7-125.6 10.8zm61 39.8c3.3-2 6.3-4.2 6.6-4.8.4-.5 1-.7 1.7-.3 1.2.8 10-9 11.8-13.4l3-7c1.4-2.7 1.8-6.4 1.7-17 0-7.5-.5-14.6-1-16-1-2-1-1.5-.7 3 1.7 18-7 32.3-25.5 41.6-6.7 3.4-14.4 9-17.7 13l-2.5 3-5.6-5.6c-3.2-3-8.3-6.8-11.3-8.3-7.4-3.8-15.7-11.2-18-16l-1.8-4.2v3.5c-.2 4 3.6 12.7 6.3 15 1 1 1.3 1.5.5 2-.7.5 1 2.6 4.7 5.6 9.8 8.3 16.2 15.3 20 22l3.5 6.3 9.2-9.3c5-5 12-11 15.2-13zm-22.3-20.7c2-.6 5.5-2.5 7.5-4.3 3.4-3 3.6-3.5 3.7-9 0-7.2-3-13.3-9.6-19-5-4-9.2-5.5-13.3-4.4-5.4 1.4-5.6 3-.4 2.4 11-1.6 15 7.3 4.5 10-1.5.3-2.7 1.3-2.7 2.2 0 1.4 0 1.4-1.2 0-.6-1-2-1.8-2.7-2-1-.5-1-.7.4-.7 2.2-.2 1.8-2-.6-3.6-1.3-1-2-.8-2.7.4-.5 1-1 1-1 .2 0-3-2-.7-3.5 4-3 10 0 18.3 8.5 22.8 4.2 2.2 7.8 2.5 13.3.8zm-4.7-27c1.2-1.7-1.2-3.3-3-1.8-.8.7-1.5 1.6-1.5 2 0 1.4 3.8 1.2 4.6 0z" fill="#fff" /></svg> |