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

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

来源:CIT信息网 作者:网络 发表于:2012-08-06 21:11  点击:
今天我们要创建一些漂亮的引用样式。使用纹理、圆圈和伪元素,我们可以把一些具有活力的元素融入进去。 本教程中我们会省略一些内容,但是在源代码包中大家可以完整的看到他们。 所有例子下载 标记 我们引用样式的标记如下: div class = mb-wrap mb-style-1

 

今天我们要创建一些漂亮的引用样式。使用纹理、圆圈和伪元素,我们可以把一些具有活力的元素融入进去。

本教程中我们会省略一些内容,但是在源代码包中大家可以完整的看到他们。

所有例子下载

标记

我们引用样式的标记如下:

 

<div class="mb-wrap mb-style-1">
    <div class="mb-thumb"></div>
    <blockquote cite="http://www.gutenberg.org/ebooks/1257">
        <p>Never fear quarrels, but seek hazardous adventures.</p>
    </blockquote>
    <div class="mb-attribution">
        <p class="mb-author">Alexandre Dumas</p>
        <cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
    </div>
</div>
含有样式mb-thumb的层不会出现在所有例子中,在第三个例子中他将会被以mb-attribution的层的一个子层加入。

 

样式

让我们开始定义一些基础样式

 

@font-face {
    font-family: 'icons';
    src: url("font/icons.eot");
    src: 
        url("font/icons.eot?#iefix") format('embedded-opentype'), 
        url("font/icons.woff") format('woff'), 
        url("font/icons.ttf") format('truetype'), 
        url("font/icons.svg#icons") format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Let's set and reset some common styles */
.mb-wrap {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    position: relative; 
}
 
.mb-wrap p{
    margin: 0;
    padding: 0;
}
 
.mb-wrap blockquote {
    margin: 0;
    padding: 0;
    position: relative;
}
 
.mb-wrap cite {
    font-style: normal;
}
我们增加一些例子中可能用到的图标字体,我们同样可以为引用层和其他元素设定一些样式,注意,这里每个元素会有一些默认的样式,所以我们需要重置他们。

 

例子1

ModernBlockQuoteStyles_1第一个例子含有一个远角背景,所以我们需要给整个盒子定义一个样式,这里我们给出了它背景纹理和重新定义的宽度:

 

.mb-style-1 {
    background: #363738 url(../images/dark_leather.jpg) repeat top left;    
    margin-top: 100px;
    padding-top: 100px;
    width: 400px;
    color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-top: 10px solid #fff;
}
实现远角我们可以用一个半透明的边来完善:

 

 

.mb-style-1 .mb-thumb {
    display: block;
    width: 180px;
    height: 180px;
    border: 10px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
    position: absolute;
    left: 50%;
    top: -90px;
    margin: 0 0 0 -90px;
    box-shadow: 
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}
为了增加引用标记,我们将使用我们刚才已经引入的图标字体,在层的伪类:before和:after,我们同样给层设定一个阴影。

 

 

.mb-style-1 blockquote:before,
.mb-style-1 blockquote:after {
    font-family: 'icons';
    position: absolute;
    font-size: 70px;
    top: -95px;
    color: #242526;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 blockquote:before{
    content: '\275d';
}
 
.mb-style-1 blockquote:after{
    right: 0px;
    content: '\e800';
}
文字的样式如下:

 

 

.mb-style-1 blockquote p {
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    font-size: 25px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    padding: 10px 10px 20px 10px;
    text-align: center;
    margin: 0 0 20px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
 
.mb-style-1 .mb-attribution {
    text-align: right;
}
 
.mb-style-1 .mb-author{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    color: #1b1c1d;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 cite a{
    color: #f0f0f0;
    font-style: italic;
    font-family: Cambria, Georgia, serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}
 
.mb-style-1 cite a:hover{
    text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
}
至此,我们完成了第一个例子,我们继续。

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