新葡萄京棋牌唯一下载

主页 > 知识库 > 网页基础 > DIV&CSS >

现代感实足的引用样式(下)

来源:未知 作者:天涯 发表于:2012-08-06 21:24  点击:
我们继续《 现代感实足的引用样式(上) 》,《 现代感实足的引用样式(中) 》继续介绍如何增加一个引用样式。 例子5 这个例子介绍两个圆圈的引用样式,同时含有多个盒子阴影。 . mb - style - 5 { width : 390px ; } . mb - style - 5 blockquote { text -

我们继续《》,《》继续介绍如何增加一个引用样式。

例子5

这个例子介绍两个圆圈的引用样式,同时含有多个盒子阴影。

 

.mb-style-5 {    width: 390px;} .mb-style-5 blockquote {    text-align: center;    background: #333;    width: 350px;    height: 350px;    padding: 60px;    border-radius: 50%;    box-shadow:         inset 0 0 0 10px #333,         inset 0 0 0 12px rgba(255,255,255,0.6),         80px 0 0 rgba(255,255,255,0.3),        -80px 0 0 rgba(255,255,255,0.3),        50px 0 0 rgba(60,185,145,0.2),        -50px 0 0 rgba(185,60,60,0.2);}
设置段落样式:

 

 

.mb-style-5 blockquote p {    color: #fff;    font-size: 20px;    font-weight: 400;    padding-top: 25px;    text-transform: uppercase;    text-shadow: 0 0 1px #fff, 0 1px 1px #000;    font-family: 'Annie Use Your Telescope', cursive;}
段落span增加一个特殊的样式:

 

 

.mb-style-5 blockquote p span {    display: block;    position: relative;    padding-top: 40px;    margin-top: 40px;    border-top: 1px solid rgba(255,255,255,0.3);}
让我们添加小圆与引号:

 

 

.mb-style-5 blockquote p span:before {    position: absolute;    width: 50px;    height: 50px;    background: #ddd;    content: "\275d";    font-size: 40px;    color: #333;    top: 0px;    left: 50%;    margin: -25px 0 0 -25px;    border-radius: 50%;}
最后,一些样式,其他文本元素:

 

 

.mb-style-5 .mb-attribution {    text-align: center;    font-family: 'Annie Use Your Telescope', cursive;    padding: 20px;    font-size: 16px;}.mb-style-5 cite a:hover{    color: #000;}

例子6

 

最后的示例会看起来像个宝丽来,除了我们不会使用图像但依旧能够达到很好的效果:

 

.mb-style-6 {    width: 350px;    height: 400px;    background: #fff;    border-radius: 4px;}
让我们添加一个不错的阴影:

 

 

/* Shadow style from Nicolas Gallagher: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ */.mb-style-6:before, .mb-style-6:after {    content: "";    position: absolute;    z-index: -2;    transform: rotate(-3deg);    bottom: 15px;    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);    height: 20%;    left: 10px;    max-height: 100px;    max-width: 300px;    width: 50%;}.mb-style-6:after {    transform: rotate(3deg);    left: auto;    right: 10px;}
块级元素增加一个背景:

 

 

.mb-style-6 blockquote{    background: #333;    height: 75%;    padding: 30px;    text-align: center;}
.mb-style-6 blockquote:before{    color: rgba(255,255,255,0.2);    position: absolute;    content: '\0022';    font-size: 150px;    line-height: 130px;    font-style: italic;    top: 0px;    right: 20px;    font-family: Cambria, Georgia, serif;}
段落设置如下样式:

 

 

.mb-style-6 blockquote p {    color: #fff;    font-family: 'Abril Fatface', sans-serif;    font-size: 24px;    text-shadow: 1px 1px 1px #000;}
剩下来的元素增加下列的内容:

 

 

.mb-style-6 .mb-attribution {    padding: 20px;}

 

 

.mb-style-6 .mb-author {    font-size: 24px;    font-family: 'Dr Sugiyama', cursive;    -moz-transform: rotate(-4deg);    color: #070d5f;}
最后我们创建链接样式:

 

 

.mb-style-6 cite a{    color: #999;    text-transform: uppercase;    letter-spacing: 3px;    font-size: 12px;}.mb-style-6 cite a:hover{    color: #000;}
希望你喜欢这些样式。

 

 翻译

    有帮助
    (1)
    100%
    没帮助
    (0)
    0%