CSS - Banner - Fita - Ribbon

<< Click to Display Table of Contents >>

Navigation:  CSS >

CSS - Banner - Fita - Ribbon

Previous pageReturn to chapter overviewNext page

Resultado

 

ribbon

Html

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication5.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head runat="server">

    <title></title>

    <link rel="stylesheet" href="estilo.css">

</head>

<body>

    <form id="form1" runat="server">

        <div class="wrapper">

            <div class="ribbon-wrapper-green">

                <div class="ribbon-green">NOVO</div>

            </div>

        </div>

    </form>

</body>

</html>

 

Css

 

.wrapper

{

    margin50px auto;

    width280px;

    height370px;

    backgroundwhite;

    border-radius10px;

    -webkit-box-shadow0px 0px 8px rgba(0,0,0,0.3);

    -moz-box-shadow0px 0px 8px rgba(0,0,0,0.3);

    box-shadow0px 0px 8px rgba(0,0,0,0.3);

    positionrelative;

    z-index90;

}

 

.ribbon-wrapper-green

{

    width85px;

    height88px;

    overflowhidden;

    positionabsolute;

    top-3px;

    right-3px;

}

 

.ribbon-green

{

    fontbold 15px Sans-Serif;

    color#333;

    text-aligncenter;

    text-shadowrgba(255,255,255,0.5) 0px 1px 0px;

    -webkit-transformrotate(45deg);

    -moz-transformrotate(45deg);

    -ms-transformrotate(45deg);

    -o-transformrotate(45deg);

    positionrelative;

    padding7px 0;

    left-5px;

    top15px;

    width120px;

    background-color#BFDC7A;

    background-image-webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));

    background-image-webkit-linear-gradient(top, #BFDC7A, #8EBF45);

    background-image-moz-linear-gradient(top, #BFDC7A, #8EBF45);

    background-image-ms-linear-gradient(top, #BFDC7A, #8EBF45);

    background-image-o-linear-gradient(top, #BFDC7A, #8EBF45);

    color#6a6340;

    -webkit-box-shadow0px 0px 3px rgba(0,0,0,0.3);

    -moz-box-shadow0px 0px 3px rgba(0,0,0,0.3);

    box-shadow0px 0px 3px rgba(0,0,0,0.3);

}

 

    .ribbon-green:before.ribbon-green:after

    {

        content"";

        border-top3px solid #6e8900;

        border-left3px solid transparent;

        border-right3px solid transparent;

        positionabsolute;

        bottom-3px;

    }

 

    .ribbon-green:before

    {

        left0;

    }

 

    .ribbon-green:after

    {

        right0;

    }