Advanced CSS Techniques

CSS User interface styles

The so-called interface style is to change some user operation style, such as changing the user’s mouse style, form outline and so on. Changes to the scrollbar, for example, were rejected by many browsers, so we dropped them. Prevent form field dragging

Mouse style CURSOR

Sets or retrieves what system-predefined cursor shape a mouse pointer moves over an object.

cursor: the default white | pointer hand | move move | text textCopy the code

Mouse on my body to view the effect oh:

<ul>
  <li style="cursor:default">I am a little white</li>
  <li style="cursor:pointer">I am a little hand</li>
  <li style="cursor:move">I am moving</li>
  <li style="cursor:text">I am a text</li>
</ul>
Copy the code

Don’t use Hand because Firefox doesn’t support Pointer

Outline of the outline

Is a line drawn around an element, around the edge of the border, to highlight the element.

 outline : outline-color ||outline-style || outline-width 
Copy the code

But we don’t care how many can be set, we usually remove.

The most direct way to write this is: 0;

 <input  type="text"  style="outline: 0;"/>
Copy the code

Prevents dragging and dropping text field resize

The word resize: None prevents firefox, Google and other browsers from dragging text fields around.

You can drag it in the lower right corner:

The lower right corner can not be dragged:

<textarea  style="resize: none;"></textarea>

Copy the code

Vertical-align Indicates the vertical alignment

Margin: 0 auto; margin: 0 auto;

We also talked about making text center, text-align: center;

But we never talked about vertical centring, and our mom was always worried about how we were going to do it.

Vertical-align, a nice property, actually has an unpredictable temper, or we wouldn’t be here so late.

vertical-align : baseline |top |middle |bottom 
Copy the code

Sets or retrieves the vertical alignment of the object’s contents.

Vertical-align does not affect the alignment of content within block-level elements. It applies only to inline elements or block elements, especially inline block elements, which are used to control the alignment of images, forms, and text.

Align images, forms, and text

So we know that we can use vertical-align to control the vertical relationship between images and text. The default image is aligned with the text baseline.

Remove gaps at the bottom of the image

One important feature to remember is that if an element does not have a baseline, such as an image or a form inline block element, its baseline will be aligned with the baseline of the parent box. This can cause a problem with a gap at the bottom of the image.

The solution is:

  1. To img vertical – align: middle | top and so on. Keep the image out of line with the baseline. (Used more)

  1. Add display: block to img; Converting to block-level elements is no problem.

Overflow text hidden

Word-break: automatic line wrap

Normal uses the browser’s default line breaking rules.

Break-all allows line breaks within words.

Keep-all can only be wrapped at half-corner Spaces or hyphens. Mainly dealing with English words

white-space

White-space sets or retrieves how text is displayed within an object. Usually we use it to force a line of content

Nowrap: Forces all text to be displayed on the same line until the text ends or encounters a BR tag object.

Can handle Chinese

Text-overflow Indicates that text overflows

text-overflow : clip | ellipsis
Copy the code

Sets or retrieves whether to use an ellipsis flag (…) Marks an overflow of text within an object

Clip: Do not display ellipsis tags (…) , but a simple cut

Ellipsis: Display ellipsis flags when text within an object overflows (…)

Be sure to force the inline display first, again with the overflow property

CSS Sprite

The background of Sprite technology

The figure shows the webpage request schematic diagram. When users visit a website, they need to send a request to the server. Each image on the webpage can be displayed to users only after a request.

However, a web page is often decorated with many small background images. When there are too many images in the web page, the server will frequently accept and send requests, which will greatly reduce the page load speed. CSS Sprites (also known as CSS Sprites, CSS Sprite) appear in order to effectively reduce the number of times the server receives and sends requests, and improve the loading speed of the page.

Essence of Sprite technology

Simply put, CSS sprites are a way to manipulate background images on a web page. It combines all the sporadic background images involved in a page into one large image, and then applies the large image to a web page so that when a user visits the page, all the background images on the page can be displayed with a single request to the service. Usually, this large image composed of many small background images is called Sprite image (Sprite image), as shown in the picture below on jingdong website.

Use of Sprite technology

CSS sprites actually integrate some background images in a web page into a larger image (Sprite). However, each page element usually only needs a small image in a different location in the Sprite. To accurately locate a small image in the Sprite, It is necessary to use CSS background-image, background-repeat and background-position attributes for background positioning, among which the most critical is to use background-position attributes for accurate positioning.

Making sprites

CSS Sprite is actually a web page in some background image integration into a big picture (Sprite/Sprite), then we have to do, is to put the small picture together into a big picture.

In most cases, Sprite art is done by web artists.

  • Our Sprite images are small decorative background images. Insert picture cannot be placed up.
  • The width of our Sprite depends on the widest background.
  • We can place them horizontally or vertically, but at least an even number of pixels between each image is appropriate.
  • At the bottom of our Sprite, leave a gap so we can add other sprites later.

Conclusion: Small companies, few background images, no need to use Sprite technology, too high maintenance costs. If you have a lot of background images, you can recommend using Sprite technology.

The fonts icon

Images have many advantages, but the disadvantages are obvious, for example, images not only increase the total file size, but also add a lot of extra “HTTP requests”, which can greatly reduce the performance of the web page. More importantly, images don’t “zoom” very well, because zooming in and out is distorted. We’ll look at mobile responsiveness later, and in many cases we want our ICONS to be zoomable. At this point, a very important technology emerged, well, it didn’t exist, it was “favored” again. This is the iconfont.

Advantages of font ICONS

  • You can do the same things you can do with pictures, change transparency, rotation, etc..
  • butThe essence is actually wordsYou can change colors, create shadows, create transparency, etc.
  • It’s smaller, but it carries the same amount of information.
  • Support for almost all browsers
  • Essential medicine for mobile devices…

Font icon usage process

In general, font ICONS follow the following process:

Design font ICONS

If the icon is designed by our company alone, then the first step is needed. This is the job of UI designers, who create ICONS in vector graphics software such as Illustrator or Sketch, as shown below:

Then save it in SVG format and give it to our front-end staff.

In fact, the first step, we do not need to care, just need to give us these ICONS, if the icon is the public, online already have, you can directly skip the first step, into the third step.

Upload the generated font package

When the UI designer gives us an SVG file, we need to convert it into a font file that we can use on our page, and it needs to be compatible across browsers.

Icomoon word stock

Website: icomoon. IO

IcoMoon was founded in 2011 and launched the first custom icon font generator, which allows users to select the ICONS they need to make them into a font. A wide variety of content, very comprehensive, the only regret is the foreign server, open the network speed is slow.

Ali Icon Font library

www.iconfont.cn/

This is an icon font library of Ali Mom M2UX, including Taobao icon library and Ali Mom icon library. You can use AI to make ICONS and upload them. One word, free, free!!

fontello

fontello.com/

Customize your own icon font library online, or download the entire icon set directly from GitHub. The project is also open source.

Font-Awesome

Fortawesome. Making. IO Font – Awesom…

This is one of my favorite character library, update relatively quickly. So far there are 369 ICONS.

Glyphicon Halflings

glyphicons.com/

This font icon is free to use under Bootstrap. It comes with over 200 ICONS.

Icons8

icons8.com/

Free PNG download, up to 500PX pixels

Download the compatible font package

After uploading, the website will convert the SVG image made by the UI into our font format, and then download it

Of course, we do not need their own special icon, is to find a few ICONS on the Internet to use, the above 2 steps can be directly omitted, directly to the website to find a favorite download to use it.

Fonts are introduced into HTML

The last step, and the most important step, is that we have the font file and we need to introduce it into our page.

  1. First put the following 4 files into the Fonts folder. Popular practice

Step 1: Declare fonts in styles: Tell people about our own fonts

@font-face {			/* Declare the font */
font-family: 'icomoon';
src:  url('fonts/icomoon.eot? 7kkyc2');
src:  url('fonts/icomoon.eot? 7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf? 7kkyc2') format('truetype'),
 url('fonts/icomoon.woff? 7kkyc2') format('woff'),
 url('fonts/icomoon.svg? 7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Copy the code

Step 2: Use fonts for the box

span {
 	font-family: "icomoon";		Font-family: arial, helvetica, sans-serif
 }
Copy the code

Step 3: Add structure to the box

span::before {
 	 content: "\e900";
 }
/ * or * /
<span< / a > span>  
Copy the code

Sliding doors

Consider a sliding door, or what you might call a sliding door, in real life:

Sliding doors appear in the background

When making web pages, in order to be beautiful, it is often necessary to set a special shape background for web elements, such as the wechat navigation bar, which has the feeling of being raised and concave. The biggest problem is that the number of words inside is not the same. How to do?

In order to enable the background of various special shapes to adapt to the amount of text element content, CSS sliding door technology emerged. It builds the page from a new Angle, allowing various specially shaped backgrounds to stretch and slide freely to fit the text content inside the element, making it more usable. Sliding doors are most common in navigation bars.

The core technology

The core technique is to use CSS sprites (mainly background position) and box padding width to accommodate different word length navigation bars.

A typical layout would look something like this:

<li>
  <a href="#">
    <span>Navigation bar content</span>
  </a>
</li>
Copy the code

Conclusion:

  1. A Set the left side of the background and the padding to the appropriate width.
  2. Span sets the width to the right of the background, and the padding spreads out the appropriate width and the text continues to spread the width.
  3. The reason a includes span is because the entire navigation is clickable.

CSS triangle

div {
    width: 0; 
    height: 0;
    /* Compatible processing */
    line-height:0; font-size:0;
    
   border-top: 10px solid red;
   border-right: 10px solid green;
   border-bottom: 10px solid blue;
   border-left: 10px solid # 000; 
}
Copy the code
  1. We use CSS borders to simulate triangles
  2. Width height is 0
  3. We need to write all 4 borders, only keep the required border color, the rest can not be omitted, just change to transparent
  4. Font-size: 0; line-height: 0;