header
1. Utilities
Position
position-relative - position-absolute
Text
text-uppercase - text-capitalize
font-weight-bold - font-weight-normal - font-weight-light - font-italic
text-decoration-none
text-break
2. Utilities
Colors - Background(bg-primary)
text-primary - text-secondary - text-success - text-danger - text-warning - text-info - text-dark

1. shadow
Basic
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
2. background full screen
Basic
background: url(../images/bg/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
3. Effect transition
Basic
-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear;

-webkit-transition: 0.9s; transition: 0.9s;
Scale
-moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);
4. Center div absolute
Middle
position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
Left / Right
position: absolute; content: ""; top: 50%;left:50%;-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
5. Scroll
Scroll css
::-webkit-scrollbar { width: 7px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 2px grey; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #ccc; }
1. calc
width
width: calc(100vh - 40px);
width: calc(100% - 40px);
large
height: calc(100vh - 40px);
5. show max 3 dòng
Basic
text-overflow: ellipsis; position: relative; max-height: 75px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;
7. text gradient
Basic
-webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;
8. after arrows
down (shape)
.arows-down::after { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 22px solid #384147; position: absolute; content: ""; bottom: -20px; left: 0; right: 0; margin: auto; }
right
.arows-right::after { position: absolute; content: ">"; left: -16px; }
9. VIDEO SHOW MOBILE IPHONE
video
autoplay="autoplay" loop="loop" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"
file:///Users/computer/Documents/2023/12/SITE-RIPPLEUP-041223/host/index.html

EFFECT

1. eff hình ảnh
.eff-img{-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; }
.eff-img:hover{-moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); position: relative; z-index: 3;}
animation: pulse; animation-duration: 2s;
animation: tada; animation-duration: 2s;

FORM

3. placeholder
basic
.form-control::-webkit-input-placeholder { color: #fff; }
.form-control::-moz-placeholder { color: #fff; }
.form-control:-ms-input-placeholder { color: #fff; }
.form-control:-moz-placeholder { color: #fff; }
4. type="date"
basic
input[type="date"]::before{ color: #ffffff; content: attr(placeholder) ": "; }
input[type="date"]:focus::before { content: "" !important; }
5. checkbox
html
3. Đổi icon input[date]
input[type="date"]::-webkit-calendar-picker-indicator { background: url(../images/login/2-4.svg)no-repeat right #2d343c; background-size: 15px 15px; background-position-x: calc(100%); width: 20px; height: 20px; border-width: thin; display: block; }
6. select
Basic
select.form-control{ -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(../images/icon/down-arrow.png)no-repeat right #fff; background-size: 15px 15px; background-position-x: calc(100% - 25px); }

1. Đặt tên class
Header
div.header
div.header-menu
div.header-ads
Footer
div.footer-widgets
div.header-widget>h5
div.newsletter-widget>form>input.form-control+button.btn
div.social-icons>a>img
Breadcrumb
div.page-title>h1+subheading
div.breadcrumb>ul>li>a
2.
Blog post
div.blog-post
div.post-img>img
div.bp-content>div.post-meta+div.post-title>a>h3
div.bp-bottom>a.read-more

div.article
div.article-wrapper
div.article-content
Shop product
div.shop-product-card
div.product-image-wrapper
div.sale-label
div.buy-btn>a
div.product-img>img

div.product-meta>div.product-name>a>h4
div.product-price>div.price-cut+div.price
product item
div.product-meta>div.cateogry+div.tags+div.sku
div.prod_single_thumbs_slider>div.item>a>img
div.prod_single_img_slider>div.item>a>img

div.product-info>div.prod-cateogry+div.prod-name>h1
div.prod-price>span.price-cut+div.span.price
div.prod-desc
div.prod-rating>ul>li>a>
div.prod-size>ul>li>a
div.prod-bottom>a.btn.add-to-cart

div.prod-tabs
description-sizeguide-reviews-help(How to buy)
cart
div.cart-nav
div.cart-item>div.p-thumb>img
div.cart-remove-btn+div.cp-name+div.cp-price
3.
Sidebar
div.sidebar
div.search-widget
div.tags-widget
div.header-widget>div.tag-list

div.recent-posts-widget
div.header-widget>div.widget-item

div.categories-widget
div.comments-widget
Features
div.alt-features-item>div.icon>img
div.title>h3
div.desc

div.testimonial>div.avatar>img
div.title>h5