sticker-style.css

Back Back Up Advanced Editor

.customCatTooltip {
}
.customCatTooltip .imgSection {
	text-align:center;
}
.customCatTooltip .imgSection img {
	text-align:center;
	max-height:160px !important;
	max-width:220px !important;
}
.rowStikerLayout {
	display:inline-block;
	width:100%;
}
.rowStikerLayout .die_stiker_box {
    float: none;
    max-width: 100%;
	margin-bottom: 5px;
	margin-top:0px;
	margin-right:0px;
}
body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
	/*line-height:inherit;*/
}
.rowStikerLayout .die_stiker_1 {
	border-bottom:20px solid #08fd0a;
	border-left:5px solid #08fd0a;
	border-right:5px solid #08fd0a;
	border-top:5px solid #08fd0a;
    text-align: center;
    border-radius: 10px;
}
.rowStikerLayout .die_stiker_2 {
	border-bottom:20px solid #f1fd08;
	border-left:5px solid #f1fd08;
	border-right:5px solid #f1fd08;
	border-top:5px solid #f1fd08;
    text-align: center;
    border-radius: 10px;
}
.rowStikerLayout .die_stiker_3 {
    text-align: center;
    border-radius: 10px;
	border-bottom:20px solid #fd0846;
	border-left:5px solid #fd0846;
	border-right:5px solid #fd0846;
	border-top:5px solid #fd0846;
}
.rowStikerLayout .die_stiker_1 .head-bar {
	background-color:#08fd0a;
	padding:10px;
}
.rowStikerLayout .die_stiker_2 .head-bar {
	background-color:#f1fd08;
	padding:10px;
}
.rowStikerLayout .die_stiker_3 .head-bar {
	background-color:#fd0846;
	padding:10px;
}
.rowStikerLayout .boxTitle {
    font-size: 12px;
    font-weight: normal;
	padding:5px 10px;
}
.rowStikerLayout .boxContent {
	padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
}
.stickerBox {
	padding: 10px;
    z-index: 999;
    position: relative;
}
.demoLayout1 {
	padding: 10px 7% 40px;
}

.demoLayout1 .bar {
  color: #FFF;
  background-color: #a047c6;
  padding: 15px;
  width: 100%;
  margin: 10px auto 0;
  font: 28px/32px 'Bree Serif', Courier, monospaced;
  text-align: center;
  position: relative;
  text-transform: uppercase;
  border: 2px transparent solid;
  box-shadow: 0 10px 30px -10px gray;
  min-height:125px;
}
.extraStickerSection .stickerBox.demoLayout1 .extra_content {
	margin-top:10px;
}

.demoLayout1 .bar span {
  position: absolute;
}

.demoLayout1 .bar span:nth-child(1),.bar span:nth-child(3) {
  border-style: solid;
  border-width: 15px;
  z-index: -1;
  display:none;
}
.demoLayout1 .bar span:nth-child(1) {
  border-color: #000 #000 transparent transparent;
  top: 120px;
  left: -2px;
  display:none;
}
.demoLayout1 .bar span:nth-child(3) {
  border-color: #000 transparent transparent #000 ;
  top: 120px;
  left: 92%;
}
.demoLayout1 .bar span:nth-child(2), .bar span:nth-child(4) {
  top: 30px;
  border-style: solid;
  border-width: 35px;
  z-index: -2;
}
.demoLayout1 .bar span:nth-child(2) {
  border-color: #6f3289 #6f3289 #6f3289 transparent;
  left: -70px;
  box-shadow: 20px 20px 30px -10px grey;
}
.demoLayout1 .bar span:nth-child(4) {
  border-color: #6f3289 transparent #6f3289 #6f3289;
  left: 92%;
  box-shadow: -20px 19px 30px -10px grey;
}
/** Demo Layout 1 **/

.demoLayout2 .sticker {
  align-items: center;
  background-image:
    linear-gradient(
      to bottom,
       #da6930,
       #da6930 50%,
       #da6930 50%,
       #90ca42 50%
    );
  border: 15px solid #da6930;
  border-radius: 100%;
  color: #fff;
  display: flex;
  flex-flow: column;
  height: 250px;
  padding: 0.6em;
  width: 250px;
}

.demoLayout2 .sticker__top,
.demoLayout2 .sticker-bottom {
  flex: 0 50%;
}

.demoLayout2 .sticker__top {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  top: -10px;
  width: 85%;
}

.demoLayout2 .sticker__top::before,
.demoLayout2 .sticker__top::after {
  content: "";
  height: 50%;
  background-size: cover;
}
.demoLayout2 .sticker__top::before {
  border-top-left-radius: 100%;
  flex: 40%;
  order: 1;
}

.demoLayout2 .sticker__top::after {
  background-image:
    linear-gradient( /* Altnerates transparent and red stripes */
      to bottom,
          #90ca42,
          #90ca42 14%,
      transparent 14%,
      transparent 28%,
          #90ca42 28%,
          #90ca42 42%,
      transparent 42%,
      transparent 56%,
          #90ca42 56%,
          #90ca42 70%,
      transparent 70%,
      transparent 84%,
          #90ca42 84%,
          #90ca42 98%,
      transparent 100%
    );
  border-top-right-radius: 100%;
  flex: 40%;
  margin-left:10px;
  right: 5px;
  position: relative;
  order: 2;
}
.demoLayout2 .sticker__top h1 {
  font-family: 'Raleway', sans-serif;
  font-size: 26px;
  line-height: 26px;
  order: 3;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  margin-top: 5px;
}
@media only screen and (min-width:768px) {
	.extraStickerSection {
		float: right;
		max-width: 280px;
		margin-top: -50px;
		margin-right: -60px;
	}
}
@media only screen and (max-width:768px) {
	.extraStickerSection {
		max-width: 100%;
	}
}
@media only screen and (max-width:415px) {
	body .demoLayout2 .sticker {
		width:100%;
	}
}
.demoLayout2 .sticker__bottom {
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  width: 80%;
}

.demoLayout2 .sticker__bottom ul {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  text-align: center;
  width: 100%;
}

.demoLayout2 .sticker__bottom li {
  	flex: auto;
	margin: 1em;
    font-size: 16px;
    line-height: 22px;
}

.demoLayout2 .sticker__bottom li:nth-child(11) {
  flex: 100%;
}

/****  Demo Layout 2 *****/

.demoLayout3 aside.sticker {
  margin: 10px;
  font-size: 20px;
  text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
  color: black;
  width: 250px;
  height: 250px;
  display: inline-block;
  border-radius: 100%;
  background: -webkit-linear-gradient(135deg, transparent 32px, #aaa 20px, #eee);
  text-align: center;
  padding-top: 15%;
  box-sizing: border-box;
  overflow: hidden;
}
.demoLayout3 aside.sticker:after {
  	content: " ";
  	display: block;
	border-radius: 100%;
    border-radius: 100%;
    background: -webkit-linear-gradient(135deg, transparent 135px, #000 200px,#666 200px, #fff 85%);
    box-shadow: -3px -3px 15px 1px rgba(0, 0, 0, 0.2);
    width: 250px;
    height: 215px;
    margin-left: 100px;
    margin-top: 10px;
}
.demoLayout3 aside.sticker.green {
  color: white;
  background: -webkit-linear-gradient(135deg, transparent 32px, #46a82d 20px, #70c757);
}
.demoLayout3 aside.sticker.cyan {
  color: white;
  background: -webkit-linear-gradient(135deg, transparent 32px, #2d8aa6 20px, #57b1c7);
}
.demoLayout3 aside.sticker.yellow {
  color: white;
  background: -webkit-linear-gradient(135deg, transparent 32px, #a69c2e 20px, #c7b857);
}
.demoLayout3 aside.sticker.pink {
  color: white;
  background: -webkit-linear-gradient(135deg, transparent 32px, #8e2ea6 20px, #b457c7);
}

/****  Demo Layout 3 *****/

.demoLayout4 .price-container,
.demoLayout4 .price-container:before,
.demoLayout4 .price-container:after,
.demoLayout4 .price-container .price,
.demoLayout4 .price-container .price:before,
.demoLayout4 .price-container .price:after {
	height: 12.5em;
	width: 12.5em;
	background: #90ca42;
	background-size: 8.5em;
}

.demoLayout4 .price-container:before,
.demoLayout4 .price-container:after,
.demoLayout4 .price-container .price:before,
.demoLayout4 .price-container .price:after {
	content: "";
	position: absolute;
}

.demoLayout4 .price-container {
	margin: 40px auto;
    position: relative;
    top: 20px;
    left: 20px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
    	-ms-transform: rotate(-45deg);
    	 -o-transform: rotate(-45deg);
    	    transform: rotate(-45deg);
}
.demoLayout4 .price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}
.demoLayout4 .price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}
.demoLayout4 .price-container .price {
	padding: 10px 0em;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}
.demoLayout4 .price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}
.demoLayout4 .price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}
.demoLayout4 .price-container .price span {
	position: relative;
	z-index: 100;
	display: block;
	text-align: center;
	color: #FE3D5C;
	font-size: 20px;
	text-transform: uppercase;
}
.demoLayout4 .price-container .price span.number {
  font-weight: bold;
  font-size: 2.2em;
  line-height: 1.3em;
  color: #fff;
}

/** Demo 4 End ***/

.demoLayout5 .badges {
	padding-top:30px;
    position:relative;
    margin:70px auto 10px;
    width:200px;
    height:200px;
    background:#90ca42;
    border-radius:100%;
    color: #FFF;
    line-height: 28px;
    text-align: center;
    text-transform: uppercase;
    font-family: "Open Sans",sans-serif;
    -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
    -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
    -o-animation: 3s ease-in-out 0s normal none infinite running swing;
    animation: 3s ease-in-out 0s normal none infinite running swing;
    
    -webkit-transform-origin: 100px -71px;
    -moz-transform-origin: 100px -71px;
    -o-transform-origin: 100px -71px;
    transform-origin: 100px -71px;
}
.demoLayout5 .badges:before{
    content:'';
    position:absolute;
    top:90px;left:90px;
    width:20px;height:20px;
    border-radius:100%;
    -webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
                83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
                
                -20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
                -56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
                
                0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
                -71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
                
                20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
                71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
                
    
    -moz-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
                83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
                
                -20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
                -56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
                
                0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
                -71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
                
                20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
                71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
                
    
    -o-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
                83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
                
                -20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
                -56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
                
                0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
                -71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
                
                20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
                71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
                
    
    box-shadow: 0px -82px 0px -2px #fff, 0px -100px #90ca42,20px -98px #90ca42,39px -94px #90ca42,56px -85px #90ca42,71px -72px #90ca42,
                83px -57px #90ca42,93px -40px #90ca42,98px -20px #90ca42,100px 0px #90ca42,
                
                -20px -98px #90ca42,-39px -94px #90ca42,-71px -72px #90ca42,
                -56px -85px #90ca42,-83px -57px #90ca42,-93px -40px #90ca42,-98px -20px #90ca42,-100px 0px #90ca42,
                
                0px 100px #90ca42,-20px 98px #90ca42,-39px 94px #90ca42,-56px 85px #90ca42,
                -71px 72px #90ca42,-83px 57px #90ca42,-93px -40px #90ca42,-98px 20px #90ca42,-93px 40px #90ca42,
                
                20px 98px #90ca42,39px 94px #90ca42,56px 85px #90ca42,
                71px 72px #90ca42,83px 57px #90ca42,93px 40px #90ca42,98px 20px #90ca42;
}
.demoLayout5 .badges:after{
    content:'';
    position:absolute;
    top:-70px;left:99px;
    width:2px;height:81px;
    border-radius:0%;
    background:#000;
}
.demoLayout5 .badges {
    font-size: 24px;
    font-weight: 300;
}
.demoLayout5 .badges strong {
    font-size: 36px;
    line-height: 36px;
    font-weight: 600;
}

@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(5deg);}
    50%{-webkit-transform:rotate(-5deg);}
    100%{-webkit-transform:rotate(5deg);}
}
@-moz-keyframes swing{
    0%{-moz-transform:rotate(5deg);}
    50%{-moz-transform:rotate(-5deg);}
    100%{-moz-transform:rotate(5deg);}
}
@-o-keyframes swing{
    0%{-o-transform:rotate(5deg);}
    50%{-o-transform:rotate(-5deg);}
    100%{-o-transform:rotate(5deg);}
}
@keyframes swing{
    0%{transform:rotate(5deg);}
    50%{transform:rotate(-5deg);}
    100%{transform:rotate(5deg);}
}

/*** Demo 5 End ***/

.demoLayout6 .box {
  width: 100%;
  min-height: 150px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.demoLayout6 .box .contents {
	padding:10px 40px 10px 10px;
}
.demoLayout6 .ribbon {
	position: absolute;
    right: -16px;
    top: -10px;
    z-index: 1;
    overflow: hidden;
    width: 130px;
    height: 105px;
    text-align: right;
}
.demoLayout6 .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: 160px;
  	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: 23px; right: -20px;
}
.demoLayout6 .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;
}
.demoLayout6 .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;
}

.demoLayout7 {
	margin-left:30px;
}
.demoLayout7 .badge {
	font-size: 32px;
    transform: rotate(45deg);
    margin: 20px auto;
    background: #90ca42;
    width: 180px;
    height: 180px;
    line-height: 36px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 8px;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.demoLayout7 .badge span {
    display: inline-block;
    transform: rotate(-45deg);
    opacity: .9;
    width: 100%;
    margin-left: -82px;
    margin-top: 50px;
}

.tooltiptext {
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 40%;
  left: 10%;
  margin-left: -20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.extraStickerSection:hover .tooltiptext, .tooltipSection:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.extraStickerSection .stickerBox .extra_content {
    padding: 5px;
    width: 100%;
    font-size: 12px;
    font-style: italic;
}