Iconfont
Before css3, we had to use the fonts installed on the user's computer to set the font style. Now through css3, we can use any font we like. After we download the font we want to use and store the font file on the web server, it will be downloaded to the user's computer when needed. The stored font is defined in the css3 @font-face rule. There is a special font in the font, which looks like a small icon is actually a font, and this font is a font icon . The following clarifies the specific steps of downloading, introducing, using and adding font icons .
Font icon download
Website 1: https://icomoon.io/
Website 2: https://www.iconfont.cn/
Download steps for website 1: Enter the website-click IcoMoon App in the upper right corner-select or edit the font icon to be downloaded-click Font in the lower right corner and click download.
The introduction of font icons
Find the downloaded font icon compressed file and unzip it to the icomoon folder, the files contained inside are shown in the figure. Put the fonts file inside (there are four different formats of font files, this is to be compatible with different browsers) into the root directory of the page . Finally, the font icon file is introduced into the css code of the page. You can open the style.css file and copy and paste the code block of the @font-face part into the style file , as shown in the figure.
After completing the above steps, the downloaded font icon is successfully introduced into the project.
Use of font icons
Open the demo.html file in the decompressed folder , which contains the code and content corresponding to each icon (the small box is the corresponding icon). As shown
<style>
span:after {
content: "\e948" "";
font-family: icomoon;
}
/*伪类里面的内容就是字体图标（可以使用编码也可以直接复制内容），一定要声明 font-family 它的值就是字体的名称，与引入时的font-family一致*/
div {
font-family: icomoon;
}
</style>
<body>
<span></span>
<div></div>
<!--在html中直接使用字体图标,不过一定要在css中声明font-family-->
</body>
Add font icon
When writing a webpage, I found that the font icons are not enough. If you want to add some font icons, you can add more font icons to the corresponding website again. The specific steps are to import the json file of the folder (Import Icons) on the selection page and continue to select the font icon, and download the compressed file again after the selection. Replace the original fonts file with the fonts file in the new compressed file.
The font icon is actually a font, so we can easily set the size and color styles. This is why some small pictures use font icons instead of pictures, and text can save memory compared to pictures.
css3 border
css3 adds important border styles such as border shadows and rounded borders. You can also use pictures to draw the border of the box. The main attributes involved are:
- box-shadow
- border-radius
- border-image (understand)
Box shadow (border shadow)
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow adds one or more shadows to the border. This attribute is a comma-separated list of shadows. Each shadow is specified by 2~4 length values, optional color values, and optional inset keywords. The value of the omitted length is 0. The meaning of each attribute value is as follows:
| value | |
|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed. |
| v-shadow | Required. The position of the vertical shadow allows negative values. |
| blur | Optional. Blur distance. |
| spread | Optional. The size of the shadow. |
| color | Optional. Set the color of the shadow. |
| inset | Optional. Change the outer shadow (outset) to inner shadow. (To understanding) |
The specific styles of the sample code and each attribute value are as follows:
<style>
body {
border:solid 2px yellow
}
div {
margin-left: 50px;
width: 200px;
height: 200px;
background-color: red;
box-shadow: 10px 60px 0px 50px;
/* 图一的spread 默认是 0 */
}
</style>
<body>
<div></div>
</body>
The blur distance is 0 by default. The larger the blur distance, the more blurred it will appear. The default value of color is black. The default is outer shadow (outset), only need to be declared when changing to inner shadow, otherwise there is no need to declare again; re-declaring the outer shadow will cause the shadow to be invalid. The inner shadow will appear in the content area of the box, but will not cover the content, only the background.
The text-shadow attribute is used to add a shadow to the text. The attribute value is similar to the box shadow, but there is no spread and inset attribute values.
Rounded border
border-radius：top-left | top-right | bottom-right | bottom-left;
Set the value of each radius in this order. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left (you can use the value to copy). The value format can be a value with a length unit or a percentage value.
Note : If the value of bottom-left and the value of top-right are different, four values must be set (regardless of whether the others are the same).
<style>
div {
border:2px solid #a1a1a1;
background:#dddddd;
width:350px;
hight:50px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
<body>
<div>border-radius 属性允许您向元素添加圆角。</div>
</body>
You can also use four attributes to set four rounded corners respectively
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
Sprites
css Sprites (sprite map) is a way of processing web page image applications. It allows us to include all the scattered pictures on the page into one big picture . Many small background images are often used as decorations in a webpage. When there are too many images in the webpage, the server will frequently receive requests and send pictures, causing excessive server request pressure, which will greatly reduce the loading speed of the page. The use of sprites can effectively reduce the number of requests received and sent by the server, increase the loading speed of the page , and is also conducive to the management of small icons. Using sprite images will also reduce the total memory footprint of the image.
The production of sprite map (photoshop)
- File-New (the background content is transparent, set the size according to your needs)-Create. After creation, you can adjust the size and positioning of the canvas through the image-canvas size.
- Drag the small icon to photoshop to view the icon information attributes (size) through the layer tool.
- Add a reference horizontal and vertical reference line at a suitable location and drag the small icon to that location.
- Finally, save the entire picture as the format png24 used by the web to get the sprite image.
Use of sprites
- To use a sprite image in a certain place, first use backgroung-image: url() to introduce a background image (sprite image).
- Set the background-repeat of the background image: no-repeat;
- Use the background-position property to locate the corresponding small icon.
The disadvantage of sprites is that it is troublesome to change small icons, such as the color and size of simple icons. At this time, the advantages of font icons are very prominent.
Triangular pattern making
The triangle style in css is essentially made using border styles, remove unnecessary borders (set the border-width value to 0 or set its borde-style value to none), and then set the border color attribute value that does not need to be displayed Set it to transparent to get the triangle shape.
<style>
div {
display:inline-block;
margin:100px 50px;
border:40px solid;
}
/* 四个边框的基本样式 */
div:nth-child(1) {
border-color: red black blue green;
}
/*效果如图一所示*/
div:nth-child(2){
border-right: none;
border-color: red black blue green;
}
/*去掉右边框，效果如图二所示*/
div:nth-child(3){
/*border-color: transparent transparent transparent green; */
boeder-right:none;
border-color: transparent black transparent green;
}
/*将上下边框改为透明色，其效果如图三所示*/
div:nth-child(4){
border-color: transparent black transparent green;
border-width: 40px 0 70px 30px;
}
/*改变四条边框的宽度可以任意改变三角形的形状，如图四所示*/
div:nth-child(5){
border-color: transparent black transparent green;
border-width: 0 0 70px 30px;
}
/*去掉两边框可以得到直角三角形的形状，如图五所示*/
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
Note the difference between removing the border and setting the border-color property to transparent.
Dust / 2020/12/21