手机在线精品中文字幕,精品一区一区二三区四区五区,亚洲中文字幕在线19页

技術(shù)頻道 - html技術(shù)

css ribbons(3D帶狀)設(shè)計(jì)，適合標(biāo)題使用

作者:admin 時(shí)間:2020-8-6 10:10:8 瀏覽:

一些網(wǎng)頁的標(biāo)題或菜單呈帶狀樣式，看起來挺復(fù)雜挺難實(shí)現(xiàn)的？其實(shí)使用css-ribbons(帶狀)設(shè)計(jì)出來并不是很困難，本文將給大家介紹一個(gè)css-ribbons實(shí)例，適合用于標(biāo)題樣式。

css ribbons(帶狀)

demo

為什么需要CSS-Ribbons(css帶狀)設(shè)計(jì)？

實(shí)際上，3D帶狀設(shè)計(jì)你可以只用一張圖片就能達(dá)到目的。但是，使用CSS創(chuàng)建具有以下優(yōu)點(diǎn)：

沒有圖像，沒有額外的HTTP請(qǐng)求
靈活性
于更新：顏色，大小和縮放

CSS-Ribbons(css帶狀)結(jié)構(gòu)

最初，假設(shè)您有個(gè)包裝器padding: 20px。這是怎么回事padding？通常，您需要為包裝盒留一個(gè)間距(spacing)，并且在下面看到與ribbon(帶狀)相關(guān)的重要性。

包裝器padding: 20px

現(xiàn)在添加將成為ribbon(帶狀區(qū))的元素。只需要一個(gè)元素，例如h1：

帶有一些樣式的H1元素

還記得上面的20px填充值嗎？為了構(gòu)建您的ribbon(帶狀區(qū))，您需要克服框邊的標(biāo)題：

h1 {
/* top:0, right:-30px, bottom:0, left:-30px */
margin: 0 -30px;
}

此外，要添加拐角，我們將使用由偽元素制成的CSS三角形（參考文章：44個(gè)CSS3制作的形狀圖形(shape)）。

h1 {
    text-align: center;
    position: relative;
    color: #fff;
    margin: 0 -30px 30px -30px;
    padding: 10px 0;
    text-shadow: 0 1px rgba(0,0,0,.8);
    background-color: #5c5c5c;
    background-image:  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
    box-shadow: 0 2px 0 rgba(0,0,0,.3);
}

  h1::before,
  h1::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
    bottom: -10px;
  }

  h1::before {
    border-width: 0 10px 10px 0;
    border-right-color: #222;
    left: 0;
  }

  h1::after {
    border-width: 0 0 10px 10px;
    border-left-color: #222;
    right: 0;
  }

使用上面的CSS，您將實(shí)現(xiàn)以下效果：

瀏覽器支持

IE6和IE7不支持偽元素，但是，如果您還需要它們，只需將HTML::before和替換為::afterHTML元素（如）span。在這種情況下，應(yīng)該可以做到！

IE8，IE9，IE10，F(xiàn)irefox，Opera，Chrome和Safari很好地呈現(xiàn)了ribbon帶狀區(qū)。兩者之間存在一些細(xì)微的差異，但這僅僅是因?yàn)镃SS3支持不完整或缺少。

完整實(shí)例代碼

<!DOCTYPE html>

<html>
<head>
    <title>CSS Ribbons(帶狀)設(shè)計(jì) - 實(shí)例</title>
    <style>

    html
    {
        background: #ddd;
    }

    body
    {
        margin: 30px auto;
        padding: 20px;
        width: 35%;
        background: #fff;
        font-family: 'trebuchet MS', Arial, helvetica;

        -moz-border-radius: 10px;
        border-radius: 10px;
        -moz-box-shadow: 0 0 10px #555;
        -webkit-box-shadow: 0 0 10px #555;
        box-shadow: 0 0 10px #555;
    }

    h1.ribbon:after, h1.ribbon:before,
    h2.ribbon:after, h2.ribbon:before,

    /* ---------------------------------------------- */

    h1.ribbon{
        text-align: center;
        position: relative;
        color: #fff;
        margin: 0 -30px 30px -30px;
        padding: 10px 0;
        text-shadow: 0 1px rgba(0,0,0,.8);
        background: #5c5c5c;
        background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
        -moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
        box-shadow: 0 2px 0 rgba(0,0,0,.3);
        clear: both; // Clear the Folow me on Twitter floating element
    }

    h1.ribbon:before, h1.ribbon:after
    {
        border-style: solid;
        border-color: transparent;
        bottom: -10px;
    }

    h1.ribbon:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #222;
        left: 0;
    }

    h1.ribbon:after
    {
        border-width: 0 0 10px 10px;
        border-left-color: #222;
        right: 0;
    }

    /* ---------------------------------------------- */

    h2.ribbon
    {
        font-size: 1em;
        position: relative;
        color: #222;
        text-shadow: 0 1px rgba(255,255,255,.8);
        background-color: #ccc;
    }

    h2.ribbon_left
    {
        margin: 0 -20px 30px -26px;
        padding: 10px 0 10px 30px;
        background-image: -moz-linear-gradient(left,rgba(255,255,255,0), #fff);
        background-image: -webkit-linear-gradient(left,rgba(255,255,255,0), #fff);
background-image: -o-linear-gradient(left,rgba(255,255,255,0), #fff);
background-image: -ms-linear-gradient(left,rgba(255,255,255,0), #fff);
        background-image: linear-gradient(left,rgba(255,255,255,0), #fff);
    }

    h2.ribbon_right
    {
        text-align: right;
        margin: 0 -26px 30px -20px;
        padding: 10px 30px 10px 0;
        background-image: -moz-linear-gradient(left,#fff, rgba(255,255,255,0));
        background-image: -webkit-linear-gradient(left,#fff, rgba(255,255,255,0));
        background-image: -o-linear-gradient(left,#fff, rgba(255,255,255,0));
        background-image: -ms-linear-gradient(left,#fff, rgba(255,255,255,0));
        background-image: linear-gradient(left,#fff, rgba(255,255,255,0));
    }

    h2.ribbon:before, h2.ribbon:after
    {
        border-style: solid;
        border-color: transparent;
        bottom: -6px;
    }

    h2.ribbon_left:before
    {
        border-width: 0 6px 6px 0;
        border-right-color: #555;
        left: 0;
    }

    h2.ribbon_right:after
    {
        border-width: 0 0 6px 6px;
        border-left-color: #555;
        right: 0;
    }

    /* ---------------------------------------------- */



    </style>

</head>

<body>

<h1 class="ribbon">CSS Ribbons(帶狀)</h1>

<p>

卡卡網(wǎng)(webkaka)建立于2009年4月，本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的網(wǎng)站測(cè)速和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測(cè)試服務(wù)。
</p>
<p>卡卡網(wǎng)是國(guó)內(nèi)站長(zhǎng)和IDC商檢測(cè)網(wǎng)絡(luò)線路和網(wǎng)站測(cè)速的第三方工具之一，專業(yè)、專心、專注，為卡卡網(wǎng)贏得了良好的口碑和業(yè)界的肯定。</p>

<h2 class="ribbon ribbon_left">這是一個(gè)標(biāo)題示例————卡卡網(wǎng)內(nèi)容簡(jiǎn)介</h2>

<p>卡卡網(wǎng)主要包括如下幾大部分：<br>網(wǎng)站速度測(cè)試<br>網(wǎng)站速度診斷<br>Ping測(cè)試<br>路由追蹤<br>DNS查詢<br></p>

<h2 class="ribbon ribbon_right">這是另一個(gè)標(biāo)題示例————網(wǎng)站發(fā)展歷史</h2>

<p>
2015年2月1日，卡卡網(wǎng)網(wǎng)站速度診斷重大更新，優(yōu)化建議增至30項(xiàng)<br>
2013年10月10日，卡卡網(wǎng)國(guó)內(nèi)首推網(wǎng)站壓力在線測(cè)試工具<br>
2012年4月24日，卡卡網(wǎng)推出網(wǎng)站dns高級(jí)查詢工具<br>
2011年12月18日，卡卡網(wǎng)推出網(wǎng)站速度診斷服務(wù)<br>
2010年7月24日，卡卡網(wǎng)當(dāng)日獨(dú)立IP突破1萬<br>
2009年5月3日，卡卡網(wǎng)正式開通<br></p>

</body>
</html>