[GitHub front-end practice project--50 projects in 50 days--commodity loading effect--day08]

GitHub popular front-end practice projects, pure HTML, CSS, JS implementation, 50 projects in 50 days, one project per day, check-in activities, interpret the knowledge points in the project
GitHub project official website connection
50Projects in 50 Days

Project display

code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header">&nbsp;</div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
          &nbsp;
        </h3>
        <p class="card-excerpt" id="excerpt">
          &nbsp;
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              >&nbsp;</strong
            >
            <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #ecf0f1;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

img {
  max-width: 100%;
}

.card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  width: 350px;
}

.card-header {
  height: 200px;
}

.card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.card-content {
  background-color: #fff;
  padding: 30px;
}

.card-title {
  height: 20px;
  margin: 0;
}

.card-excerpt {
  color: #777;
  margin: 10px 0 20px;
}

.author {
  display: flex;
}

.profile-img {
  border-radius: 50%;
  overflow: hidden;
  height: 40px;
  width: 40px;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
  width: 100px;
}

.author-info small {
  color: #aaa;
  margin-top: 5px;
}

.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

JS

const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')

const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

setTimeout(getData, 2500)

function getData() {
  header.innerHTML =
    '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
  title.innerHTML = 'Lorem ipsum dolor sit amet'
  excerpt.innerHTML =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
  profile_img.innerHTML =-
    '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
  name.innerHTML = 'John Doe'
  date.innerHTML = 'Oct 08, 2020'

  animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
  animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}

Summary of knowledge points

CSS

placeholder property in input

The placeholder attribute in the input can provide prompt information for the input field, which will be displayed when the input field is empty

placeholder is a new attribute in H5

<input type="text" placeholder="account">
<input type="password" placeholder="password">

The information in the placeholder also supports modifying the style, you need to use the pseudo-class selector

Because the compatibility of different browsers is different, in order to adapt to various browsers, it should be written like this

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
    font-size: 10px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
    font-size: 10px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
    font-size: 10px;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
    font-size: 10px;
}

CSS border

Referenced from W3School

https://www.w3school.com.cn/css/css_border.asp

You can use the border property to set the border style of an element. The border of an element includes the upper border, right border, lower border, and left border. If you do not specifically indicate which border is, then it is the style of four borders.

border style

You can use the border-style property to specify the style of the border

The following values are allowed:

dotted - defines the dotted border
dashed - defines the dashed border
solid - defines a solid border
double - defines the double border
groove - Defines the 3D groove border. The effect depends on the border-color value
ridge - Defines the 3D ridge border. The effect depends on the border-color value
inset - defines the 3D inset border. The effect depends on the border-color value
outset - defines the 3D outset border. The effect depends on the border-color value
none - defines no border
hidden - defines the hidden border

You can also set different styles for the four borders, and you can write in the order of the upper border, right border, lower border, and left border.

div {
    width: 400px;
    height: 200px;
    border-style: dashed solid double dotted;
}

border width

Set the border width through the border-width property

div {
    width: 400px;
    height: 200px;
    border-style: dashed;
    border-width: 5px;
}

The four borders can also be set with different widths, or they can be written in the order of the top border, right border, bottom border, and left border.

div {
    width: 400px;
    height: 200px;
    border-style: dashed solid double dotted;
    border-width: 8px 5px 3px 15px;
}

border color

Set the border color through the border-color property

div {
    width: 400px;
    height: 200px;
    border-style: dashed solid double dotted;
    border-width: 8px 5px 3px 15px;
    border-color:blue
}

Similarly, it is also possible to define different colors of the four borders, just write in the order of the upper border, the right border, the lower border, and the left border.

div {
    width: 400px;
    height: 200px;
    border-style: dashed solid double dotted;
    border-width: 8px 5px 3px 15px;
    border-color:blue red green black;
}

Set each border individually

⭐️ For the above properties, if you set four values: happy:

border-color: red green blue black;

It is the top border, right border, bottom border, left border

⭐️If you set three values 😟

border-color: red green blue;

That is, the top border is red, the left and right borders are green, and the bottom border is blue

⭐️ If you set two values

border-color: red green;

Then the upper and lower borders are red, and the left and right borders are green.

⭐️If you set a value, then all four borders are like this

If you need to set a style for a border separately, it is very troublesome to use the above method to write

Just add the prefix of different borders in front of the style of the border

top border border-top
right border border-right
bottom border border-bottom
left border border-left

For example, to specify a style for the bottom border, you can write

div {
    width: 400px;
    height: 200px;
    border-bottom-style: dotted;
    border-bottom-color: red;
    border-bottom-width: 8px;
}

shorthand property

There are too many attributes of the border, which can be written in shorthand in the border attribute.

The border property is a shorthand property for each of the following border properties:

border-width
border-style (required)
border-color

border: 5px red solid;

border-right: 8px green dotted;

rounded border

General elements have right-angle borders by default

Want to achieve such a rounded border effect

You can use the **border-radius** property to achieve, the larger the value, the larger the rounded radian

border: 5px black solid;
border-radius: 40px;

If the element is a square, you can also use this property to draw a circle, just set it to half the width

div {
    width: 200px;
    height: 200px;
    border: 5px black solid;
    border-radius: 100px;
}

It is also possible to have different radians for each angle, like this

border: 5px black solid;
border-top-left-radius: 45px;
border-top-right-radius: 30px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 10px;

CSS fonts

font color

Use the color property to specify the color of the font

p{
    color: red;
}

font-family

font-family can specify different font families, such as Microsoft Yahei, Song, New Roman, etc.

.p1 {
  font-family: "Times New Roman", Times, serif;
}

Browsers will use this font family in turn according to whether there is such a font family locally.

The above code, for example, if you have the "Times New Roman" font family on your computer, then apply it. If not, you will look at the following font family. In the end, if there is no font family, the system default font family will be used.

font-style

font-style can specify the style of the font,

There are two commonly used properties for this property:

normal - the text is displayed normally
italic - text in italics

Generally, this attribute is used in italics

font-weight

font-weight can be used to specify the weight of the font

This property can be

normal	Defaults. Defines standard characters.
bold	Define bold characters.
bolder	Define thicker characters.
lighter	Define finer characters.
100
200
300
400
500
600
700
800
900	Define thick to thin characters. 400 is equivalent to normal, and 700 is equivalent to bold.

font-variant font-variant

The font-variant property specifies whether to display text in a small-caps font (small caps)

In small-caps fonts, all lowercase letters are converted to uppercase. However, the font size of the converted capital letters is smaller than the font size of the original capital letters in the text.

p {
  font-variant: normal;
}

p {
  font-variant: small-caps;
}

font-size

font-size can be used to specify the size of the font. The unit can be absolute size px or relative size em

16px = 1em

p {
  font-size: 14px;
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Font property shorthand

There are too many attributes of fonts, and it is troublesome to write them one by one, so you can also use the shorthand method

are written in the font attribute

The font property is a shorthand property for the following properties:

font-style
font-variant
font-weight
font-size/line-height
font-family

like this

p {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

Attributes that you do not want to write can be omitted, but the relative order cannot be changed

p {
    font: 20px Arial, sans-serif;
}

Note: The values of font-size and font-family are required and cannot be defaulted~~

CSS shadow

text shadow

Use text-shadow property to add shadow effect to text

The simplest and most straightforward usage is to specify horizontal shadows and vertical shadows

p {
    font-size: 25px;
    text-shadow: 2px 2px;
}

You can also specify the color of the shadow

p {
    font-size: 25px;
    text-shadow: 2px 2px red;
}

You can also specify the blurring degree of the shadow, the larger the value, the more blurred

p {
    font-size: 25px;
    text-shadow: 2px 2px 5px red;
  //			 Horizontal Shadow Vertical Shadow Blurred Pixels Shadow Color  
}

Summarize

text-shadow: Horizontal Shadow Vertical Shadow Blurred Pixels Shadow Color ;

multiple shadows

You can also add multiple shadow effects to a piece of text, just separate them with commas to achieve better results

p {
    font-size: 25px;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

box shadow

Use the box-shadow property to shadow elements

The simplest usage is to specify horizontal and vertical shadows

div {
    width: 100px;
    height: 100px;
    background-color: rgb(190, 87, 87);
    box-shadow: 5px 2px;
}

You can also specify how blurry the shadow should be

div {
    width: 100px;
    height: 100px;
    background-color: rgb(190, 87, 87);
    box-shadow: 5px 2px 10px;
}