fork download
copy 
  1. <! DOCTYPE html>
  2. <html lang="th">
  3. <head>
  4. <meta
  5. charset="UTF-8"> <meta
  6. name="viewport" content="width=device-
  7. width,
  8. initial-scale=1. 0">
  9. <title>รูปหัวใจ</title> ‹style>
  10. body
  11. aisplay:Elex;/*จัดให้อยู่ก่งกลางหน้าจอ*/
  12. justify-content:center;/*จัดให้อยู่
  13. กึ่งกลางแนวนอน
  14. align-items:center;/*จัดให้อยู่กึ่งกลาง
  15. แนวตั้ง*/
  16. ความสูงของviewport*/
  17. min-height:100ch;/*ความสูงขั้นต่ำเท่ากับ
  18. background-color:#E0E0E0;/*สีพื้นหลัง
  19. */
  20. margin:0;/*ลบmarginเริ่มต้น*/
  21. }
  22. relativeเพื่อให้pcdo-Clehentreอ้างอิ่งได้หนดตำแหน่งแบบ
  23. width:100px;/*ความกว้างของหัวใจ
  24. height:100px;/*ความสูงของหัวใจ
  25. background-color: red;
  26. สีของหัวใจ
  27. transt: ottene di
  28. 45องศาเพื่อสร้างส่วนล่างของหัวใจ*/
  29. 0.2);/*เพิ่มเงา*/
  30. box-shadow: 0 10px 20px rgba(0, 0, 0,
  31. border-radius:10px;/*ทำให้มุมโค้งมน
  32. เล็กน้อย
  33. *
  34. }
  35. •heart: :before,
  36. •heart: : after
  37. {
  38. content:
  39. elements
  40. */
  41. absolute */
  42. /*จำเป็นสำหรับpseudo-
  43. position:absolute;/*กำหนดตำแหน่งแบบ width:100px;/*ความกว้างของวงกลม*/
  44. height:100px;/*ความสูงของวงกลม*/
  45. background-color: red;
  46. border-radius:508;/*ทำให้เป็นวงกลม*/
  47. }
  48. •heart: : before {
  49. top: -50px;
  50. /*เลือนวงกลมด้านบนขึ้นไป*/
  51. left:0;/*จัดตำแหน่งให้อยู่ตรงกลางด้านบน
  52. */
  53. }
  54. •heart: :after {
  55. left: 50px;
  56. 10p:0509*จัดตำแหนงให้อยู่ตรงกลางด้านข้ว
  57. */
  58. </style>
  59. </head>
  60. <body>
  61. รูปหัวใจ*/
  62. </ body>
  63. </html>
  64. class="heart"></div>/*divที่จะใช้สร้าง
Success #stdin #stdout 0.04s 25468KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
<! DOCTYPE html>
<html lang="th">
<head>
<meta
charset="UTF-8"> <meta
name="viewport" content="width=device-
width,
initial-scale=1. 0">
<title>รูปหัวใจ</title> ‹style>
body
aisplay:Elex;/*จัดให้อยู่ก่งกลางหน้าจอ*/
justify-content:center;/*จัดให้อยู่
กึ่งกลางแนวนอน
align-items:center;/*จัดให้อยู่กึ่งกลาง
แนวตั้ง*/
ความสูงของviewport*/
min-height:100ch;/*ความสูงขั้นต่ำเท่ากับ
background-color:#E0E0E0;/*สีพื้นหลัง
*/
margin:0;/*ลบmarginเริ่มต้น*/
}
relativeเพื่อให้pcdo-Clehentreอ้างอิ่งได้หนดตำแหน่งแบบ
width:100px;/*ความกว้างของหัวใจ
height:100px;/*ความสูงของหัวใจ
background-color: red;
สีของหัวใจ
transt: ottene di
45องศาเพื่อสร้างส่วนล่างของหัวใจ*/
0.2);/*เพิ่มเงา*/
box-shadow: 0 10px 20px rgba(0, 0, 0,
border-radius:10px;/*ทำให้มุมโค้งมน
เล็กน้อย
*
}
•heart: :before,
•heart: : after
{
content:
elements
*/
absolute */
/*จำเป็นสำหรับpseudo-
position:absolute;/*กำหนดตำแหน่งแบบ width:100px;/*ความกว้างของวงกลม*/
height:100px;/*ความสูงของวงกลม*/
background-color: red;
border-radius:508;/*ทำให้เป็นวงกลม*/
}
•heart: : before {
top: -50px;
/*เลือนวงกลมด้านบนขึ้นไป*/
left:0;/*จัดตำแหน่งให้อยู่ตรงกลางด้านบน
*/
}
•heart: :after {
left: 50px;
10p:0509*จัดตำแหนงให้อยู่ตรงกลางด้านข้ว
*/
</style>
</head>
<body>
รูปหัวใจ*/
</ body>
</html>
class="heart"></div>/*divที่จะใช้สร้าง
https://ideone.com/3YxClg
language:
PHP (php 7.3.5)
created:
7 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!