Often when we are developing, we will often encounter such a small icon cut image, of course, we usually go to the UI to cut image. Recently, while developing my own project, I realized that many simple views can be done with native CSS. Here I give you a few simple introduction as a stepping stone to use it.
First, the realization of chat bubble triangle
1.
Create a new div
<div class="__arrow"></div>
Copy the code2,
Set the initial properties for the bubble
.__arrow{
display:inline-block;
padding:10px;
background:blue;
color:#FFF;
border-radius:8px;
min-width: 50px;
line-height: 24px;
height: 24px;
position:relative;
}
Copy the code
3,
The received message is set with the pseudo-class before
.__arrow:before{
display:block;
content:' ';
border-width:8px 8px 8px 8px;
border-style:solid;
border-color: transparent #ff4d4d transparent transparent;
position:absolute;
left:-16px;
top:20%;
}
Copy the code
3,
Set up my message with the pseudo-class after
.__arrow:after{
display:block;
content:' ';
border-width:8px 8px 8px 8px;
border-style:solid;
border-color: transparent transparent transparent #ff4d4d;
position:absolute;
left:100%;
top:20%;
}
Copy the code
Second, the plus sign
Step1,
Create a new div
<div class="__plus"></div>
Copy the codeStep2,
Write div to create a base style, so let’s start with a border
.__plus{
width: 100px;
height: 100px;
color: black;
transition: color .25s;
position: relative;
border: 1px solid
}
Copy the code
Step3,
Then use the pseudo-class before to write a bar:
.__plus::before{
content: ' ';
position: absolute;
left: 50%;
top: 50%;
width: 100px;
margin-left: -50px;
margin-top: -5px;
border-top: 10px solid;
}
Copy the code
Step3,
Similarly, the last column is written with the pseudo-class after:
.__plus::after {
content: ' ';
position: absolute;
left: 50%;
top: 50%;
height: 100px;
margin-left: -5px;
margin-top: -50px;
border-left: 10px solid;
}
Copy the code
So that’s a simple view, and that’s done mostly with these pseudo-classes. So here’s a case: does that mean that EVERY time I create a new view of a different size, I have to rewrite it again? Of course not. (I hate to write repetitive code), I have made a simple wrapper in stylus, with the following code:
/ * *$size: The length of the view$plusWidth: Width of the plus sign$color: + color */ plus_icon($size.$plusWidth = 2px, $color = #fff)
width: $size;
height: $size;
color: $color;
transition: color .25s;
position: relative;
&::after
content: ' ';
position: absolute;
left: 50%;
top: 50%;
height: $size;
margin-left: -($plusWidth/ 2); Margin - top: - (0.5 *$size);
border-left: $plusWidth solid;
&::before
content: ' ';
position: absolute;
left: 50%;
top: 50%;
width: $size; Margin - left: - (0.5 *$size);
margin-top: -($plusWidth/ 2);
border-top: $plusWidth solid;
Copy the codeFinally, in use, the direct and simple:
.add
plus_icon(12px, 4px)
Copy the codeAnd you can see the effect
Three, the gear
What about gears? I will use box-shadow, if you are not sure, you can check it out. Then enter the painting process
Step 1: Draw concentric circles
.__gear {
width: 200px;
height: 200px;
box-shadow: 0 0 0 50px black inset, 0px 0px 0px 50px white inset;
margin: 200px auto;
position: relative;
border-radius: 50%;
}
Copy the code
The second step is to draw part of the gears using the pseudo-class before
.__gear::before {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
border-radius: 5px;
box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
}
Copy the code
The third step is to draw the remaining gears using the pseudo-class after
The code is as follows:
.__gear::after {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
border-radius: 5px;
box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-webkit-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
-moz-box-shadow: 90px -16px 0 black, 90px 198px 0 black, -16px 90px 0 black, 198px 90px 0 black;
transform-origin: 100px 100px;
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
Copy the code
Similarly, I also made a more general method, also written in Stylus, with the code as follows:
gear_icon_common($size.$cicle_size.$tri_size)
$_size01 = (($size(2) -$tri_size/ 2))
$_size02= (0.8 *$tri_size)
$_size03 = ($size - ($tri_size/ 5))
content: "";
display: block;
width: $tri_size;
height: $tri_size;
position: absolute;
border-radius: $tri_size / 5;
box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
-webkit-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size01 0 black;
-moz-box-shadow: $_size01 $_size02 0 black, $_size01 $_size03 0 black, $_size02 $_size01 0 black, $_size03 $_size010 black; / * *$size: Width of the entire view$cicle_size: Ring width$tri_size: Width of gear$Hcolor: Ring/gear color$Icolor: Inner circle color */ gear_icon($size.$cicle_size.$tri_size.$Hcolor = #000, $Icolor = #fff)
width: $size;
height: $size;
box-shadow: 0 0 0 $cicle_size $Hcolor inset, 0px 0px 0px $cicle_size $Icolor inset;
margin: $size auto;
position: relative;
border-radius: 50%;
&::after
gear_icon_common($size.$cicle_size.$tri_size)
&::before
gear_icon_common($size.$cicle_size.$tri_size)
transform-origin: ($size(2)$size/ 2)
webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg)
Copy the codeTo use directly when used:
.__artical_content_setting
gear_icon(14px, 4px, 3px)
Copy the codeWrite in the last
Recently, I found that my article in Jane book received a lot of comments. Firstly, I am very happy to be seen by everyone. Secondly, I would like to make a brief explanation: Where are many technical articles in Jane book? I am as reading notes to do, a lot of words with sentences are not very rigorous, basic are used, feel good to write down.
Secondly, I recently bought a server and wanted to independently build a writing platform including background, front end, Android end, small program end and wechat public number. Because of the cloud deployment, the background of the knowledge chain is relatively weak, coupled with regular delivery of some non-technical articles to the major media. What about technical articles on this site? There will be no regular updates, but there will be some interesting things that come up during development.
Finally want to speak the truth, because now work is not very easy, plus their own technical connotation is relatively weak, generally the mainstream of time and energy will be used in the above work, study and improve their own ideas, may in some of the words with the sentence above don’t do a lot of time, I hope everybody is burke (mainly also hate those people who pack to force, It’s kind of disgusting to say something not very nice. And what about people whispering about things I don’t understand or describe clearly? I am very happy to solve your problem, but I don’t have too much time to read this brief book. I suggest adding my wechat account for in-depth communication. Of course, AFTER this period of time, I will still spend a lot of energy on operation.