Thưởng thức trà xanh chỉ với HTML và CSS

Mấy ngày nay, đi đâu cũng thấy “trà xanh”, từ trên mạng ra hẳn ngoài quán cafe, nghe mà đau hết cả đầu. Thiết nghĩ với cái thời tiết se se lạnh của miền Bắc, có một cốc “trà xanh” nóng trong một không gian yên tĩnh cùng với một chút nhạc sẽ xua đi được những mệt mỏi, muộn phiền.

Trong bài viết này, mình sẽ hướng dẫn các bạn thưởng thức trà xanh chỉ với HTML và CSS, rất phù hợp cho các bạn mới bắt đầu học về thiết kế trang web, đồ hoạ,…

Bước 1: Tạo file greentea.html

<div class="green-tea">
  <div class="cup"></div>
  <div class="tea"></div>
</div>Code language: HTML, XML (xml)

Bước 2: Tạo file style.css

Mình đặt một biến là –cup-color để trỏ đến cái màu xám (#dbe4e0) mình sử dụng trong bài. Bạn nào hỏi tại sao mình đặt biến thì chẳng qua là mình sử dụng nó nhiều nên đặt biến cho đỡ phải copy lại mã màu hoi, ahihi.

:root {
  --cup-color: #dbe4e0;
}Code language: CSS (css)

Giờ bắt đầu đến phần chính nhé!

Bước 3: Vẽ cốc trà

Đầu tiên, bạn hãy tưởng tượng xem là cái cốc nó có hình dạng như thế nào nhỉ, nếu muốn vẽ nó bằng code thì nên thiết kế ra sao?

Vì chỉ vẽ dưới dạng 2D nên theo mình thì 1 cái cốc sẽ có phần miệng cốc là hình hơi tròn (hình oval hay elip gì ấy chả nhớ), phần thân, phần quai cốc và phần đáy cốc cũng tròn tròn như miệng nó vậy =))

.green-tea {
  height: 100px;
  width: 100px;
  margin: auto;
  position: absolute;
  max-width: 500px;
  max-height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}Code language: CSS (css)

Mình vẽ phần thân của cốc trước, nó sẽ là một hình chữ nhật màu xám và mình đưa nó ra giữa màn hình.

.cup {
  height: 75px;
  width: 78px;
  background-color: var(--cup-color);
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}Code language: CSS (css)

Các bạn đã vẽ được nó chưa, nếu chưa thấy hiển thị thì xem lại xem mình đã nhúng CSS vào file HTML chưa nhé!

Tiếp đến là phần miệng và phần đáy của cốc, mình sử dụng thuộc tính before và after của CSS. Hiểu đơn giản thì before là thêm vào trước và after là thêm vào sau thế thôi.

Nếu các bạn chưa biết về thuộc tính này của CSS, hãy tham khảo bài viết Tìm hiểu before và after trong CSS của evondev.

Thuộc tính border-radius giúp ta bo tròn đối tượng tính từ vị trí góc và để before hay after hoạt động thì bắt buộc phải có thuộc tính content nha, để rỗng vì mình chả vẽ chữ gì vào đây cả.

.cup::before {
  background-color: var(--cup-color);
  border-radius: 50%;
  content: "";
  height: 45px;
  width: 78px;
  position: absolute;
  top: -50px;
}

.cup::after {
  background-color: var(--cup-color);
  border-radius: 50%;
  content: "";
  height: 45px;
  width: 78px;
  position: absolute;
  top: 78px;
}Code language: CSS (css)

Giờ mình sẽ chỉnh lại một chút để nhìn cái cốc sao cho nó tự nhiên nhất có thể.

Ở class .cup, mình bo phần thân của nó lại một chút để dễ khớp nối.

border-radius: 8%;Code language: HTTP (http)

Với before, mình chỉnh lại top và thêm thuộc tính border-top với solid để chắc chắn rằng nó sẽ thêm phần viền vào phần trên của hình.

top: -20px;
border-top: 2px solid var(--cup-color);Code language: HTTP (http)

Tương tự như before, after cũng thêm thuộc tính như vậy, chỉ khác là mình sẽ thêm phần viền vào phần dưới của hình.

top: 48px;
border-bottom: 2px solid var(--cup-color);Code language: HTTP (http)

Bước 4: Vẽ phần trà trong cốc

Phần trà vẽ cũng như phần miệng và phần đáy của cốc mình đã vẽ ở trên.

.tea {
    background-color: #709a05;
    border: 1px solid var(--cup-color);
    border-radius: 50%;
    height: 40px;
    width: 70px;
    margin: auto;
    position: absolute;
    top: -62px;
    right: 0;
    bottom: 0;
    left: 0;
  }Code language: CSS (css)

Thêm phần bóng màu trắng vào phần thành miệng cốc.

box-shadow: 0 -4px #edf4f0;Code language: CSS (css)

Tiếp tục sử dụng thuộc tính before và after để vẽ thêm vào phần trà cho nó giống thật chút =))

.tea::before {
  border-radius: 50%;
  box-shadow: 0 -3px #d2d998;
  content: "";
  height: 5px;
  width: 20px;
  transform: rotate(-22deg);
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 12px;
}Code language: CSS (css)

Thuộc tính transform với rotate giúp ta xoay được hình đó theo độ.

.tea::after {
    background-color: #d2d998;
    border-radius: 50%;
    content: "";
    height: 3px;
    width: 3px;
    position: absolute;
    top: 17px;
    right: 0;
    bottom: 0;
    left: 6px;
}Code language: CSS (css)

Bước 5: Vẽ bàn để cốc

<div class="desk">
  <div class="green-tea">
    <div class="cup"></div>
    <div class="tea"></div>
  </div>
</div>Code language: HTML, XML (xml)

Đơn giản chỉ là thêm cái background-color phía bên ngoài.

.desk {
  height: 80%;
  width: 80%;
  background-color: #c7a56e;
  margin: auto;
  position: absolute;
  top: 10%;
  left: 10%;
}Code language: CSS (css)

Bước 6: Vẽ phần quai cốc

<div class="green-tea">
  <div class="cup"></div>
  <div class="handle"></div>
  <div class="tea"></div>
</div>Code language: HTML, XML (xml)

Giờ ta sẽ suy nghĩ về cách vẽ phần quai. Có rất nhiều cách để vẽ phần quai cốc.

Mình chọn vẽ 2 hình oval to có màu của cốc và nhỏ có màu của bàn để chúng đè lên nhau tạo thành đường cong của quai cốc, sau đó sẽ chèn một hình chữ nhật có màu của cốc chèn lên chúng để làm mất đi phần màu của bàn.

Vẫn là tư duy thiết kế như trên, mình sẽ có phần code CSS cho handle, before và after.

.handle {
  height: 76px;
  width: 48px;
  border-radius: 50%;
  transform: rotate(-45deg);
  background-color: var(--cup-color);
  margin: auto;
  position: absolute;
  right: 65px;
  top: 20px;
}

.handle::before {
  height: 60px;
  width: 36px;
  border-radius: 50%;
  background-color: #c7a56e;
  content: "";
  margin: auto;
  position: absolute;
  transform: translate(18%, 15%);
}

.handle::after {
  height: 68px;
  width: 50px;
  background-color: var(--cup-color);
  content: "";
  margin: auto;
  position: absolute;
  transform: rotate(45deg);
  top: 18px;
  left: 21px;
}Code language: CSS (css)

Bước 7: Vẽ trà túi lọc

Trà túi lọc gồm phần thân, phần đầu hình tam giác và phần đáy.

<div class="desk">
  <div class="green-tea">
    <div class="cup"></div>
    <div class="handle"></div>
    <div class="tea"></div>
  </div>
  <div class="teapot"></div>
</div>Code language: HTML, XML (xml)

.teapot {
  height: 37px;
  width: 30px;
  background-color: #6ca785;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(110%, -5%);
}

 .teapot::before {
  height: 35px;
  width: 30px;
  background-color: #f7a398;
  content: "";
  margin: auto;
  position: absolute;
  transform: translate(0%, -6%);
}

.teapot::after {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 5px solid #f7a398;
  bottom: 39px;
  content: "";
  margin: auto;
  position: absolute;
}Code language: CSS (css)

Bước 8: Vẽ dây trà túi lọc

<div class="desk">
  <div class="green-tea">
    <div class="cup"></div>
    <div class="handle"></div>
    <div class="tea"></div>
  </div>
  <div class="teapot"></div>
  <div class="rope"></div>
</div>Code language: HTML, XML (xml)

.rope {
  height: 20px;
  width: 5px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(910%, -120%);
}

.rope::before {
  width: 40px;
  height: 10px;
  border: solid 5px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  transform: rotate(-135deg);
  right: -6px;
  bottom: 3px;
}

.rope::after {
  background-color: #000;
  border-radius: 50%;
  content: "";
  height: 4.5px;
  width: 4px;
  position: absolute;
  right: 27px;
  bottom: 27px;
  transform: rotate(-60deg);
}Code language: CSS (css)

Bước 9: Thêm logo cho cốc

Mình sẽ thêm logo vào phần thân cốc để nhìn cho nó đỡ trống trải.

<div class="desk">
  <div class="green-tea">
    <div class="cup"></div>
    <div class="handle"></div>
    <div class="tea"></div>
  </div>
  <div class="teapot"></div>
  <div class="rope"></div>
  <a href="https://codegym.vn/"
        ><img
          src="https://i.ibb.co/GHRWjKX/Logo-slogan.png"
          alt="Logo-slogan"
          border="0"
      /></a>
</div>Code language: HTML, XML (xml)

img {
  width: 50px;
  height: 16px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48%, 60%);
}Code language: CSS (css)

Bước 10: Vẽ khói bốc lên

Mãi mới nhờ được ông chú bên CodeGym code hộ cái animation bốc khói cho cái cốc.

<div class="desk">
  <div class="green-tea">
    <div class="cup"></div>
    <div class="handle"></div>
    <div class="tea"></div>
  </div>
  <div class="teapot"></div>
  <div class="rope"></div>
  <a href="https://ibb.co/TWt45VZ"
        ><img
          src="https://i.ibb.co/GHRWjKX/Logo-slogan.png"
          alt="Logo-slogan"
          border="0"
      /></a>
  <div class="smoke"></div>
</div>Code language: HTML, XML (xml)

.smoke {
  width: 70px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin: auto;
  top: 50%;
  background-image: -webkit-radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    -webkit-radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%),
    -webkit-radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent
          10%),
    -webkit-radial-gradient(55% 35%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%);
  background-image: -moz-radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    -moz-radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%),
    -moz-radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent
          10%),
    -moz-radial-gradient(55% 35%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%);
  background-image: radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent 15%),
    radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent 10%),
    radial-gradient(55% 35%, ellipse, rgba(255, 255, 255, 0.2), transparent 15%);
  animation: bk 11s infinite;
  transform: translate(-65%, -100%);
}

.smoke:after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  background-image: -webkit-radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    -webkit-radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%),
    -webkit-radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent
          10%);
  background-image: -moz-radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    -moz-radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent
          15%),
    -moz-radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent
          10%);
  background-image: radial-gradient(
      75% 59%,
      ellipse,
      rgba(255, 255, 255, 0.2),
      transparent 25%
    ),
    radial-gradient(25% 70%, ellipse, rgba(255, 255, 255, 0.2), transparent 15%),
    radial-gradient(35% 61%, ellipse, rgba(255, 255, 255, 0.2), transparent 10%);
  animation: bk 2s 1s infinite;
}

@keyframes bk {
  0% {
    background-position: 0 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    background-position: -20px -25px, -5px -25px, 0px -25px, 0px -25px;
    opacity: 0;
  }
}Code language: CSS (css)

Và đây là sản phẩm cuối cùng

và link code đầy đủ.

Kết luận sau khi thưởng thức trà xanh

Trên đây là phần hướng dẫn của mình về vẽ cốc “trà xanh” bằng HTML và CSS. Qua bài viết, các bạn cũng gặt hái được thêm một số kiến thức về CSS before và after phải không nào?

Mình không phải chuyên gia về CSS gì cả vì mình cũng không đi sâu về mảng này. Nếu các bạn có những cách hay, nhanh, ngắn gọn thì hãy bình luận dưới phần comment để mọi người cùng học hỏi nhé!

Cảm ơn các bạn đã xem bài viết. Chúc các bạn thành công!

Tham khảo các ứng dụng đơn giản dưới đây nhé!

• Xây dựng ứng dụng máy tính đơn giản bằng JavaScript
• Tỏ tình crush cùng ứng dụng Do You Love Me
• Hướng dẫn làm game Easy Math bằng JavaScript
• Cào phím cùng ứng dụng Faking Textarea đơn giản

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.