Cách Tạo Đoạn Văn Bản Hình Trái Tim Dùng Để Tỏ Tinh

Chào bạn! rất vui được chào đón bạn đến với blog VeoSpot, và hôm nay mình sẽ hướng dẫn các bạn cách tạo đoạn văn bản bằng hình trái tim dùng để tỏ tình, rất đơn giản chỉ sử dụng CSS, HTML, Javascript, bạn hãy làm theo mình nha.

Ảnh demo chữ hình trái tim dùng để tỏ tình.

Cách thực hiện tạo đoạn văn hình trái tim.

Bước 1: Truy cập blogger.com > dán đoạn code font chữ vào trên thẻ đóng

</head>

<link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">




Bước 2: Chèn CSS

#love{width:1000px;height:500px;margin:0 auto;background-color:mistyrose;font-family:'Montez',cursive}
span{color:transparent}
#left{float:left;height:500px;width:500px;shape-outside:polygon(51.33% 12px,100.03% 2.17%,97.87% 19.59%,92.11% 16.84%,83.26% 12.61%,72.27% 12.33%,59.8% 17.47%,53.86% 27.8%,52.21% 37.23%,58.14% 52.53%,68.47% 64.73%,99% 87%,217px 86.93%)}
#right{float:right;height:500px;width:500px;shape-outside:polygon(70.33% 13px,0.92% 2.68%,0.92% 19.57%,5.42% 18.47%,9.85% 15.59%,23.11% 11.65%,32.26% 13.97%,38.67% 16.73%,43.4% 23.07%,47.06% 29.8%,46.41% 44.23%,38.14% 57.33%,26.67% 68.73%,0.4% 87%,353px 84.73%)}
p{text-align:justify;color:#922a2a}
p:before{content:"Hello World";position:absolute;font-size:75px;top:40px;letter-spacing:8px;word-spacing:11px;white-space:nowrap}
#span2{color:inherit}

Bước 3: Dán HTML vào nơi cần hiển thị.

<div id="love">
  <div id="left"></div>
  <div id="right"></div>
  <p>Lorem ipsum dolor siet amett yes<span>oern</span>etur adipisicing elit. Magni repellat recusandae quisquam distinctio excepturi tempore odit! Doloribus doloremque quisquam quasi cum deserunt illo neque, ea fugiat unde libero eaque sit.Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Magni repellat recusandae quisquam distinctio excepturi tempore odit!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni repellat recusandae quisquam distinctio excepturi tempore odit! . Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Magni repellat recusandae quisquam distinctio excepturi tempore odit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni repellat recusandae quisquam distinctio excepturi tempore odit!Lorem
    ipsum dolor sit amet consectetur adipisicing elit. Magni repellat recusand! adipisicing elit. Magni repellat recusand! adipisicing elit. Magni repellat recusand recusan som et. Lorem ipsum dolor Lorem ipsum dolor Lsores! <span id="span2">X<span> </p>
</div>

- Vậy là mình đã hướng dẫn bạn xong cách tạo đoạn văn hình ảnh trái tim để bạn có thể tỏ tình với Crush của bạn rui đó...haha

- Bạn có thể ủng hộ mình bằng cách Follower blog để mình có động lực viết blog cho bạn đọc nhé.

- Nếu bạn chưa hiểu thì có thể xem video trên kênh Veostudio Official nhé.

Xem Thêm: 

+ Cách tạo Menu dọc bên trái cực đẹp.

+ Cách tạo Menu Mega đa cấp nhiều mục con chuyên nghiệp.

+ Tư vấn thiết kế website từ Google vs Wordpress.