I have the following code that I took from http://cssdeck.com/labs/pure-css3-smooth-ribbon-with-borders
The HTML Code is:
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
The CSS Code is:
#ribbon {
width: 180px;
height: 280px;
margin: 0px;
position: relative;
overflow: hidden;
}
#ribbon .inset {
width: 200px;
height: 55px;
position: absolute;
top: -50px;
left: -10px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
#ribbon .container {
position: relative;
width: 100px;
height: 250px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 200px;
width: 100px;
background: rgb(199,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 6px;
height: 242px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 86px;
left: 7px;
height: 242px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
left: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#ribbon .right_corner {
width: 100px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 20px;
right: -50px;
z-index: 1;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
I want to increase the width (to 250px) and decrease the height (to 140px) of the ribbon.
how can i do this?
i am still studying CSS.
I also want to insert an image on top of the ribbon that is formed by the above coding.
Please help!
Here you go bro :) Check the DEMO1
DEMO2
#ribbon .base {
height: 140px;
width: 250px;
}
Have changed the .left_arrow and .right_arrow values to make it fit. Check it on Fiddle and ask me if you want any clarifications.
Width 250px and height 140px is done..
See this fiddle
HTML
<div id="ribbon">
<div class="inset"></div>
<div class="container">
<div class="base"></div>
<div class="left_corner"></div>
<div class="right_corner"></div>
</div>
</div>
CSS
#ribbon {
width: 350px;
height: 280px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
#ribbon .container {
position: relative;
width: 250px;
height: 140px;
overflow: hidden;
margin: 0 auto;
border-left: 1px solid #631a15;
border-right: 1px solid #631a15;
}
#ribbon .base {
height: 80px;
width: 250px;
background: rgb(99,59,60);
background: -moz-linear-gradient(top, rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
background: -webkit-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -o-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: -ms-linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
background: linear-gradient(top, rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );
position: relative;
z-index: 2;
}
#ribbon .base:after {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 6px;
height: 132px;
border-left: 1px dashed #631a15;
border-right: 1px dashed #631a15;
}
#ribbon .base:before {
content: '';
position: absolute;
top: 0;
width: 234px;
left: 7px;
height: 132px;
border-left: 1px dashed #da5050;
border-right: 1px dashed #da5050;
}
#ribbon .left_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
left: -45px;
z-index: 1;
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(145deg);
}
#ribbon .right_corner {
width: 150px;
height: 100px;
background: #b8201f;
position: absolute;
bottom: 15px;
right: -45px;
z-index: 1;
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
#ribbon .inset {
width: 400px;
height: 55px;
position: absolute;
top: -50px;
left: -20px;
z-index: 5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0,0,0,0.3);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}
Related
I have wasted 2 days to create a shadow effect like here.
You see, the front white buttons look not flat, don't know how to describe. I bet this is because of box shadow effect, inset or something like that. But I can't make the same.
Can anyone help to make such a button with the same design, effect?
My example
.button {
background-size: 400% auto;
background: linear-gradient(to top right, rgb(247, 212, 167), #eef2f3);
border-radius: 7%;
box-shadow: inset 4px -4px 1px 1px rgb(252, 205, 144), inset -4px 4px 1px 1px white, -15px 25px 25px 0px rgba(0, 0, 0, .3);
width: 200px;
height: 200px;
-webkit-transition: all .1s linear;
transition: all .2s linear;
left: 0;
transform: rotate(45deg);
}
<div class="button main-circle"></div>
Here is an idea using some gradient and pseudo elements:
.box {
width: 100px;
height: 100px;
margin: 100px;
border: 3px solid #e0e1e6;
border-radius: 10px;
background: linear-gradient(to right, #b9b7dc, #a7a7c9);
transform: rotate(45deg);
position: relative;
z-index: 0;
box-sizing: border-box;
}
.box:before {
content: "";
position: absolute;
z-index: 2;
top: 30%;
left: -32%;
width: 100px;
height: 100px;
border: 3px solid #fefefe;
border-radius: 10px;
background: linear-gradient(to right, #e0e0e0, #fefefe);
box-sizing: border-box;
}
.box:after {
content: "";
position: absolute;
z-index: 1;
top: 30%;
left: -31%;
width: 100px;
height: 100px;
border-radius: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.1));
box-sizing: border-box;
transform: skewY(11deg) scaleX(1.15);
filter: blur(4px);
transform-origin: top left;
}
body {
background: pink;
}
<div class="box"></div>
I try to make this code:
https://codepen.io/HenryGuillen17/pen/baGxYj
<div class="ribbon"></div>
but it does not really come out. I want to make a ribbon which has those continuous edges, but I have not succeeded. In my work they demand that I then make an animation, as if I were taking off a curtain, but that could do it, we'll see.
The truth is that I must make that ribbon for a web page and I could not find the solution.
Thank you very much!
I added two final parts to the end of the ribbon because when skewing an element it will be easy to adjust the pseudo elements for it
HTML:
<div class="ribbon">
</div>
<div class="final-ribbon-part1">
<div class="final-ribbon-part2">
(S)CSS:
body {
margin : 0 !important;
}
$left-window: 10px;
$width-ribbon : 150px;
$height-ribbon : 300px;
$top-ribbon: 0px;
$left-ribbon: 0px;
$grosor-borde: 2px;
.ribbon {
top: $top-ribbon;
left: $left-ribbon;
position: absolute;
margin-left: $left-window;
background-color: #DDD;
width: $width-ribbon;
height: $height-ribbon;
border-radius : 0 0 35px 35px;
z-index: 1;
//border: 1px solid black;
background: rgba(147,186,19,1);
background: -moz-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,186,19,1)), color-stop(50%, rgba(147,186,19,1)), color-stop(100%, rgba(2,102,45,1)));
background: -webkit-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -o-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -ms-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: linear-gradient(to bottom, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93ba13', endColorstr='#02662d', GradientType=0 );
&:before {
height: $height-ribbon - 20;
border-left: $grosor-borde dashed #da5050;
border-right: $grosor-borde dashed #da5050;
content: '';
position: absolute;
width: $width-ribbon * 0.9;
left : $left-ribbon + 6px;
}
&:after {
height: $height-ribbon - 10;
border-left: $grosor-borde dashed #631a15;
border-right: $grosor-borde dashed #631a15;
content: '';
position: absolute;
width: ($width-ribbon * 0.9) - 10;
left : $left-ribbon + 6px + 5;
}
}
.final-ribbon-part1 {
top: $top-ribbon + $height-ribbon - 40px;
left: 11px;
background-color: #03662c;
width: 74px;
height: 147px;
position: absolute;
border-radius: 0px 0px 0px 90%;
z-index: -1;
&:before {
height: 96%;
width: 92%;
border-bottom: $grosor-borde dashed #da5050;
border-left: $grosor-borde dashed #da5050;
content: '';
position: absolute;
border-radius: 0 0 0 90%;
top: 0;
left: 3.5px;
}
&:after {
top: 0;
height: 92%;
width: 92%;
border-left: $grosor-borde dashed #631a15;
border-bottom: $grosor-borde dashed #631a15;
content: '';
position: absolute;
left : 10px;
border-radius: 0 0 0 90%;
}
}
.final-ribbon-part2 {
top: 0px;
left: 74px;
background-color: #03662c;
width: 74px;
height: 147px;
position: absolute;
border-radius: 0px 0px 0 90%;
z-index: -1;
transform: rotateY(180deg);
&:before {
height: 96%;
width: 92%;
border-bottom: $grosor-borde dashed #da5050;
border-left: $grosor-borde dashed #da5050;
content: '';
position: absolute;
border-radius: 0 0 0 90%;
top: 0;
left: 3.5px;
}
&:after {
top: 0;
height: 92%;
width: 86%;
border-left: $grosor-borde dashed #631a15;
border-bottom: $grosor-borde dashed #631a15;
content: '';
position: absolute;
left : $left-ribbon + 6px + 2;
border-radius: 0 0 0 98%;
}
}
Codepen here: https://codepen.io/Marouen/pen/KZKrYR?editors=1100
I was experimenting some fancy CSS effects before apply to an ongoing application and I came across Ribbons.
By itself, it works perfectly but I wouldn't use a fixed element as suggested by the generator so I added an image to the main box
However, the images of the application in which I would be adding this feature are not of the same size yet, so I decided to change the old <img>for CSS background images and then make use of background-size property.
But sometimes the background image is overflowing the dimensions of box. It would be just a matter of add an overflow: hidden in #preview and everything would be solved, but if I do that the "curves" of the Ribbon disappear.
How could I change that? Here's the current test code, although for some reason the background is not loading, not in here nor in JSFiddle.
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
The image goes to .front because I also intend to use David Walsh's Card Fliping technique, which is already working in parallel and I believe is not relevant to the case.
Even setting background-size to containmade the image overflow, but this value is not desirable as it won't cover like the currentlt defined value.
.front is just a text container. you need to apply background image to #preview
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
}
.front {
color: white;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front">FRONT DIV Lorem ipsum la-la-la</div>
</div>
Or you need to define width and height for .front:
#preview {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 3px solid #000;
display: block;
/*overflow: hidden;*/
perspective: 1000px;
position: relative;
height: 260px;
width: 365px;
}
.front {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-image: url( 'https://photos.smugmug.com/Dog-Shows/BTB-September2013-Sunday/BTB-UKC-Alaskan-Klee-Kai/i-xFmLHS8/0/S/889_MG_6212a-889-S.jpg' );
height: 260px;
width: 365px;
}
.ribbon {
position: absolute;
left: -8px; top: -8px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#F70505 0%, #8F0808 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #8F0808;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #8F0808;
border-bottom: 3px solid transparent;
border-top: 3px solid #8F0808;
}
<div id="preview">
<div class="ribbon">
<span>POPULAR</span>
</div>
<div class="front"></div>
</div>
I know some people are able to draw anything with css. I can't figure out how to make this shape.
This is what I have as far as now
#adobe {
height: 250px;
left: 50%;
overflow: hidden;
margin: -125px 0 0 -146px;
top: 25%;
width: 350px;
}
.adobe1 {
background: #db2027 none repeat scroll 0 0;
box-shadow: 4px 13px 14px -14px #eee inset;
height: 203px;
left: 10px;
top: 98px;
transform: skewX(-20deg);
width: 75px;
z-index: 999;
}
.adobe2 {
background: #404140 none repeat scroll 0 0;
height: 259px;
left: 210px;
top: 36px;
transform: skewX(19deg);
width: 75px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
z-index: 999;
}
.adobe3 {
background: #db2027 none repeat scroll 0 0;
height: 68px;
left: 80px;
top: 125px;
transform: skewX(-10deg);
width: 93px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.adobe4 {
background: #404140 none repeat scroll 0 0;
height: 59px;
left: 57px;
top: 36px;
transform: skewX(-15deg);
width: 146px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon {
top: 35% !important;
}
.half-circle {
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 20px solid #db2027;
border-bottom: 20px solid transparent !important;
border-right: 20px solid #db2027 !important;
transform: rotate(-8deg);
}
.half-circle2 {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
}
.two {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
border-bottom: 20px solid #000 !important;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border: 20px solid transparent;
border-bottom: 20px solid #000 !important;
border-right: 20px solid transparent !important;
}
<div id="adobe" class="icon half-circle test">
<div class="two">
<div class="half-circle2">
<div class="adobe1"></div>
<div class="adobe2"></div>
<div class="adobe3"></div>
<div class="adobe4"></div>
</div>
</div>
</div>
Here you go..!! Little tweaks are required, I think you can make it according to your design.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.logo-container{
position: relative;
width: 184px;
height: 184px;
overflow: hidden;
border-radius: 50%;
}
.logo-outer-circle{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 12px solid #db2027;
border-bottom: 12px solid #404140 !important;
border-right: 12px solid #db2027 !important;
width: 160px;
height: 160px;
/*border-radius: 50%;*/
/*overflow: hidden;*/
position: relative;
}
.red-top{
position: absolute;
width: 32px;
height: 90px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 20px;
top: 70px;
}
.red-top:before{
position: absolute;
content: '';
width: 21px;
height: 4px;
background-color: #e55a60;
top: 5px;
left: 6px;
}
.red-right{
position: absolute;
width: 60px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 25px;
top: 95px;
}
.red-right:before{
position: absolute;
content: '';
width: 4px;
height: 58px;
background-color: #e55a60;
top: -18px;
}
.grey-top{
position: absolute;
width: 32px;
height: 160px;
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
background: #404140;
right: 30px;
top: 25px;
}
.grey-top:before{
position: absolute;
content: '';
width: 4px;
height: 117px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.grey-left{
position: absolute;
width: 65px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #404140;
left: 30px;
top: 25px;
}
.grey-left:before{
position: absolute;
content: '';
width: 4px;
height: 26px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.divider-left{
position: absolute;
content: '';
width: 10px;
height: 20px;
background-color: #fff;
top: 150px;
left: 40px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
.divider-right{
position: absolute;
content: '';
width: 10px;
height: 27px;
background-color: #fff;
top: 125px;
right: 11px;
-webkit-transform: skew(15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
</style>
</head>
<body>
<div class="logo-container">
<div class="logo-outer-circle">
<div class="red-top"></div>
<div class="red-right"></div>
<div class="divider-left"></div>
<div class="grey-top"></div>
<div class="grey-left"></div>
<div class="divider-right"></div>
</div>
</div>
</body>
</html>
I have created product box that shows product image, when hovered on flips around to show details of a product and this works well. Problem is when this product has ribbon on it and flips, text in the ribbon becomes flipped as well (it's position is correct), I need to somehow extra transform this text so it shows correctly TOP even when flipped. Is it possible?
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.product-box {
width: 292px;
height: 340px;
}
.thumb-wrapper {
height: 100%;
background-color: purple;
}
.product-box img {
width: 100%;
position: absolute;
display: block;
backface-visibility: hidden;
}
.product-box .thumb-detail {
width: 100%;
height: 100%;
position: absolute;
background: blue;
backface-visibility: hidden;
}
.product-box.flip {
perspective: 800px;
}
.product-box.flip .thumb-wrapper {
transition: transform 1s;
transform-style: preserve-3d;
}
.product-box.flip .thumb-detail, .product-box.flip:hover .thumb-wrapper {
transform: rotateY(-180deg);
}
<div class="product-box flip">
<div class="thumb-wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src="#" alt="" title="" height="262" width="262">
<div class="thumb-detail">
</div>
</div>
</div>
Just duplicate the ribbon-wrapper-green and rotate it in the back
.card {
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 700;
margin: 0px auto;
}
.card:hover .front{
-webkit-transform: rotateY(-180deg);
}
.card:hover .back {
-webkit-transform: rotateY(0deg);
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.8s ease-out;
}
.front {
-webkit-transform: rotateY(0deg);
}
.back {
background: #9dcc78;
-webkit-transform: rotateY(180deg);
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.back .ribbon-wrapper-green {
top: -4px;
left: -1px;
-webkit-transform: rotateZ(-90deg);
-moz-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
<div class='card'>
<div class='front face'>
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src='http://placehold.it/180x180'/>
</div>
<div class="back face">
<div class="ribbon-wrapper-green"><div class="ribbon-green">TOP</div></div>
<img src='http://placehold.it/180x180'/>
</div>
</div>
Note: I had initially misunderstood the question and posted a wrong answer. Did not want to delete it and hence have modified the original answer to still solve the problem albeit making it more complex in the process. The best approach is provided in Tambo's answer. You can use this method if you for some reason wish to achieve the effect without duplicating elements.
You can do it by adding the rotateY(-180deg) on the div with class="ribbon-wrapper-green" and positioning it on the other side. The original positioning is right: -3px and on hover, we change it to left: -3px or right: 210px; (box width 292px + offset 3px - width of ribbon container 85px).
After this, the whole ribbon is translated by the required pixels (the complex part) to get positioned on the left side of the screen. Now, even though the position is correct, the ribbon has to be rotated in the reverse direction to make it look properly like a ribbon and so a rotate(-90deg) is added (-90 degrees the element is originally rotated by 45 degree which has to be nullified to come back to a normal position and then we have to rotate another 45 degree in the reverse direction).
Note: The animation/transition effect is not great but I think you can work that out.
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
z-index: 5;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
.ribbon-green:before,
.ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
.product-box {
width: 292px;
height: 340px;
}
.thumb-wrapper {
height: 100%;
background-color: purple;
}
.product-box img {
width: 100%;
position: absolute;
display: block;
backface-visibility: hidden;
}
.product-box .thumb-detail {
width: 100%;
height: 100%;
position: absolute;
background: blue;
backface-visibility: hidden;
}
.product-box.flip {
perspective: 800px;
}
.product-box.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.product-box.flip .thumb-detail,
.product-box.flip:hover .thumb-wrapper {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.product-box.flip:hover .thumb-wrapper .ribbon-wrapper-green {
left: -3px;
-webkit-transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
transform: rotateY(-180deg) translate(-212px) rotate(-90deg);
}
<div class="product-box flip">
<div class="thumb-wrapper">
<div class="ribbon-wrapper-green">
<div class="ribbon-green">TOP</div>
</div>
<img src="#" alt="" title="" height="262" width="262">
<div class="thumb-detail">
</div>
</div>
</div>