Have Fun with Chrome

Carousel

The most popular module in web pages. It's so big & easy to catch users' eye ball up. Let's take a quick look how to apply this effect with pure CSS.

<style>
.carousel {
  inline-size: 100%;
  block-size: fit-content;
  overflow: hidden;
  overflow-x: scroll;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__queue {
  display: flex;
}

.carousel__unit {
  inline-size: 100%;
  aspect-ratio: 2.5 / 1 ;
  flex-grow: 0;
  flex-shrink: 0;

  scroll-snap-align: center;
}
</style>

<div class="carousel">
  <div class="carousel__queue">
    <div class="carousel__unit">...</div>
    <div class="carousel__unit">...</div>
    <div class="carousel__unit">...</div>
    ...
  </div>
</div>

Navigation

Navigation is the main entrance to let users explore other useful web pages.

<style>
.navigation-unit {
  position: relative;
  inline-size: fit-content;
  block-size: fit-content;
}

.navigation-unit__submenu {
  position: absolute;
  display: none;
  ...
}

/* make it clickable */
.navigation-unit:focus-within .navigation-unit__submenu {
  display: block;
}

/* desktop user */
@media (hover: hover) and (min-width: 768px) {
  .navigation-unit:hover .navigation-unit__submenu {
    display: block;
  }
}
</style>

<div class="navigation-unit" tabindex="0">
  <p class="navigation-unit__p">
    Category
  </p>

  <div class="navigation-unit__submenu">
    ...
  </div>
</div>

Rolling Messages

It's very common to have a rolling messages module to announce some interesting or breaking news.

<style>
.rolling {
  inline-size: 100%;
  block-size: 2.5em;
  overflow: hidden;
}

.rolling__queue {
  inline-size: 100%;
  animation: rolling-act calc((500ms + 2s) * 10) ease infinite;
}

@keyframes rolling-act {
  0% { transform: translateY(0%); }
  8% { transform: translateY(0%); }
  10% { transform: translateY(-9.09%); }
  18% { transform: translateY(-9.09%); }
  20% { transform: translateY(-18.18%); }
  28% { transform: translateY(-18.18%); }
  ...
  ...
  99.99% { transform: translateY(-90.9%); }
  100% { transform: translateY(0%); }
}

@media (hover: hover) {
  .rolling__ens:hover {
    animation-play-state: paused;
  }
}
</style>

<div class="rolling">
  <div class="rolling__queue">
    <a class="rolling__a">text 1</a>
    <a class="rolling__a">text 2</a>
    ...
  </div>
</div>

Mutation

The next design generation - Container Queries. Web pages will have vary layouts patterns for our users.

<style>
.container {
  container-type: inline-size;
  container-name: item-cell;
}

.item-cell {
  inline-size: 100%;
  block-size: fit-content;
  display: block;
}

@container item-cell (min-width: 260px) {
  .item-cell {
    display: flex;
    flex-direction: row;
  }
  ...
}
</style>

<div class="container">
  <a href="?" class="item-cell">
    <img
      src="img/img-src-1x.jpg"
      srcset="
        img/img-src-1x.jpg 1x,
        img/img-src-2x.jpg 2x,
        img/img-src-3x.jpg 3x
      "
      width="1"
      height="1"
      alt="my image alt"
      loading="lazy"
    />
    <div class="item-cell__intro">
      ...
    </div>
  </a>
  ...
  ...
</div>

Direction and writing mode

Apply CSS logical properties and values for web page for more readable and different writing mode.

<style>
.container {
  position: relative;

  inline-size: 100%;
  block-size: 200px;

  inset-inline-start: 0;
  inset-block-size: 0;

  margin-inline: 1em;
  margin-block: 10px 20px;

  border-start-start-radius: .5em;
  border-end-end-radius: .5em;
}
</style>

HTML > Anchor

Native support. Easy use & easy share.

<style>
.category-unit {
  position: relative;
}

.category__anchor {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -100px;
}

.category__unit__detail {
  display: none;
}

#cateId-23000:target ~ .category__unit__detail {
  display: block;
}
</style>

<div class="category-unit">
  <em id="cateId-23000" class="category__anchor"></em>
  
  <a href="#cateId-23000" class="category__unit__a">
    <em class="category__unit__a__icon"></em>
    <div class="category__unit__a__texts">
      <p class="category__unit__a__p">
        女裝服飾
      </p>
      <p class="category__unit__a__em">
        女裝上衣 / 外套 / 洋裝褲子 / 牛仔
      </p>
    </div>
  </a>

  <div class="category__unit__detail">
    <a href="?" class="buttons">
      女裝服飾
    </a>
    <a href="?" class="buttons">
      外套
    </a>
    ...
    ...
  </div>
</div>

HTML > Dialog

The <dialog /> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.


<style>
/* overlay */
dialog::backdrop {
  background: #232a31;
  filter: opacity(.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* animation for open & close */
dialog[open],
dialog[open]::backdrop {
  animation: dialog-open 400ms cubic-bezier(.4, 0, .2, 1) normal;
}

dialog[close],
dialog[close]::backdrop {
  animation: dialog-close 400ms cubic-bezier(0, 0, .2, 1) normal;
}

@keyframes dialog-open {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dialog-close {
  from { opacity: 1; }
  to { opacity: 0; }
}
</style>

HTML > Detail

The <details /> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>