½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > CSS > ±âŸȿ°ú > Comic Speech Bubbles »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
Javascript
PHP
asp
CSS
html
mysql
jquery
image
Mobile
API
slide
°Ô½ÃÆÇ
¸Þ´º
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Comic Speech Bubbles
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸȿ°ú
´Ù¿î·Îµå Ƚ¼ö 4 ȸ
°£´Ü¼³¸í ¸»Ç³¼± µðÀÚÀÎ ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ



HTML°ú CSS·Î Á¦ÀÛµÈ ¸»Ç³¼± µðÀÚÀÎ ÀÔ´Ï´Ù.
ÄÚµå ¹× µ¥¸ð´Â µ¥¸ð¸µÅ©¸¦ ÅëÇؼ­ È®ÀÎÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.

HTML
 <div class="wrapper">
<div class="bubble circle"></div>
<div class="bubble oval"></div>
<div class="bubble oval rounded"></div>
<div class="bubble egg"></div>
<div class="bubble egg-shaped"></div>
<div class="bubble egg-shaped rounded"></div>
<div class="bubble square"></div>
<div class="bubble rectangle"></div>
<div class="bubble rectangle rounded"></div>
</div>


CSS
:root {
--c1: #fbfdfa;
--c2: #cbdce5;
 
}
 
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(45deg, #ccd9e2, #eaedf2);
}
 
body * {
box-sizing: border-box;
}
 
.wrapper {
width: 90vmin;
height: 90vmin;
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
align-content: space-around;
margin-top: -5vmin;
filter: 
drop-shadow(-0.1vmin 0.2vmin 0.01vmin #7ea2bc90) 
drop-shadow(-0.2vmin 0.3vmin 0.01vmin #7ea2bc80) 
drop-shadow(-0.3vmin 0.4vmin 0.01vmin #7ea2bc70) 
drop-shadow(-0.4vmin 0.5vmin 0.01vmin #7ea2bc60)  
drop-shadow(-0.5vmin 0.6vmin 0.01vmin #7ea2bc50)  
drop-shadow(-0.6vmin 0.7vmin 0.01vmin #7ea2bc40)   
drop-shadow(-0.7vmin 0.8vmin 0.01vmin #7ea2bc30)  
drop-shadow(-0.8vmin 0.9vmin 0.01vmin #7ea2bc20)  
drop-shadow(-0.9vmin 1vmin 0.01vmin #7ea2bc10);
}
 
.bubble {
width: 20vmin;
height: 20vmin;
border-radius: 1vmin;
position: relative;
background: linear-gradient(25deg, var(--c1), var(--c2));
box-shadow: -0.25vmin 0.25vmin 0.25vmin 0.05vmin #fff inset;
}
 
.bubble.circle {
border-radius: 100%;
}
 
.bubble.square {
width: 20vmin;
}
 
.bubble.rectangle {
width: 30vmin;
}
 
.bubble.rounded {
border-radius: 5vmin;
}
 
.bubble.oval {
width: 30vmin;
border-radius: 10vmin;
}
 
.bubble.oval.rounded {
width: 30vmin;
border-radius: 100%;
}
 
.bubble.egg {
border-radius: 75% 55% 75% 55% / 55% 55% 67% 75%;
}
 
.bubble.egg-shaped {
width: 30vmin;
border-radius: 70% 40% 65% 45% / 75% 80% 65% 60%;
}
 
.bubble.egg-shaped.rounded {
border-radius: 75% 55% 75% 55% / 55% 55% 67% 75%;
}
 
.bubble:after {
--beak: #f2f7f6;
content: "";
position: absolute;
box-sizing: border-box;
width: 6vmin;
height: 6vmin;
bottom: -5.75vmin;
right: 7vmin;
background-repeat: no-repeat;
background: linear-gradient(-135deg, var(--beak) 0 4.25vmin, #fff0 0 100%);
}
 
.bubble.circle:after {
right: 6vmin;
--beak: #f3f8f7;
}
 
.bubble.rectangle:after {
--beak: #edf3f4;
}
 
.bubble.oval.rounded:after {
right: 10vmin;
}
 
.bubble.egg-shaped:after {
right: 12vmin;
}
 
.bubble.circle:after,
.bubble.oval:after,
.bubble.egg:after,
.bubble.egg-shaped:after {
background: radial-gradient(circle at 150% 35%, #fff0 5vmin, var(--beak) calc(5vmin + 1px) 100%);
border-radius: 0 0 0 100%;
bottom: -5.5vmin;
--beak: #f3f8f7;
width: 7vmin;
}
.bubble.oval:after {
--beak: #eef4f4;
}

 

³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 14177521 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.