Share css3 design-pure CSS for cool iPhone glass bubbles

Demo address: http://xueduany.github.com/KitJs/KitJs/index.html#bubble

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

Recently, when I was working on a mobile phone project, I needed to implement a bubble effect similar to the iPhone SMS effect.

Here, I will share my experiences on implementation,

 

First, we will analyze the characteristics of the iPhone bubble effect.

1. rounded corner

2. Downward outer shadow

3. Inner shadows above and below

4. reflection of an embedded glass bubble in the top

 

First define a container. The box model is display: inline-block, which facilitates adaptive text size.

. Bubble {
Position: relative;
Display: inline-block;
Min-width: 30px;
Max-width: 200px;
Word-break: Break-all;
Word-wrap: Break-word;
Min-Height: 22px;
Background: # d2d2d2;
Border-radius: 15px;
Margin-bottom: 20px;
Padding: 6px 8px;
-WebKit-box-Shadow: 0px 1px 2px #000, inset 0px 4px 4px rgba (255,255,255, 0,. 3), inset 0px-4px 4px rgba (,. 5 );
-Moz-Shadow: 0px 1px 2px #000, inset 0px 4px 4px rgba (255,255,255, 0,. 3), inset 0px-4px 4px rgba (,. 5 );
Box-Shadow: 0px 1px 2px #000, inset 0px 4px 4px rgba (0,0, 0,. 3), inset 0px-4px 4px rgba (255,255,255,. 5 );
}

Set word breaking to avoid too long text, open the container, and set the minimum width and maximum width.

Set the rounded corner, border-radius

Set box-Shadow: 0px 1px 2px #000 to implement the External shadow of the bubble.

Inset 0px 4px 4px rgba (, 0,. 3) is the shadow inside the upper border

Inset 0px-4px 4px rgba (255,255,255,. 5) is the inner shadow of the lower border

 

Next, we need to implement the reflection effect of the last effect embedded with glass bubbles.

. Bubble. Content {
Position: relative;
Padding: 0 4px;
}
. Bubble. Content: Before {
Content :'';
Position: absolute;
Margin: auto;
Top:-5px;
Left: 0;
Width: 100%;
Height: 12px;
Background-image:-WebKit-linear-gradient (top, rgba (255,255,255, 1) 0%, rgba (255,255,255, 0.2) 90%, rgba (255,255,255, 0) 90% );
Background-image:-moz-linear-gradient (top, rgba (255,255,255, 1) 0%, rgba (255,255,255, 0.2) 90%, rgba (255,255,255, 0) 90% );
Border-radius: 10px
}

 

Embed a display block in the bubble and use the before pseudo element of the block to implement a gradient bubble with rounded corners.

Background-image:-WebKit-linear-gradient (top, rgba (255,255,255, 1) 0%, rgba (255,255,255, 0.2) 90%, rgba (255,255,255, 0) 90% );

at last, use the before and after pseudo elements of the bubble to implement the triangle

. bubble: Before {
content: '';
display: block;
font-size: 0;
width: 0;
height: 0;
border-width: 6px;
position: absolute;
bottom:-12px;
left: 12px;
border-color: #4a4c50 transparent #4a4c50;
border-style: solid dashed solid;
}< br>. bubble: After {
content: '';
display: block;
font-size: 0;
position: absolute;
bottom: -9px;
left: 13px;
width: 0;
Height: 0;
border-width: 5px;
border-color: # e8e8e8 transparent # e8e8e8;
border-style: solid dashed solid;
}

 

Finally: