亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3制作氣泡對話框的實例教程

yanhaijing   發(fā)布時間：2016-05-10 11:44:07   作者：顏海鏡   我要評論
這篇文章主要介紹了CSS3制作氣泡對話框的實例教程,同時講到了對氣泡的垂直居中的設(shè)定技巧,需要的朋友可以參考下

創(chuàng)建一個100%CSS的氣泡，我們從下面的標記考試。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="speech-bubble">Hi there!</div>  

接下來，應(yīng)用一些基本樣式。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble {   
  2.     position: relative;   
  3.     background-color: #292929;   
  4.     
  5.     width: 200px;   
  6.     height: 150px;   
  7.     line-height: 150px; /* 垂直居中 */  
  8.     
  9.     color: white;   
  10.     text-align: center;   
  11. }  

2016510114442520.jpg (523×398)

箭頭將通過after偽元素實現(xiàn)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble:after {   
  2.     content: '';      
  3. }   
  4. :before和:after偽元素可以用來在元素內(nèi)容之前或之后插入生成內(nèi)容。 接下來，只是簡單復(fù)制箭頭，并定位到適當(dāng)?shù)奈恢?。我們開始通過絕對定位的內(nèi)容，重置寬度和高度，并應(yīng)用邊界顏色。   
  5. .speech-bubble:after {   
  6.   content: '';   
  7.   position: absolute;   
  8.     
  9.   width: 0;   
  10.   height: 0;   
  11.     
  12.   border: 10px solid;   
  13.   border-color: red green blue yellow;   
  14. }  

2016510114508238.jpg (529×406)

因為我們知道我們想要向下的箭頭，上面的圖片表明，除了紅色(或上)邊境其他的都應(yīng)該被省略，或者設(shè)置為透明。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble:after {   
  2.   content: '';   
  3.   position: absolute;   
  4.     
  5.   width: 0;   
  6.   height: 0;   
  7.     
  8.   border: 10px solid;   
  9.   border-top-color: red;   
  10. }  

2016510114530648.jpg (521×401)

當(dāng)創(chuàng)建CSS形狀是，因為我們不能使用width屬性來指定箭頭的寬度，而是應(yīng)該使用border-width屬性。在這種情況下，箭頭應(yīng)該更大點；所以border-width可以增加到15px。我們將箭頭定位到容器的底部居中，通過利用top和left屬性。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble:after {   
  2.   content: '';   
  3.   position: absolute;   
  4.     
  5.   width: 0;   
  6.   height: 0;   
  7.     
  8.   border: 15px solid;   
  9.   border-top-color: red;   
  10.     
  11.   top: 100%;   
  12.   left: 50%;   
  13. }  

2016510114554761.jpg (526×438)

到這里就差不多了；最后一個步驟是更新箭頭的顏色和容器的背景顏色相同。定位也需要修改，根據(jù)邊界的寬度(15 px)。當(dāng)我們在這里,我們還將應(yīng)用一個微妙border-radius屬性來使容器更像氣泡。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble {   
  2.    /* … 其他樣式 */  
  3.    border-radius: 10px;   
  4. }   
  5.     
  6. .speech-bubble:after {   
  7.   content: '';   
  8.   position: absolute;   
  9.     
  10.   width: 0;   
  11.   height: 0;   
  12.     
  13.   border: 15px solid;   
  14.   border-top-color: #292929;   
  15.     
  16.   top: 100%;   
  17.   left: 50%;   
  18.   margin-left: -15px; /* 調(diào)整邊框?qū)挾?nbsp;*/  
  19. }  

2016510114622476.jpg (526×431)

不錯，不是嗎？將這代碼抽象為幾個可重用的類，好應(yīng)用到你將來的項目。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*  
  2.    對話氣泡  
  3.    用法：使用.speech-bubble和.speech-bubble-DIRECTION類  
  4.    <div class="speech-bubble speech-bubble-top">Hi there</div>  
  5. */  
  6.     
  7. .speech-bubble {   
  8.   position: relative;   
  9.   background-color: #292929;   
  10.     
  11.   width: 200px;   
  12.   height: 150px;   
  13.   line-height: 150px; /* 垂直居中 */  
  14.     
  15.   color: white;   
  16.   text-align: center;   
  17.   border-radius: 10px;   
  18.     
  19.   font-family: sans-serif;   
  20. }   
  21.     
  22. .speech-bubble:after {   
  23.   content: '';   
  24.   position: absolute;   
  25.     
  26.   width: 0;   
  27.   height: 0;   
  28.     
  29.   border: 15px solid;   
  30. }   
  31.     
  32.     
  33. /* 箭頭的位置 */  
  34.     
  35. .speech-bubble-top:after {   
  36.   border-bottom-color: #292929;   
  37.     
  38.   left: 50%;   
  39.   bottombottom: 100%;   
  40.   margin-left: -15px;     
  41. }   
  42. .speech-bubble-rightright:after {   
  43.   border-left-color: #292929;   
  44.     
  45.   left: 100%;   
  46.   top: 50%;   
  47.   margin-top: -15px;      
  48. }   
  49.     
  50. .speech-bubble-bottombottom:after {   
  51.   border-top-color: #292929;   
  52.     
  53.   top: 100%;   
  54.   left: 50%;   
  55.   margin-left: -15px;     
  56. }   
  57.     
  58. .speech-bubble-left:after {   
  59.   border-right-color: #292929;   
  60.     
  61.   top: 50%;   
  62.   rightright: 100%;   
  63.   margin-top: -15px;      
  64. }  

2016510114727335.jpg (311×973)

補充:更好的垂直居中
使用line-height實現(xiàn)垂直居中的一個缺點是僅限于一行。當(dāng)文本需要兩行或兩行以上時，每一行的高度將會太大。一個聰明的解決辦法是設(shè)置氣泡的display屬性為table，和包裝段落文本的display為table-cell。這就允許我們將文本設(shè)為垂直居中。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="speech-bubble speech-bubble-top">  
  2.     <p>Text goes here.</p>  
  3. </div>  

接下來，修改CSS。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .speech-bubble {   
  2.  /* 其他樣式 */  
  3.     
  4.   display: table;   
  5. }   
  6.     
  7. .speech-bubble p {   
  8.   display: table-cell;   
  9.   vertical-align: middle;   
  10. }  

2016510114652536.jpg (611×444)

如果引用display: table 帶來可怕的表格布局的老式回憶，別擔(dān)心。這些屬性是指顯示一個元素的樣式。
我們不局限于三角形；CSS能產(chǎn)生各種各樣的形狀,甚至心和生物危害標志！
2016510114817712.jpg (391×384)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .biohazard {   
  2.   width: 0; height: 0;   
  3.     
  4.   border: 60px solid;   
  5.   border-radius: 50%;   
  6.     
  7.   border-top-color: black;   
  8.   border-bottom-color: black;   
  9.   border-left-color: yellow;   
  10.   border-right-color: yellow;   
  11. }  

相關(guān)文章

最新評論