Responsive Author Box Design dengan HTML5 & CSS3

Hari ini saya akan menunjukkan cara untuk membuat Responsive Author Box Desain dengan menggunkan HTML5 dan CSS3. Cara ini sangat sederhana dan desain yang ringan. Jika Anda suka, Anda dapat menambahkannya kedalam website Anda.

HTML

<div class="author-box">
 <img src="img/about-widget.jpg"/>
   <p>Hello, my name is Mr. Stark. I am from BLA BLA</p>
</div>

Instruksi : Agar berjalan dengan sempurna Anda harus meletakkan koten kedalam tag  <div>...</div> . Untuk menambahkan gambar tambahkan url gambar Anda kedalam tag  <img>...</img>   dan diskripsi tentang Anda kedalam tag  <p>...</p> .

CSS

/*==========================
* Title: Responsive Author Box Design
* Author: Mr. Stark
* Website: oqinify.com
*=========================*/

.author-box {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}
.author-box img {
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 1px 8px #ddd;
}
.author-box img:hover {
    opacity: 0.8;
    cursor: cell;
}
.author-box p {
    color: #fff;
    margin: 0;
    font-size: 16px;
    line-height: 1.3em;
    background: #222;
    padding: 10px;
    position: relative;
}
.author-box p:before, .author-box p:after {
    content: "";
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.author-box p:after {
    right: 0;
    left: auto;
    border-left: 15px solid transparent;
    border-right: none;
}

Kustomisasi : Anda dapat merubah lebar konten default  300px  dari class  .author-box  sesuai dengan selera Anda dan saya telah menambahkan radius bulat dan bayangan pada gambar di class  .author-box img . Jika Anda tidak suka dengan font size atau warna ataupun background, Anda dapat merubahnya dalam class  .author-box p .

[DEMO ##eye##]   [GitHub ##github##]

Itu dia. Sekian.