HỒ BẢO NGUYÊN - PHP DEVELOPER: CSS

Hiển thị các bài đăng có nhãn CSS. Hiển thị tất cả bài đăng

Thứ Ba, 30 tháng 5, 2023

HTML to top-bottom-anchor animation

Người đăng: Hồ Bảo Nguyên vào lúc 07:34

HTML to top, to bottom anchor animation
2 ways:
Jquery is complex
The easiest way add css

/*add to css*/

html {
scroll-behavior: smooth;
}

Thứ Hai, 26 tháng 11, 2018

CSS transform scale blank space - SOLVED

Người đăng: Hồ Bảo Nguyên vào lúc 09:31

Description: Responsive view zoom transform scale. This make blank space. Need fix view full
Explain code: Original is 980, <980 auto scale. When scale important: '.container' is scale + absolute. Absolute is will make html>body auto height again.

Solution:
HTML
<body>
<div class="container">
CONTENT
</div>
</body>

SCRIPT
var jquery = jQuery.noConflict();
jquery(window).ready(function(){
/*ScallFullScreen*/
ZoomScale();
});
jquery( window ).resize(function() {
/*ScallFullScreen*/
ZoomScale();
});
/*ScallFullScreen*/
function ZoomScale(){
var widthScreen = jquery(window).width();
var scale = 1;
var wrapper = jquery('.container');
if(widthScreen<980){
/*scale=1*/
scale = widthScreen/980;
jquery(wrapper).css('position','absolute');
jquery(wrapper).css('width','980px');
jquery(wrapper).css('overflow-x','hidden');

}else{
jquery(wrapper).css('position','relative');
jquery(wrapper).css('width','auto');
jquery(wrapper).css('overflow-x','auto');
}
jquery(wrapper).css('-webkit-transform', 'scale(' + scale + ')');
jquery(wrapper).css('transform', 'scale(' + scale + ')');
jquery(wrapper).css('transform-origin', 'left top');
}

Thứ Hai, 28 tháng 9, 2015

Fixed, absolute position auto center SOLVED

Người đăng: Hồ Bảo Nguyên vào lúc 10:08

.divfixcenter{
position:fixed;
top:50%;
left:50%;
width: 500px;
transform: translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);/*safari*/
}

Thứ Hai, 16 tháng 3, 2015

Div Float width auto: can padding/margin inner

Người đăng: Hồ Bảo Nguyên vào lúc 08:41

Requirement:
Div1 float left, width auto.
Div2 width auto.
Div2 inner can padding,magrin.

Image :

Chủ Nhật, 10 tháng 8, 2014

CSS3 text view multi column

Người đăng: Hồ Bảo Nguyên vào lúc 20:19

Detail: view multi column the same on word (office). Auto height, and balance text all column
CSS:
.divContainer {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

Chủ Nhật, 8 tháng 6, 2014

HTML Select Style CSS

Người đăng: Hồ Bảo Nguyên vào lúc 11:12

Compatible: all browser
Example

HTML:
<div class="select_container">
    <select class="rsform-select-box">
        <option value="SELECT ONE...">SELECT ONE...</option>
        <option value="TYPE1">TYPE1</option>
        <option value="TYPE2">TYPE2</option>
        <option value="TYPE3">TYPE3</option>
    </select>
</div>

CSS:
.select_container{
    overflow:hidden;
}
.select_container{
    width:100%;
    background:url("../images/select_icon.png") no-repeat right center #d3d4d5;
}
.select_container select{
    width:120%;
    background: transparent;
    border: 0 solid;
}

HTML Radio Style CSS

Người đăng: Hồ Bảo Nguyên vào lúc 10:48

Compatible: Firefox, chrome, safari, IE9++
Example

CSS:
input[type="radio"]{
    display:none;
}
input[type="radio"] + label{
    padding-left:25px;
    background:url("../images/option.png") no-repeat left top;
}
input[type="radio"]:checked + label{
    background-position: left bottom;
}

Thứ Sáu, 16 tháng 5, 2014

Hide text CSS

Người đăng: Hồ Bảo Nguyên vào lúc 10:09

Mô tả: nhiều trường hợp cần ẩn text bên trong. Vì chỉ muốn can thiệp bằng css.

Lý do: hiệu chỉnh ở source tìm ra khó khăn, cách xử lý này phù hợp với vấn đề nhỏ.

Khuyến cáo: xử lý vấn đề nhỏ để css vẫn mang tính chất rõ ràng.

ví dụ:

a.button{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

Thứ Năm, 30 tháng 1, 2014

Background tr chrome image issue

Người đăng: Hồ Bảo Nguyên vào lúc 06:16

Vấn đề gặp phải: background image <tr trình duyệt chrome tự động bắt đầu cho td. Làm cho image background lặp đi lặp lại.

Cách xử lý CSS:
tr{
display:inline-table;
width:598px;
}

Thứ Năm, 10 tháng 10, 2013

Vấn đề thường gặp đối với @font-face HTML

Người đăng: Hồ Bảo Nguyên vào lúc 21:34

Giới thiệu:
Hiển thị font tùy thuộc vào trình duyệt. Hiện chia làm loại chính
Trình duyệt có hỗ trợ sử dụng file TTF: firefox, safari, chrome
Trình duyệt sử dụng file EOT: internet explorer (IE).
Vì vậy cùng 1 lúc phải sử dụng 2 file.
Ngoài ra còn có công cụ CU-FONT convert file font qua js - điểm mạnh hiển thị được tất cả trình duyệt. Điểm yếu của cu-font thêm các tag, copy text không được và khó kiểm soát khi cần nâng cấp. Vì vậy nên sử dụng @font-face.

Chuyển đổi file TTF qua EOT: http://www.kirsle.net/wizards/ttf2eot.cgi
Sử dụng trong CSS

Style trong file CSS
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE */
}
Vấn đề thường gặp phải: đ
IE sử dụng chuẩn font khác .EOT để hiển thị. Có nhiều lỗi liên quan đến hiển thị font của IE8.
Các phương pháp thực hiện thử:
1. Đường dẫn chính xác: trường hợp này để thử cách chính xác đường dẫn đúng
@font-face
{
font-family: myFirstFont;
src: url('http://mydomain.com/font/myfont.ttf'),
     url('http://mydomain.com/font/myfont.eot'); /* IE */
}
2. Tách khai báo font face CSS ra thêm 1 file dành cho ie.css
vào file index.php thêm vào cuối cùng của thẻ <head>

Trong file ie.css khai báo duy nhất 1 đoạn : file .eot nằm cùng folder với file ie.css
@font-face
{
font-family: myFirstFont;
src: url('myfont.eot'); /* IE */
}
Nguyên nhân : khi khai báo chung có 1 số trường hợp browser không nhận được. Nguyên nhân thì mình không rõ. Nhưng khi tách ra thì IE lại nhận được.

Thứ Tư, 28 tháng 8, 2013

Menu auto WIDTH 100% CSS only

Người đăng: Hồ Bảo Nguyên vào lúc 03:23

Mô tả: Bình thường menu sử dụng UL LI để tổ chức. Yêu cầu: cần trình bày menu item dàn đều trên 1 hàng và width 100%.
Có thể làm with %, hoặc javascript. Tuy nhiên không lúc nào cũng đạt được.
Cách xử lý: dùng CSS display: table, display:table cell
Compatiple: Firefox, Chrome, Safary, IE8++, IE7 (need use display-table.htc).

Link example: https://docs.google.com/file/d/0B785Epf6q5XlOXlkNlFjdzBxWk0/edit?usp=sharing
Source view:
<!DOCTYPE html>
<html>
<style type="text/css">
#footer_menu {
display: table; text-align: center; width: 100%;
}
#footer_menu ul {
display: table-row; list-style: none; margin: 0; padding: 0;
}
#footer_menu li {
display: table-cell; border:1px solid red;
}
</style>

<body>
    <div id="footer_menu">
        <ul>
            <li class="nav_l" style="width:80px;border:1px solid blue;background:#000;"><a href="#">Link</a></li>
            <li class="nav_l"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
            <li class="nav_r"><a href="#">Link</a></li>
        </ul>
    </div>
</body>
</html>

Thứ Năm, 22 tháng 8, 2013

HTML Custom Scroll Bar

Người đăng: Hồ Bảo Nguyên vào lúc 10:35

Mô tả:
Nhiều dự án đối tác yêu cầu custom thanh scroll, mặc định mỗi trình duyệt có scroll riêng và không custom được.
Cách xử lý: http://baijs.nl/tinyscrollbar/

Hướng dẫn sử dụng: 3 bước
1. Load file script +

$('#scrollbar').tinyscrollbar({ sizethumb: 15 });

2. Cấu trúc content
3. CSS scroll (đây là phần quan trọng để scroll hiển thị có thể dùng hình ảnh hoặc màu sắc để thay đổi).
Download ví dụ: http://baijs.nl/tinyscrollbar/example.zip
Hình ảnh mẫu:

Pages

HỒ BẢO NGUYÊN - PHP DEVELOPER