HTML&CSSCSS

CSS skills 2

  1. Variable

    Variables are defined with --, referenced with var(--varName), and can be accessed by JS.

    1
    2
    3
    :root { //declare in the top root of css--variables and assign values
         --logo-size:60px;
    }
    1
    width:var(--logo-size) / 2; //reference variable

  1. .active processing in css

    Use .active in html to manipulate elements, such as adding a .active class to an element (the element can have multiple classes). At the same time, there may be multiple .active to operate on multiple elements. In order to avoid multiple names, you can use .toggle.active {} in css (no spaces in the two selectors, parallel relationship) to select a specific .active.


  2. Dynamic effects of interactive elements

    a button element, the button is stretched when the mouse is moved in:

    1
    a {transition:0.2s;} //The extension has an animation process
    1
    a:hover {letter-spacing: 6px;} // lengthen when the mouse moves in

    a element button, the button jumps when the mouse moves in:

    1
    .social li a {transition:0.5s;}
    1
    2
    3
    .social li a:hover{
         transform:translateY(-10px); //The default direction of the Y axis is downward, and a negative value is required for upward jump.
    }

    The upper page shrinks to reveal the hidden lower page:

    1
    .showcase {transition:0.5s ease-in-out;} //ease-in-out is soft scaling.

​

  1. Remove the default style of li

    In ul or ol, set list-style: none;.

    ​

  2. Uncover the hidden bottom page

    Hidden pages generally only take up part of the viewport, so they need width. Note that this width will be used many times later, so it is best to set it to the variable --menu: 300px.

    1
    2
    3
    4
    .showcase.active { //The original upper page is opened from the right and moved to the left.
         right:var(--menu-width);
         width: calc(100%-var(--menu-width)); //Calculation when the unit is not uniform. If not changed, it will cause the page to exceed the left border.
    }

    The text in the hidden interface still needs to use absolute positioning, and in order to match the div width of the text with the hidden interface, you should use

    1
    .menu {width: var(--menu-width);}

  1. JS for Toggle Button

    Import the JS file: at the bottom of the body, <script src=''/>.

    Both buttons and elements that need to change (such as the parent page) require DOM manipulation.

    Toggle the active class: menuToggle.classList.toggle('active').


  2. pseudo-element

    Used before/after an element requires content and color attributes.

    1
    2
    3
    4
    .home>.text>h3::after {
         content: "abc";
         color: #c66;
    }

    Decorative pseudo-element:

    1
    2
    3
    4
    5
    6
    .ribbon::after {
      content: "Look at this orange box.";
      background-color: #FFBA10;
      border-color: black;
      border-style: dotted;
    }

  1. background-color and background

    background can not be set to color, but set to gradient color.


  2. Shadow effect

    Use box-shadow. Its first value is the deflection axis of x, the second value is the deflection axis of y, the third value is the degree of blurring (the higher the shadow, the more blurred, 0-100), the fourth value is the color, which can be Use rgba. E.g:

    1
    box-shadow: 25px 25px 75px rgba(0,0,0,0.25);

    Note that this effect is a one-sided shadow on the x-axis and y-axis, and only two sides can be considered at the same time. The four sides should use two layers of box-shadow.


    If you think one layer of shadow is too thin, you can also add multiple layers of shadow. Instead of writing another box-shadow, change the comma after rgba to continue writing the next layer of shadow.

    1
    box-shadow: 25px 25px 1px rgba(0,0,0,0.25), 10px 10px 70px rgba(0,0,0,0.25);

    Built-in shadow properties: inset. Its first and second values can be negative (positive for upper left, negative for lower right). It casts a shadow within the element’s bounds. The purpose of the built-in shadow is to cooperate with the external shadow to make bump effect.

    1
    box-shadow:inset -5px -5px 15px rgba(0,0,0,1);
    1
    2
    3
    4
    box-shadow: 25px 25px 1px rgba(0,0,0,0.25),
    10px 10px 70px rgba(0,0,0,0.25),
    inset -5px -5px 15px rgba(0,0,0,1),
    inset 5px 5px 15px rgba(0,0,0,0.5); //Inner and outer shadows to generate a three-dimensional effect.

Share