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.
0

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; }

BÌNH LUẬN

Lời bình của bạn
Question   Razz  Sad   Evil  Exclaim  Smile  Redface  Biggrin  Surprised  Eek   Confused   Cool  LOL   Mad   Twisted  Rolleyes   Wink  Idea  Arrow  Neutral  Cry   Mr. Green

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

Register

Newsletter

Email this story
Share This Story:
Print this story
Email this story
Digg
Reddit
StumbleUpon
Share on Tumblr
GET ALERTS:

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.