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

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

来源:未知 作者:天涯 发表于:2012-08-06 21:21  点击:
我们继续《 现代感实足的引用样式(上) 》的内容,来讲解如何制作一个性感十足的引用样式。 例子3 在第三个例子中,我们来讲解如何在引用层上面增加一个边框样式。 . mb - style - 3 { width : 500px ; } . mb - style - 3 blockquote { background : #fff;

我们继续《现代感实足的引用样式(上)》的内容,来讲解如何制作一个性感十足的引用样式。

例子3

在第三个例子中,我们来讲解如何在引用层上面增加一个边框样式。

ModernBlockQuoteStyles_3

.mb-style-3 {
    width: 500px;
}
 
.mb-style-3 blockquote{
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 
        inset 0 2px 0 rgba(188, 147, 200, 0.7), 
        -5px -4px 25px rgba(0, 0, 0, 0.3);
}
在方框的底部增加一个小箭头,我们通过伪类来进行控制:

 

 

.mb-style-3 blockquote:after, 
.mb-style-3 blockquote:before  {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.mb-style-3 blockquote:after  {
    border-top-color: #ffffff;
    border-width: 10px;
    left: 65%;
    margin-left: -10px;
}
 
.mb-style-3 blockquote:before {
    border-top-color: rgba(0,0,0,0.01);
    border-width: 11px;
    left: 65%;
    margin-left: -11px;
}
里面的段落可以套用这个样式:

 

 

.mb-style-3 blockquote p {
    font-family: 'Alegreya', serif;
    font-size: 24px;
    color: #b4b4b4;
    font-weight: 400;
    line-height: 40px;
    font-style: italic;
    text-indent: 100px;
    position: relative;
}
现在在伪类中添加一个引用标记的样式:

 

 

.mb-style-3 blockquote p:before{
    content: '\201C';
    font-family: serif;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    font-size: 175px;
    top: 0px;
    left: -105px;
    color: rgba(188, 147, 200, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}
作者和来源的链接我们增加这个样式:

 

 

.mb-style-3 .mb-attribution {
    text-align: right;
    padding: 20px 100px 20px 20px;
    position: relative;
}
增加一个圆角背景的样式:

 

 

.mb-style-3 .mb-thumb {
    display: block;
    width: 70px;
    height: 70px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: url(../images/bronte.jpg) no-repeat center center;
    position: absolute;
    right: 10px;
    bottom: 5px;
    box-shadow: 
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}
然后增加一个文本样式:

 

 

.mb-style-3 .mb-author{
    font-family: 'Alegreya SC', serif;
    font-weight: 700;
    font-size: 18px;
    color: rgba(188, 147, 200, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
 
.mb-style-3 cite a{
    font-family: 'Alegreya', serif;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
 
.mb-style-3 cite a:hover{
    color: rgba(188, 147, 200, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

例子4

 

ModernBlockQuoteStyles_4这个例子有一个粗线框,我们创建一个黑色大引用框,作者链接为一整个黑色图片背景。

 

.mb-style-4 {
    width: 600px;
    padding: 20px 240px 50px 20px;
    background: #444 url(../images/dickens.jpg) no-repeat 140% 25%;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}
段落设置RGBA为它的颜色,我们定义一个样式:

 

 

.mb-style-4 blockquote p {
    color: rgba(255,255,255,0.95);
    font-size: 21px;
    line-height: 26px;
    text-align: right;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}
span将要设定一个其他的样式类型,我们定义一个更大一些的文字尺寸以及不同的颜色:

 

 

.mb-style-4 blockquote p span {
    font-weight: 700;
    color: #fcf779;
    font-size: 58px;
    line-height: 58px;
    display: block;
    padding: 10px;
    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
    transform: rotate(-7deg) translateY(10px);
}
让我们通过伪类来给引用框增加样式:

 

 

.mb-style-4 blockquote p span:before {
    font-family: 'icons';
    content: '\275d'; 
    font-weight: normal;
    opacity: 0.1;
    font-size: 136px;
    position: absolute;
    color: #fff;
    top: -50px;
    left: -25px;
    transform: rotate(45deg);
}
.mb-style-4 .mb-attribution {
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    background: #222;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 30px;
    transform: rotate(-40deg) translate(175px, 110px);
}
让我们在作者的地方加一条线:

 

 

.mb-style-4 .mb-author:before {
    content: '\2014';
    padding-right: 4px;
}
 
.mb-style-4 .mb-attribution cite a{
    color: #777;
}
 
.mb-style-4 .mb-attribution cite a:hover{
    color: #fcf779;
}
原文链接 CIT信息网翻译

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