The post card with gradient background
Thumbnail

PugSCSS
a.uk-display-block.uk-background-cover.uk-position-relative.background-gradient(data-src=k.src style='padding-top: calc(302 / 375 * 100%)' href=k.href uk-img) .uk-position-top-left(style='top: 15px;') span.text-default-xl.text-small.text-white.uk-position-relative(style='background-color: red; padding: 2px 15px 2px 22px;') sapn.uk-position-relative(style='z-index:5')=k.text span.uk-position-center-right(style='right:-10px;width:20px;height:100%;background-color: red; transform: translateY(-50%) skewX(-20deg);z-index:1;') .uk-position-bottom-left(style='z-index:5') .uk-padding-default p.text-xxxlarge.text-white(style='padding-top:11px;')=k.title
.background-gradient { position: relative; &:after { content:''; @include pos-a('','',0,0,100%,50%,1); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0)); } }
Tags:
- gradient
- /