Tạo đoạn văn bản hình trái tim dùng để tỏ tình :) - Khôi Ròm Blog

Tạo đoạn văn bản hình trái tim dùng để tỏ tình :)

Khôi Ròm - tháng 7 15, 2018 - CSS, Thủ thuật blogspot
Thủ thuật này các bạn có thể áp dụng để tạo ra một trang web tỏ tình crush ... hoặc cũng có thể trang trí blog/website.

Cách thực hiện

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>
Lưu ý cẩn thận bị trùng CSS nhé các bạn. Bước 4: Lưu lại và hưởng thụ
Chúc các bạn thành công!