Skip to content

Instantly share code, notes, and snippets.

@auggernaut
Created May 14, 2013 22:37
Show Gist options
  • Save auggernaut/5580239 to your computer and use it in GitHub Desktop.
Save auggernaut/5580239 to your computer and use it in GitHub Desktop.
Rounded image bubbles and blockquotes.
.home .mb-wrap {
padding: 20px;
position: relative;
}
.home .mb-wrap p{
margin: 0;
padding: 0;
}
.home .mb-wrap blockquote {
margin: 0;
padding: 0;
position: relative;
border-left: 0;
}
.home .mb-wrap cite {
font-style: normal;
}
.home .mb-style {
margin-top: 100px;
padding-top: 100px;
border-radius: 50%;
}
.home .mb-style.grat{
background: #fff;
border-top: 10px solid #77C4F3;
border-bottom: 10px solid #77C4F3;
}
.home .mb-style.zi{
background: #fff;
border-top: 10px solid #7D6CB0;
border-bottom: 10px solid #7D6CB0;
}
.home .mb-style .mb-thumb {
display: block;
width: 180px;
height: 180px;
border-radius: 50%;
position: absolute;
left: 50%;
top: -90px;
margin: 0 0 0 -90px;
}
.home .mb-style .mb-thumb.becca{
border: 10px solid rgba(119,196,243, 0.5);
background: url(../img/becca-face-2.gif) no-repeat center center;
}
.home .mb-style .mb-thumb.augustin{
border: 10px solid rgba(125,108,176, 0.5);
background: url(../img/aug-face.gif) no-repeat center center;
}
.home .mb-style blockquote:before {
position: absolute;
color: #242526;
text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
.home .mb-style blockquote:before{
left: 10px;
font-size: 70px;
}
.home .mb-style blockquote p {
font-family: Cambria, Georgia, serif;
font-style: italic;
padding: 10px 10px 20px 10px;
text-align: center;
}
.home .mb-style.grat blockquote p {
font-size: 45px;
line-height: 61px;
}
.home .mb-style.zi blockquote p {
font-size: 45px;
}
.home .mb-style .mb-attribution {
text-align: right;
width: 80%;
border-top: 1px solid rgba(0,0,0,0.2);
position: relative;
left: -50px;
top: -10px;
float: right;
}
.home .mb-style .mb-author{
font-size: 20px;
color: #1b1c1d;
text-shadow: 0 1px rgba(255,255,255,0.1);
line-height: 25px;
padding-right: 30px;
}
.home .mb-style cite{
color: #1b1c1d;
padding-right: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment