Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, April 24, 2016

Tạo một ảnh 3D sử dụng CSS trong Blogger đem đến cho Blog của bạn một phong cách mới, thu hút được người xemVì vậy, trong bài viết này tôi sẽ hướng dẫn cách làm hình ảnh lật với hiệu ứng 3D , mà bạn phải thích vì cả hai đều là tốt nhất bởi cái nhìn độc đáo và hiệu suất. Bất cứ khi nào bạn đăng một bài đăng trên / Blog của mình và đưa một bức ảnh vào bài viết, hình ảnh này sẽ thu hút người xem với hiệu ứng lật 3D đẹp mắt .



Mô tả cho hình ảnh




Tạo ảnh 3D bằng css cho blog
Nhấp vào hình ảnh trên bạn sẽ thấy 

Tạo một ảnh 3D sử dụng CSS trong Blogger

1.  Đăng nhập vào của bạn Blogger Dashboard >> Template >> Edit HTML
2.  Tìm kiếm </ head> trong template, Giữ CTRL + F để tìm nhanh
3.  Bây giờ sao chép các đoạn mã dưới đây và dán nó ngay trên thẻ </ head>
<style>.profile-image {  margin-bottom:20px;}div.flip-3d { perspective: 1200px; width: 100%; float: left;}div.flip-3d-skills { perspective: 1200px; width: 100%; float: left;}div.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem;}div.flip-3d figure img { width: 100%;}div.flip-3d figure figcaption { position: absolute;width: 100%; height: 50%; top: 0; transform: rotateY(.5turn) translateZ(1px); background: rgba(255,255,255,0.9); text-align: center; padding-top: 45%; opacity: 0.6; transition: 1s .5s opacity;}div.flip-3d:hover figure { transform: rotateY(.5turn); }div.flip-3d:hover figure figcaption { opacity: 1; }div.flip-3d figure:after {content: " "; display: block;height: 8vw; width: 100%;transform: rotateX(90deg);background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);}</style>


4. Nhấp vào nút Save để lưu cài đặt
5. Thêm hiệu ứng flipping trong bài viết mỗi khi khởi tạo bài viết. bạn nhớ phải chuyển quan chế độ HTML như hình.

HTML Tab

6. Copy và dán đoạn mã sau vào trong bài viết.

<div class="profile-image">
<div class="flip-3d">
<br />
<figure>
<img alt="
Mô tả cho hình ảnh" src="Link hình ảnh" />

 <figcaption>Tiêu đề bạn tự chọn....</figcaption>
 </figure>
 </div>
</div>
Như vậy là đã xong...chúc các bạn thành công 

Nguồn blogminhvan.blogspot.com

0 comments:

Post a Comment

Popular Posts