ĐĂNG TIN
logo
Online:
Visits:
Stories:
Profile image
Tác giả: fcwordpress
Trang tin cá nhân | Bài đã đăng
Lượt xem

Hiện tại:
1h trước:
24h trước:
Tổng số:
Một số mã css hay dùng
Friday, February 3, 2017 21:03
% of readers think this story is Fact. Add your two cents.


Bài viết này là tôi sưu tầm các đoạn mã css hay dùng:

  • Text shadow cho text: khi màu nền và màu text hơi trùng cần làm cho text nổi bật để người xem có thể đọc được thì chúng ta áp dụng hiệu ứng này
text-shadow: 1px 0 1px rgba(0, 0, 0, 1);
  • Arrow down: tạo mũi tên quay xuống

B4INREMOTE-aHR0cDovL2Zjd29yZHByZXNzLm5ldC93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9hcnJvdy1kb3duLnBuZw==

Mã html

Quick Fact 1

Mã css:

.QuickFactsBox-heading::after { position: absolute; text-align: center; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; bottom: -10px; content: ''; display: inline-block; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ffac36 transparent transparent transparent; }
  • Sử dụng border color và border widh để tạo ảnh như hình dưới đây

B4INREMOTE-aHR0cDovL2Zjd29yZHByZXNzLm5ldC93cC1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9ib2Rlci1jb2xvci13aWR0aC5wbmc=

Mã html:

Mã css:

.ImageTextSplit-image::after { content: ''; display: block; position: absolute; right: 0; bottom: 0; border-style: solid; width: 0; height: 0; border-color: transparent transparent #fff transparent; border-width: 0 0 250px 55px; z-index: 200; }

Tin nổi bật trong ngày
Tin mới nhất

Register

Newsletter

Email this story

If you really want to ban this commenter, please write down the reason:

If you really want to disable all recommended stories, click on OK button. After that, you will be redirect to your options page.