图标制作

Posted 2020-08-14 你羸我陪你君临天下,你输我陪你东山再起

1.

.product-labels{
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 0 3px;
color: #fff;
font-size: 1.0rem;
line-height: 18px;
background: #3a495a;
}
.product-labels:after{
content: " ";
position: absolute;
right: -6px;
top: 0;
width: 0;
height: 0;
border-top: solid 9px #3a495a;
border-right: solid 3px transparent;
border-bottom: solid 9px transparent;
border-left: solid 3px #3a495a;
}

<span class="product-labels">手机专享</span>

 2.

 

.product-labels{
position: absolute;
top: 0;
left: 0;
z-index: 1;
padding: 0 3px;
color: #fff;
font-size: 1.0rem;
line-height: 18px;
background: #3a495a;
}
.product-labels:after{
content: " ";
position: absolute;
right: -6px;
top: 0;
width: 0;
height: 0;
border-top: solid 9px #3a495a;
border-right: solid 3px transparent;
border-bottom: solid 9px transparent;
border-left: solid 3px #3a495a;
}

.product-recommend-label {
position: absolute;
top: 20px;
left: 0px;
width: 100px;
padding-right: 4px;
padding-bottom: 22px;
/*transform: scale(0.5);
-webkit-transform: scale(0.5);*/
overflow: hidden;
}
.product-recommend-label>em {
position: relative;
z-index: 1;
display: block;
color: #fffbc9;
font-size: 20px;
line-height: 24px;
padding: 18px 0 12px;
text-align: center;
background: #f8434f;
box-shadow: 2px 0px 2px rgba(102, 102, 102, 0.6);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.product-recommend-label>em:before {
content: "";
position: absolute;
z-index: -1;
bottom:-34px;
left: 12px;
width: 76px;
height: 76px;
background: inherit;
border-radius: 10px;
border-bottom-right-radius: 2px;
box-shadow: 4px 4px 4px rgba(102, 102, 102, 0.6);
/* -webkit-transform:scaleY(0.4) rotate(45deg); */
transform:scaleY(0.4) rotate(45deg);
}

<div class="product-recommend-label">
　　<em>
　　超高满意度
　　</em>
</div>

3.

<div class="event">
　　<span>#002</span>
　　　　<div class="info">
　　　　　　MAY 21, 2013 <br>
　　　　　　A Non Ymous
　　　　</div>
　　　　<div class="price">
　　　　　　$6,500
　　　　</div>
</div>

.event {
width: 300px;
height: 80px;
background: #fff;
border: 1px solid #CCC;
border-radius: 2px;
margin: 50px;
}
.event:before {
content: \'\';
display: block;
width: 295px;
height: 70px;
background: #fff;
border: 1px solid #CCC;
border-radius: 2px;
transform: rotate(2deg);
position: relative;
top: 12px;
left: 2px;
z-index: -1;
}
.event:after {
content: \'\';
display: block;
width: 295px;
height: 75px;
background: #fff;
border: 1px solid #CCC;
border-radius: 2px;
transform: rotate(-2deg);
position: relative;
top: -136px;
z-index: -2;
}
.event > span {
display: block;
width: 30px;
background: #232323;
position: relative;
top: -55px;
left: -15px;

/* Text */
color: #fff;
font-size: 10px;
padding: 2px 7px;
text-align: right;
}
.event > .info {
display: inline-block;
position: relative;
top: -75px;
left: 40px;

/* Text */
color: #232323;
font-weight: 600;
line-height: 25px;
}
.event > .info:first-line {
text-transform: uppercase;
font-size: 10px;
margin: 10px 0 0 0;
font-weight: 700;
}
.event > .price {
display: inline-block;
width: 60px;
position: relative;
top: -85px;
left: 115px;

/* Text */
color: #E35354;
text-align: center;
font-weight: 700;
}

4.阴影制作http://www.laozuo.org/3624.html

.lift:hover {
top: -3px;
-webkit-box-shadow: 0 2px 6px rgba(39,65,90,.15);
-moz-box-shadow: 0 2px 6px rgba(39,65,90,.15);
box-shadow: 0 2px 6px rgba(39,65,90,.15);
}

5.圆球的制作方案

#pricing-table h3 span {
display: block;
font: bold 25px/100px Georgia, Serif;
color: #777;
background: #fff;
border: 5px solid #fff;
height: 100px;
width: 100px;
margin: 10px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}