IT Course CSS Basics 026_Display, Visibility, Effects

1
Hides the element, making it invisible on the page and not taking up space or affecting layout. The element will not be displayed on the page.

1
    .example{
2
        display: none;
3
    }

1
    <div class="example">Test text</div>ABC123

1
Displays the element as a block-level element. It will be displayed as a block on the page, with width defaulting to 100% of the parent container.
2
A block element is an element that takes up the full width, with line breaks before and after.

1
  .base{
2
      background-color: deepskyblue;
3
  }
4
  .example{
5
    display: block;
6
  }

1
    <a class="base example" href="">Hyperlink test</a>
2
    <br>
3
    <a class="base" href="">Hyperlink test</a>

1
Displays the element as an inline element. Elements are displayed on the same line, do not occupy a line by themselves, and width is determined by content.
2
Inline elements only require the necessary width and do not force line breaks.

1
  .base{
2
        background-color: aquamarine;
3
  }
4
  .example{
5
    display: inline;
6
  }

1
    <p class="base example">Paragraph test</p>
2
    <p class="base">Paragraph test</p>

1
Displays the element as an inline-block element. Elements are displayed on the same line, but can have width, height, and other block-level element properties set.

1
  .example1{
2
      display: inline-block;
3
      width: 100px;
4
      height: 100px;
5
      background-color: cornflowerblue;
6
  }
7
  .example2{
8
      background-color: cornflowerblue;
9
  }

1
    <p class="example1">Paragraph test</p>
2
    <p class="example1">Paragraph test</p>
3
    <p class="example2">Paragraph test</p>

1
Sets the element to be visible.

1
  .example{
2
      visibility: visible;
3
  }

1
  <div class="example">Test text</div>ABC123

1
Sets the element to be invisible, but the hidden element still takes up the same space as before it was hidden. In other words, although the element is hidden, it still affects the layout.

1
  .example{
2
      visibility: hidden;
3
  }

1
  <div class="example">Test text</div>ABC123

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.example{
7
    opacity: 0.5;
8
    /* 50% transparency */
9
}

1
    <div class="base"></div>
2
    <br>
3
    <div class="base example"></div>

1
    .example{
2
        text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8);
3
        /* 2px horizontal offset, 5px vertical offset, 5px blur radius, color rgba(243, 40, 40, 0.8) */
4
        font-size: 100px;
5
    }

1
    <div class="example">Test text</div>

1
    .example{
2
        background: linear-gradient(to bottom, red, blue);
3
        /* Gradient from top to bottom, red to blue */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
    .example{
2
        background: radial-gradient(circle, red, blue);
3
        /* Circular gradient, red to blue */
4
        height: 100px;
5
    }

1
    <div class="example"></div>

1
.base {
2
    height: 100px;
3
    width: 100px;
4
    background-color: lightblue;
5
}
6
.example1 {
7
    transform: translate(50px, 20px);
8
    /* Move 50px horizontally, 20px vertically */
9
}
10
.example2 {
11
  transform: scale(0.5);
12
  /* Scale element to 1.5 times original */
13
}
14
.example3 {
15
    transform: rotate(45deg);
16
    /* Rotate 45 degrees clockwise */
17
}
18
.example4 {
19
    transform: skew(50deg, 20deg);
20
    /* Skew 30 degrees horizontally, 20 degrees vertically */
21
}
22
.example5 {
23
    transform: translate(50px, 60px) rotate(45deg) scale(1.5);
24
}

1
    <div class="base example1"></div>
2
    <div class="base example2"></div>
3
    <div class="base example3"></div>
4
    <div class="base example4"></div>
5
    <div class="base example5"></div>