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

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

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

我们继续《现代感实足的引用样式(上)》,《现代感实足的引用样式(中)》继续介绍如何增加一个引用样式。

例子5

ModernBlockQuoteStyles_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

 

ModernBlockQuoteStyles_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;
}
希望你喜欢这些样式。

 

原文地址 CIT信息网翻译

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