欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

CSS Code復制內(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復制內(nèi)容到剪貼板
  1. .speech-bubble:after {   
  2.     content: '';      
  3. }   
  4. :before和:after偽元素可以用來在元素內(nèi)容之前或之后插入生成內(nèi)容。 接下來，只是簡單復制箭頭，并定位到適當?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復制內(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)

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

CSS Code復制內(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)。當我們在這里,我們還將應(yīng)用一個微妙border-radius屬性來使容器更像氣泡。

CSS Code復制內(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復制內(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)垂直居中的一個缺點是僅限于一行。當文本需要兩行或兩行以上時，每一行的高度將會太大。一個聰明的解決辦法是設(shè)置氣泡的display屬性為table，和包裝段落文本的display為table-cell。這就允許我們將文本設(shè)為垂直居中。

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

接下來，修改CSS。

CSS Code復制內(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 帶來可怕的表格布局的老式回憶，別擔心。這些屬性是指顯示一個元素的樣式。
我們不局限于三角形；CSS能產(chǎn)生各種各樣的形狀,甚至心和生物危害標志！
2016510114817712.jpg (391×384)

CSS Code復制內(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)文章

  • 純CSS實現(xiàn)氣泡對話框尖角處理方案

    這篇文章主要介紹了純CSS實現(xiàn)氣泡對話框尖角處理的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
    2017-06-26

  • JS+CSS3實現(xiàn)的確認框和對話框彈出并關(guān)閉特效源碼

    是一段通過CSS和JS代碼來實現(xiàn)確認框和對話框特效代碼，點擊相關(guān)圖標會自動彈出確認框和對話框的無刷新遮罩層，并分別有確認、取消等按鈕，點擊后，該確認框和對話框就會自
    2016-09-07

  • CSS3實現(xiàn)可兼容移動端的超酷彈出對話框效果源碼

    這是一款基于HTML5和CSS3的彈出對話框，一共有4種類型，每種對話框彈出的時候均帶有一定的動畫特效，比如成功時候的動畫和加載時候的動畫，都非常不錯。適合在移動端使用。
    2015-12-08

  • jQuery結(jié)合Css3制作的多風格輕量級彈出動感對話框插件特效源碼

    jQuery結(jié)合Css3制作的多風格輕量級彈出動感對話框插件特效源碼，是一段非常適合網(wǎng)站登錄或注冊以及需要填寫內(nèi)容時使用的對話框代碼，本段代碼可以彈出幾十種具有動畫特效的
    2014-10-30

  • 用純css3和html制作泡沫對話框?qū)崿F(xiàn)代碼

    泡沫對話框是一種比較流行的趨勢因為它改變了傳統(tǒng)，通常情況下都是使用html和javascript或者是圖片來實現(xiàn)，接下來為大家介紹下使用css3配合html來實現(xiàn)一些簡單的泡沫對話框
    2013-03-21

  • 純CSS代碼實現(xiàn)各類氣球泡泡對話框效果

    利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒有兼容性的問題，我之前在純CSS實現(xiàn)各類氣球泡泡對話框效果一文中算是比較詳細的講述了CSS
    2010-12-27

  • CSS實現(xiàn)對話框小尾巴功能

    對話框小尾巴，估計大家在實際開發(fā)中應(yīng)該經(jīng)常遇到過，省事點的就是叫設(shè)計小姐姐給切個帶小尾巴的背景圖，那不省事的呢？這篇文章主要介紹了CSS對話框小尾巴,需要的朋友可以
    2019-05-16

最新評論