Full directory

This series of articles, mainly around the CSS3 attributes, to achieve a variety of common effects, these effects are our actual combat development can often use the effect:

  1. CSS: Background and Borders
  2. CSS: Shape
  3. CSS: Visual Effects
  4. CSS: Font Typography
  5. CSS Reveals Practical Skills – User Experience [5]
  6. CSS: Structure and Layout
  7. CSS Revealed Combat Skills – Transitions and Animations [7]

preface

  1. Choose the appropriate mouse cursor
  2. Expand click area
  3. Use shadows to soften the background
  4. Soften the background by blurring
  5. Rolling tip

A: choose the right mouse cursor

This is the mouse cursor. The longest set is cursor:pointer; For clickable, there are some other useful cursor effects that we don’t use very often:

  1. Pointer: clickable
  2. Not-allowed: Not allowed to click
  3. Context-menu: indicates that the element has a context menu
  4. Move: indicates when an element can be moved
  5. Help: When there is help information
  6. Copy: For example, a button click will copy the copy to another location or clipboard effect, can be set to copy
  7. None: Does not display the mouse cursor (this can be used when you do not want the user to operate)

Here are all the cursor effects: Just remember the common ones above. Css2.1 built-in cursor effects:

Two: expand the clickable area

This is also when we usually do the page, we can optimize a point, as far as possible to expand the clickable area, so that the user is easier to click the area.

For example: Instead of just setting click events for ➕, let’s set click events for the entire circle.

Three: Use shadows to weaken the background

First, let’s look at the effects:

Option 1: The shaded part is enclosed with a layer of divs and set transparency.

/* Position: fixed; .overlay { top: 0; right: 0; bottom: 0; left: 0; Background: rgba (0, 0, 8). } lightbox {position: absolute; z-index: 1; /* * * */Copy the code

Plan 2: Replace the outer divs with pseudo-elements

.lightbox::before { 
    position: fixed; top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,.8);
}
Copy the code

Disadvantages: Pseudo-elements cannot bind to separate javascript event-handling callback functions.

Scheme 3: Use box-shadow

Box-shadow: 0 0 0 999px rgba(0,0,0,.8); // The shadow radius must be set to large enough or box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); // Set the shadow radius to the viewport width and height.Copy the code

Cons: Shadows also don’t bind to separate javascript event handling callbacks.

Option 4: Configure the Dialog backdrop property

// Set the ::backdrop backdrop, dialog::backdrop {background: rgba(0, 0, 0,.8); }Copy the code

Be sure: browser compatibility is limited

Four: through blur to weaken the background

First, let’s look at what we want to achieve:

The code is as follows:

<main>Bacon Ipsum dolor sit amet... </main> <dialog> O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
Copy the code
main{
    filter: blur(3px) contrast(.8) brightness(.8);
}
Copy the code

Five: rolling prompt

First, let’s look at the effects:

The code is as follows:

ul {
    overflow: auto;
    width: 20em;
    height: 12em;
    padding: .3em .5em;
    border: 1px solid silver;
    background: linear-gradient(white, white) 0 0 / 100% 50px,
                radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0/ 100% 15px,
                linear-gradient(to top, white, white) bottom/ 100% 50px,
                radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom/ 100% 15px;
    background-repeat: no-repeat;
    background-attachment: local, scroll, local, scroll;
}
Copy the code