Tự tạo một Profile Card với HTML và CSS

14

Tự tạo một Profile Card với HTML và CSS – Chào các bạn, trong khuôn khổ bài viết này chúng ta sẽ cùng nhau tạo ra một hồ sơ cá nhân (Profile Card) bằng CSS và HTML. Cùng với những thông tin cơ bản mà bạn muốn hiển thị. Bạn có thể đặt Profile Card này ở bất cứ nơi nào trên website của bạn và bạn có thể sửa cho phù hợp với bản thân.

Tự tạo một Profile Card với HTML và CSS

Tự tạo một Profile Card với HTML và CSS html và css - Tự tạo một Profile Card với HTML và CSS

Đầu tiên các bạn hãy sử dụng HTML:

Đoạn HTML này sẽ hiển thị ra bên ngoài website. Chính vì vậy, bạn muốn Profile Card hiển thị chỗ nào thì hãy dán đoạn HTML này vào chỗ đó. Ví dụ: Nếu bạn sử dụng WordPress và muốn hiển thị ngoài Sitebar thì bạn vào Widget và cho vào Widget Text.

<!-- Trong đoạn Code này, bạn có thể thay đổi các chi tiết (tên riêng của bạn, của riêng bạn avatar vv), nhưng không làm thay đổi cấu trúc cơ bản! -->

<aside class="profile-card">

  <header>

    <!-- Hình của bạn -->
    <a href="http://www.laivanduc.com">
      <img src="http://farm5.staticflickr.com/4175/34651231232_b1a413839f_o.jpg">
    </a>

    <!-- Tên của bạn -->
    <h1>Lại Văn Đức</h1>

    <!-- Công việc hay nghề của bạn -->
    <h2>- Web Developer -</h2>

  </header>

  <!-- Thêm thông tin của bạn -->
  <div class="profile-bio">

    <p>Chào mừng các bạn</p>
    <p>Tôi là một nhà phát triển web. Tôi chủ yếu làm việc với PHP, HTML, CSS, JS và WordPress.
      <br />Tôi cũng làm việc tốt với Photoshop, Corel Draw, After Effects và vài thứ khác.</p>

  </div>

  <!-- Liên kết mạng xã hội -->
  <ul class="profile-social-links">

    <!-- twitter - el clásico  -->
    <li>
      <a href="http://twitter.com/">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>

    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://facebook.com">
        <img src="http://farm5.staticflickr.com/4221/34651248062_73641b1a80_o.png">
      </a>
    </li>

    <!-- Tài khoản Google +-->
    <li>
      <a href="https://plus.google.com/u/0/118260931574775251745/posts">
        <img src="http://farm5.staticflickr.com/4186/34004419773_ed97040ef5_o.png">
      </a>
    </li>

    <!--Bạn có thể thêm hoặc xóa mạng xã hội tại đây-->

  </ul>

</aside>
<!-- Chỉ có vậy thôi ! -->

Tiếp theo, chúng ta sẽ làm đẹp bằng CSS.

Ai cũng biết CSS là link hồn của tất cả Website và đoạn CSS bên dưới này cũng vậy. Nếu bạn sử dụng WordPress, bạn hãy dán đoạn CSS này vào file style.css của Theme. Hoặc đơn giản hơn, bạn hãy truy cập Appearance > Customize > và dán đoạn CCS này vào phần Additional CSS

/* Bắt đầu viết code CSS nào ! */

@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
  padding: 20px;
  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, serif;
  background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
  background-size: cover;
}

header img {
  border-radius: 50%;
  margin: 20px auto;
  display: block;
  width: 200px;
  border: 5px solid #fff;
}

aside {
  border-top: 0px solid #26A69A;
  border-bottom: 0px solid #00695C;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  height: 250px;
  width: 250px;
  background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
  background-size: cover;
  overflow: hidden;
  box-shadow: 0 0 100px 10px #fff;
  transition: all ease 0.3s;
}

aside:hover {
  border-top: 4px solid #26A69A;
  border-bottom: 4px solid #00695C;
  border-radius: 5px;
  height: 480px;
  width: 350px;
  box-shadow: 0 0 70px 10px #fff;
}

aside:hover header img {
  animation: profile_image 2000ms linear both;
  animation-delay: 0.5s;
}

header {
  text-align: center;
}

header h1 {
  position: relative;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 25px;
  line-height: 25px;
  display: inline-block;
  padding: 10px;
  transition: all ease 0.250s;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

aside:hover header h1 {
  margin-top: 0px;
  outline: 0 solid #fff;
  border-top: 0px solid #fff;
  border-bottom: 1px solid #fff;
}

header h2 {
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  font-size: 17px;
  font-weight: normal;
  line-height: 0px;
  margin: 0;
}

.profile-bio {
  margin-top: 20px;
  padding: 1px 20px 10px 20px !important;
  transition: all linear 1.5s;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 49%, rgba(0, 0, 0, 0.61) 100%);
}

aside:hover .profile-bio {
  opacity: 1;
}

.profile-bio p:first-child {
  text-align: center;
  font-size: 16px;
}

.profile-social-links {
  position: relative;
  margin-top: -440px;
  margin-left: -100px;
  list-style-type: none;
  opacity: 0;
  transition: all ease 0.5s;
}

aside:hover .profile-social-links {
  margin-left: -30px;
  opacity: 1;
}

.profile-social-links li img {
  width: 30px;
  background: #fff;
  border-radius: 50%;
  padding: 5px;
}
/*PROFILE IMAGE ANIMATE */

@keyframes profile_image {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    transform: matrix3d(1.032, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.7% {
    transform: matrix3d(1.045, 0, 0, 0, 0, 1.06, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.81% {
    transform: matrix3d(1.066, 0, 0, 0, 0, 1.089, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.41% {
    transform: matrix3d(1.088, 0, 0, 0, 0, 1.117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.21% {
    transform: matrix3d(1.094, 0, 0, 0, 0, 1.123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.61% {
    transform: matrix3d(1.112, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.11% {
    transform: matrix3d(1.114, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.52% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.124, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.72% {
    transform: matrix3d(1.121, 0, 0, 0, 0, 1.119, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.32% {
    transform: matrix3d(1.12, 0, 0, 0, 0, 1.107, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  24.32% {
    transform: matrix3d(1.115, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25.23% {
    transform: matrix3d(1.113, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    transform: matrix3d(1.106, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.93% {
    transform: matrix3d(1.105, 0, 0, 0, 0, 1.09, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.54% {
    transform: matrix3d(1.098, 0, 0, 0, 0, 1.096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.74% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.098, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.04% {
    transform: matrix3d(1.096, 0, 0, 0, 0, 1.102, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  44.44% {
    transform: matrix3d(1.097, 0, 0, 0, 0, 1.103, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.15% {
    transform: matrix3d(1.099, 0, 0, 0, 0, 1.101, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  59.86% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  63.26% {
    transform: matrix3d(1.101, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75.28% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.49% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  90.69% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
/*NAME ANIMATE */

aside:hover header h1 {
  animation: name_and_job 1500ms linear both;
  animation-delay: 0.4s;
}

@keyframes name_and_job {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

aside:hover ul li:first-child {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 0.75s;
}

aside:hover ul li:nth-child(2) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1s;
}

aside:hover ul li:nth-child(3) {
  animation: social_animation 2000ms ease-in-out both;
  animation-delay: 1.25s;
}

@keyframes social_animation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
  }
  1.3% {
    transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1);
  }
  2.55% {
    transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1);
  }
  4.1% {
    transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1);
  }
  5.71% {
    transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1);
  }
  8.11% {
    transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1);
  }
  8.81% {
    transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1);
  }
  11.96% {
    transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1);
  }
  12.11% {
    transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1);
  }
  15.07% {
    transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1);
  }
  16.12% {
    transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1);
  }
  27.23% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1);
  }
  27.58% {
    transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1);
  }
  38.34% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1);
  }
  40.09% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1);
  }
  50% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1);
  }
  60.56% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1);
  }
  82.78% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

Update: 20/04/2016

Đoạn CSS bên trên dành cho các bạn muốn tự chỉnh sửa Code cho phù hợp với nơi các bạn đặt khung HTML. Bên cạnh đó có khá nhiều bạn sử dụng Theme Sahifa và cũng muốn sử dụng. Vì vậy, dưới đây là Code CSS các bạn sử dụng cho Sahifa Theme. Các bạn bỏ qua Code CSS bên trên và sử dụng Code này nhé.

/* Bắt đầu viết code CSS nào ! */
.profile-card header img {
	border-radius: 50%;
	margin: 20px auto;
	display: block;
	width: 200px;
	border: 5px solid #fff;
}

aside.profile-card {
	border-top: 0 solid #26A69A;
	border-bottom: 0 solid #00695C;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
	height: 250px;
	width: 250px;
	background: url(http://farm5.staticflickr.com/4180/34813900975_be65f5a553_o.jpg);
	background-size: cover;
	overflow: hidden;
	box-shadow: 0 0 100px 10px #fff;
	transition: all ease .3s;
}

aside.profile-card:hover {
	border-top: 4px solid #26A69A;
	border-bottom: 4px solid #00695C;
	border-radius: 5px;
	height: 480px;
	width: 100%;
	box-shadow: 0 0 70px 10px #fff;
}

aside.profile-card:hover header img {
	animation: profile_image 2000ms linear both;
	animation-delay: .5s;
}

.profile-card header {
	text-align: center;
}

.profile-card header h1 {
	position: relative;
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
	font-size: 25px;
	line-height: 25px;
	display: inline-block;
	padding: 10px;
	transition: all ease .25s;
}

aside.profile-card:hover header h1 {
	margin-top: 0;
	outline: 0 solid #fff;
	border-top: 0 solid #fff;
}

.profile-card header h2 {
	text-align: center;
	color: #fff;
	text-shadow: 1px 1px rgba(0,0,0,0.5);
	font-size: 17px;
	font-weight: normal;
	line-height: 0;
	margin: 0;
}

.profile-card .profile-bio {
	margin-top: 20px;
	padding: 1px 20px 10px !important;
	transition: all linear 1.5s;
	color: #fff;
	font-size: 14px;
	opacity: 0;
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.42) 49%,rgba(0,0,0,0.61) 100%);
}

aside.profile-card:hover .profile-bio {
	opacity: 1;
}

.profile-card .profile-bio p:first-child {
	text-align: center;
	font-size: 16px;
}

.profile-card .profile-social-links {
	position: relative;
	margin-top: -440px;
	margin-left: -100px;
	list-style-type: none;
	opacity: 0;
	transition: all ease .5s;
}

aside.profile-card:hover .profile-social-links {
	margin-left: -30px;
	opacity: 1;
}

.profile-card .profile-social-links li img {
	width: 30px;
	background: #fff;
	border-radius: 50%;
	padding: 5px;
}

/*PROFILE IMAGE ANIMATE */
@keyframes profile_image {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	3.4% {
		transform: matrix3d(1.032,0,0,0,0,1.041,0,0,0,0,1,0,0,0,0,1);
	}
	
	4.7% {
		transform: matrix3d(1.045,0,0,0,0,1.06,0,0,0,0,1,0,0,0,0,1);
	}
	
	6.81% {
		transform: matrix3d(1.066,0,0,0,0,1.089,0,0,0,0,1,0,0,0,0,1);
	}
	
	9.41% {
		transform: matrix3d(1.088,0,0,0,0,1.117,0,0,0,0,1,0,0,0,0,1);
	}
	
	10.21% {
		transform: matrix3d(1.094,0,0,0,0,1.123,0,0,0,0,1,0,0,0,0,1);
	}
	
	13.61% {
		transform: matrix3d(1.112,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
	}
	
	14.11% {
		transform: matrix3d(1.114,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
	}
	
	17.52% {
		transform: matrix3d(1.121,0,0,0,0,1.124,0,0,0,0,1,0,0,0,0,1);
	}
	
	18.72% {
		transform: matrix3d(1.121,0,0,0,0,1.119,0,0,0,0,1,0,0,0,0,1);
	}
	
	21.32% {
		transform: matrix3d(1.12,0,0,0,0,1.107,0,0,0,0,1,0,0,0,0,1);
	}
	
	24.32% {
		transform: matrix3d(1.115,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
	}
	
	25.23% {
		transform: matrix3d(1.113,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1);
	}
	
	29.03% {
		transform: matrix3d(1.106,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
	}
	
	29.93% {
		transform: matrix3d(1.105,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
	}
	
	35.54% {
		transform: matrix3d(1.098,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
	}
	
	36.74% {
		transform: matrix3d(1.097,0,0,0,0,1.098,0,0,0,0,1,0,0,0,0,1);
	}
	
	41.04% {
		transform: matrix3d(1.096,0,0,0,0,1.102,0,0,0,0,1,0,0,0,0,1);
	}
	
	44.44% {
		transform: matrix3d(1.097,0,0,0,0,1.103,0,0,0,0,1,0,0,0,0,1);
	}
	
	52.15% {
		transform: matrix3d(1.099,0,0,0,0,1.101,0,0,0,0,1,0,0,0,0,1);
	}
	
	59.86% {
		transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
	}
	
	63.26% {
		transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
	}
	
	75.28% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	85.49% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	90.69% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
	}
}

/*NAME ANIMATE */
aside.profile-card:hover header h1 {
	animation: name_and_job 1500ms linear both;
	animation-delay: .4s;
}

@keyframes name_and_job {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1);
	}
	
	1.3% {
		transform: matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1);
	}
	
	2.55% {
		transform: matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1);
	}
	
	4.1% {
		transform: matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1);
	}
	
	5.71% {
		transform: matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1);
	}
	
	8.11% {
		transform: matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1);
	}
	
	8.81% {
		transform: matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1);
	}
	
	11.96% {
		transform: matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1);
	}
	
	12.11% {
		transform: matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1);
	}
	
	15.07% {
		transform: matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1);
	}
	
	16.12% {
		transform: matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1);
	}
	
	27.23% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1);
	}
	
	27.58% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1);
	}
	
	38.34% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1);
	}
	
	40.09% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1);
	}
	
	50% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1);
	}
	
	60.56% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1);
	}
	
	82.78% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
}

aside.profile-card:hover ul li:first-child {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: .75s;
}

aside.profile-card:hover ul li:nth-child(2) {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: 1s;
}

aside.profile-card:hover ul li:nth-child(3) {
	animation: social_animation 2000ms ease-in-out both;
	animation-delay: 1.25s;
}

@keyframes social_animation {
	0% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-300,0,0,1);
	}
	
	1.3% {
		transform: matrix3d(3.905,0,0,0,0,1,0,0,0,0,1,0,-237.02,0,0,1);
	}
	
	2.55% {
		transform: matrix3d(4.554,0,0,0,0,1,0,0,0,0,1,0,-182.798,0,0,1);
	}
	
	4.1% {
		transform: matrix3d(4.025,0,0,0,0,1,0,0,0,0,1,0,-125.912,0,0,1);
	}
	
	5.71% {
		transform: matrix3d(3.039,0,0,0,0,1,0,0,0,0,1,0,-79.596,0,0,1);
	}
	
	8.11% {
		transform: matrix3d(1.82,0,0,0,0,1,0,0,0,0,1,0,-31.647,0,0,1);
	}
	
	8.81% {
		transform: matrix3d(1.581,0,0,0,0,1,0,0,0,0,1,0,-21.84,0,0,1);
	}
	
	11.96% {
		transform: matrix3d(1.034,0,0,0,0,1,0,0,0,0,1,0,4.825,0,0,1);
	}
	
	12.11% {
		transform: matrix3d(1.023,0,0,0,0,1,0,0,0,0,1,0,5.53,0,0,1);
	}
	
	15.07% {
		transform: matrix3d(0.947,0,0,0,0,1,0,0,0,0,1,0,12.662,0,0,1);
	}
	
	16.12% {
		transform: matrix3d(0.951,0,0,0,0,1,0,0,0,0,1,0,13.007,0,0,1);
	}
	
	27.23% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.352,0,0,1);
	}
	
	27.58% {
		transform: matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,2.121,0,0,1);
	}
	
	38.34% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.311,0,0,1);
	}
	
	40.09% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.291,0,0,1);
	}
	
	50% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,-0.048,0,0,1);
	}
	
	60.56% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0.007,0,0,1);
	}
	
	82.78% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
	
	100% {
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
	}
}

aside.profile-card:hover .profile-social-links {
	margin-left: 4px;
    margin-top: -390px;
	opacity: 1;
}

Ngoài mẫu này, các bạn có thể tham khảo và sử dụng một mẫu khác cũng được giới thiệu trên Blog Lại Văn Đức tại đây:

Thế Thôi

Đơn giản thế thôi là chúng ta đã có một Profile Card tuyệt đẹp hiển thị trên chính Blog/Website của mình. Mỗi người đều có sự sáng tạo riêng và bạn hoàn toàn có thể chỉnh sửa bộ code này để phù hợp với phong cách của bạn. Và đừng quên cho mọi người biết để tham khảo nhé. Bên dưới là demo của mình.

14 Comments
  1. Nguyễn Hữu Hiệu nói

    Em làm mãi mà không được anh ơi. Hình như CSS của em không có tác dụng, nó hiển thị rất rời rạc

    1. Admin nói

      Bạn làm như thế nào mà không được vậy.
      Bạn có liên kết HTML đến CSS không ?
      Chắc em phải làm một bài hướng dẫn căn bản mới được 🙂

    2. Admin nói

      Đã cập nhật bài viết hướng dẫn, Bạn xem tại đây nhé:
      http://www.laivanduc.com/huong-dan-su-dung-code-tren-blog-lai-van-duc

  2. Minh Vũ nói

    Có thể bạn này chưa làm đúng thôi. Em làm ra ngon lành. Cám ơn anh nhé. Quá đẹp 🙂

  3. Quyền nói

    Anh chỉ em cách chèn vào website với

    1. Lại Văn Đức nói

      Chào bạn. Tùy vào bạn sử dụng Theme nào sẽ có cách để sửa lại CSS. Và để cho nó chạy thì đơn giản. Bạn hãy xem bài này. http://www.laivanduc.com/huong-dan-su-dung-code-tren-blog-lai-van-ducNếu là WordPress thì bạn cho Code HTML vào Widget, cho CSS vào file Style.css và sửa lại CSS cho phù hợp. 

  4. Thủ thuật Blog nói

    Chào bạn. Mình đã làm đúng theo các bước, nhưng các liên kết mạng xã hội như: Facebook, Twiter, google+… không thấy hiện lên (Mình làm trên Blogspot). Xin hướng dẫn giúp nhé. Cám ơn nhiều. http://demo.xuandoanh.com/2016/04/tu-tao-mot-profile-card-voi-html-va-css_15.html

  5. Trần Đức nói

    Bạn làm cái khung hiển thị code kiểu gì vậy. Mình dùng plugin SyntaxHighlighter. Nếu lấy đoạn code của bạn thì phải cho vào cặp thẻ nào vậy

    1. Lại Văn Đức nói

      Mình chèn từ đây vào nhehttp://codepen.io/laivanduc/pen/gpKWrx

      1. Trần Đức nói

        làm xong bạn add vào site kiểu gì vậy>?

        1. Lại Văn Đức nói

          Làm xong thì bạn tìm đến chỗ Embed rồi lấy Code dán vào web thôi.

          1. Trần Đức nói

            ý mình làm làm cái khung để chia sẻ code trong bài viết mà

  6. Davidtran nói

    Cho hỏi ngu tí : mình có 2 file tên profile.css và gioithieu.html khai báo trong liên kết html rồi tiếp theo add vào đâu cho nó hiển thị trên widget. File profile.css sẽ upload trực tiếp vào wp-conten/theme/sahifa hay thêm đoạn code trong profile.css vào style.css. còn file .html lấy code dán vào text widget hay bỏ vô trong widget trong phần chỉnh sửa giao diện.Còn embed ở codepen.io thì lấy mã dán vào đâu. Tk bạn

    1. Lại Văn Đức nói

      Chào bạn. Bạn không cần làm thế đâu. Phần Code HTML bạn chỉ cần bỏ vào widget html trong widget. Phần Code CSS bạn bỏ vào file style.css trong theme là được.

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.