Header Ads

Copywriter, Seo, marketing online

Code html, css, script, php - hiệu ứng làm đẹp nội dung ( video, text, image ) bài viết blog-web

Chia sẻ các đoạn code tạo hiệu ứng và làm đẹp nội dung bài viết blog-web online bao gồm các đoạn mã html, css, script, PHP đơn giản được ứng dụng cho bài viết có chèn video, image và code tạo hiệu ứng làm đẹp nội dung dạng text. 

1.a. Tạo nút bấm dạng Lablel :

Xem mẫu thực tế ở link bài viết : 

https://www.ahref.xyz/2020/04/Chuot-oi-di-cho-cung-meo-nao-nha-het-do-dung-roi-mua-sam-thoi.html

 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
.btn { margin-bottom:10px; }
</style>
<div class="container">
<div class="row">
<h2>
Cool Buttons With Labels</h2>
<div class="col-md-12">
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
<button type="button" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel</button>
<br />
<button type="button" class="btn btn-labeled btn-warning">
<span class="btn-label"><i class="glyphicon glyphicon-bookmark"></i></span>Bookmark</button>
<button type="button" class="btn btn-labeled btn-primary">
<span class="btn-label"><i class="glyphicon glyphicon-camera"></i></span>Camera</button>
<br />
<button type="button" class="btn btn-labeled btn-default">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-left"></i></span>Left</button>
<button type="button" class="btn btn-labeled btn-default">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
Right</button>
<br />
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="glyphicon glyphicon-thumbs-up"></i></span>Thumbs
Up</button>
<button type="button" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="glyphicon glyphicon-thumbs-down"></i></span>Thumbs
Down</button>
<br />
<button type="button" class="btn btn-labeled btn-info">
<span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span>Refresh</button>
<button type="button" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="glyphicon glyphicon-trash"></i></span>Trash</button>
<br />
<a class="btn btn-success btn-labeled" href="http://www.jquery2dotnet.com" role="button">
<span class="btn-label"><i class="glyphicon glyphicon-info-sign"></i></span>Info Web</a>
</div>
</div>
</div>


Khóa học online : Thực hành web chuyên nghiệp cùng PHP, HTML, CSS

Tham gia khóa học click here...
1.b Code chia 3 cột Responsive :

<style>
/* SECTIONS */
.sectionPage {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.groupPage:before,
.groupPage:after { content:""; display:table; }
.groupPage:after { clear:both;}
.groupPage { zoom:1; /* For IE 6/7 */ }
/* GRID OF THREE */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
</style>
<div class="sectionPage groupPage">
<div class="col span_1_of_3">
Nội dung cột số 1
</div>
<div class="col span_1_of_3">
Nội dung cột số 2
</div>
<div class="col span_1_of_3">
Nội dung cột số 3
</div>
</div>

2. Danh sách Web chia sẻ code hiệu ứng :

https://www.w3schools.com/w3css/w3css_effects.asp 
https://1stwebdesigner.com/css-effects/
 
Tham khảo  thêm : 

https://sweetcode.io/scrollable-selectable-html-table/
https://w3bits.com/css-masonry
https://webdevtrick.com/css-masonry-image-grid/
https://findbootstrapsnippets.com/bootstrap-templates/bootstrap-square-buttons.html
https://bootsnipp.com/snippets/k26B

Tag : effect code html | layout | code | html | css | script | PHP | Text | Video | Image

Không có nhận xét nào: