Kỷ niệm một thời đề nhớ
Trang chủ » Files » Templates code

Một số thủ thuật
17/08/2012, 5:28 PM
   

        8 kiểu CSS khung viền cơ bản
       
        Để có được các khung viền có hiệu ứng đẹp người ta thường dùng các trình xử lý ảnh chuyên nghiệp như Photoshp,        Photoimpac. Vấn đề là bạn có thông thạo các trình xử lý ảnh không? Bạn biết cách dùng ảnh để đóng khung một văn bản không ? Bạn có chấp nhận khi load nó nặng hơn không ?...
       
        Có một cách khác cũng tạo được khung rất dễ dàng đó là dùng code CSS. Cách này khi load sẽ nhẹ hơn rất nhiều, không cấn phải biết photoshop hay trình xử lý ảnh nào cả, nhưng đòi hỏi bạn phải        biết viết code CSS. Hehe!... chắc bạn đang cười mình phải không ? Không cần biết Photoshp mà đòi hỏi phải biết lập trình web thì cũng quá cha ...Không sao, không biết viết thì mình viết sẵn        đây nè, bạn chỉ việc chép những gì mình viết trong các khung sau đây về xài thôi:
   

       
        <div style="background-color: #FFFFEA; border: 6px solid #00C0A0;padding: 10px;">
       
        Nội dung cần đóng khung Kiều Solid
       
        </div>   
 
       
        <div style="background-color: #FFFFEA; border: 6px Double #FF8000;padding: 10px;">
       
        Nội dung cần đóng khung kiều Double
       
        </div>   
 
       
        <div style="background-color: #F2FFFF; border: 8px Groove #FF8080; padding: 10px;">
       
        Nội dung cần đóng khung kiều Groove
       
        </div>   
 
       
        <div style="background-color: #F2FFFF; border: 8px Ridge #FF8080; padding: 10px;">
       
        Nội dung cần đóng khung kiều Ridge
       
        </div>   
 
       
        <div style="background-color: #FFF4F4; border: 6px Dashed #FF8080; padding: 10px;">
       
        Nội dung cần đóng khung kiều dashed
       
        </div>   
 
       
        <div style="background-color: #FFF4F4; border: 6px Dotted #FF8080; padding: 10px;">
       
        Nội dung cần đóng khung  kiều Dotted
       
        </div>   
 
       
        <div style="background-color: #F0FFF0; border: 6px Inset #6F6F6F; padding: 10px;">
       
        Nội dung cần đóng khung kiều Inset
       
        </div>   
 
       
        <div style="background-color: #F0FFF0; border: 6px Outset #808040; padding: 10px;">
       
        Nội dung cần đóng khung kiều Outset
       
        </div>   

     Các kiểu khung nâng cao:
    Trên đây là các kiểu khung cơ bản. Nếu biết vận dụng kết hợp lồng nhiều khung vời nhiều kiểu khác nhau, màu sắc, độ    dày ... thích hợp thì chúng ta có thể tạo ra các kiểu khá đẹp mắt. Đây là vấn đề vận dụng linh động của mỗi người. Ví dụ khung sau đây mình lồng 8 khung cùng kiểu solid, cùng độ dày 2px, chỉ khác    nhau về màu sắc:
   
                                            <div style="background-color: #FFFFFF;"><div style="border:2px solid #8B814C;"><div style="border:2px solid #CDBE70;"><div                                            style="border:2px solid #EEDC82;"><div style="border:2px solid #FFEC8B;"><div style="border:2px solid #FFF68F;"> <div style="border:2px                                            solid #FFEC8B;"> <div style="border:2px solid #EEDC82;"> <div style="border:2px solid #CDBE70;"> <div style="border:2px solid #8B814C;                                            padding: 10px;">
                                           
                                            NỘI DUNG CẦN ĐÓNG KHUNG
                                           
                                            </div></div></div></div></div></div></div></div></div></div>                                       
 
                                        <div style="background-color: #FFFFFF;"><div style="border:2px solid #BBBBBB;"> <div style="border:2px solid #CCCCCC;"> <div                                        style="border:2px solid #DDDDDD;"> <div style="border:2px solid #EEEEEE;"> <div style="border:2px solid #EEEEEE;"> <div style="border:2px                                        solid #DDDDDD;"> <div style="border:2px solid #CCCCCC;"> <div style="border:2px solid #BBBBBB;padding: 10px">
                                       
                                        NỘI DUNG CẦN ĐÓNG KHUNG
                                       
                                        </div></div></div></div></div></div></div></div></div></div>                                   

    Kiểu khung phim:
   
    
                                       
                                        <div style="background-color: #000000;"><div style="border: 2px solid                                        #0000FF;"><div style="border: 2px solid #00FF00;"><div style="border: 6px Dashed #00FF00;"><div style="border: 2px solid #00FF00; padding:                                        10px;color: #FFFFFF;">
                                       
                                        NỘI DUNG CẦN ĐÓNG KHUNG
                                       
                                        </div></div></div></div></div>

                                       
                                   
 
                                       
                                        <div style="background-color: #FFF000;"><div style="background-color:                                        #000000;"><div style="border: 2px solid #EE0000;"><div style="border: 6px Dashed #EE0000;"><div style="border: 2px solid #EE0000; padding:                                        10px; color: #FFFFFF;">
                                       
                                        NỘI DUNG CẦN ĐÓNG KHUNG
                                       
                                        </div></div></div></div></div>

                                       
                                   
 
                                       
                                        <div style="background-color: #000000;"><div style="border: 2px ridge                                        #00FF00;"><div style="border: 2px solid #EE00EF;"><div style="border: 6px Dotted #EE00EF;"><div style="border: 2px solid #EE00EF; padding:                                        10px;color: #FFFFFF;">
                                       
                                        NỘI DUNG CẦN ĐÓNG KHUNG
                                       
                                        </div></div></div></div></div>

                                       
                                   

 

    Hiệu ứng khi rê chuột vào ảnh
   
    Muốn khi rê chuột vào ảnh thì ảnh sẽ phóng to ra và có bóng như trong anh này:
           

    Thì trước hết các bạn chèn code sau đây vào CSS:
    Code:
       
        .anh img{
        -webkit-transform:scale(0.4);
        -moz-transform:scale(0.8);
        -o-transform:scale(0.8);
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        opacity: 1.;
        margin: 0 1px 1px 0;
        }
       
        .anh img:hover{
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -o-transform:scale(1.2);
        -webkit-box-shadow:2px 2px 7px #000000;
        -moz-box-shadow:2px 2px 7px #000000;
        opacity: 1;
        }   

    Sau đó khi viết bài và chèn ảnh xong bạn chọn chế độ soạn thảo html và
    - viết <div class="anh"> vào bên trên đoạn chứa ảnh
    - viết </div> vào cuổi đoạn chứa ảnh.
    Vậy là xong

 

    Button Mở/Đóng tiện ích
    Muốn tạo button để mở/đóng tiện ích giống như button mở/dóng chatbox ở góc dưới trái trang chủ trang web này, các bạn chỉ cần chèn code sau đây vào trang chủ của web site bạn là xong:
    Code:
       
        <script type="text/javascript">
        var cbvis = false;
        var cbload = false;
        function togglecbox () {
        var Cbox = document.getElementById("hunghsmn_Cbox");
        var nutlenh = document.getElementById("nut_dong_mo");
       
        if (!cbvis) {
        if (!cbload) {
        Cbox.innerHTML = '<iframe frameborder="0" width="100%" height="400" src="http://trekhuyettat.sosforum.net/h3-page" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes"        name="cboxmain" style="border:#EDDEDB 1px solid;border-bottom:0px" id="cboxmain"></iframe>'; cbload = true; } Cbox.style.display = "block";
        nutlenh.innerHTML = "<font color='red'><b>Đóng Cbox</b></font>";
        } else { Cbox.style.display = "none";
        nutlenh.innerHTML = "<font color='red'><b>Mở Cbox</b></font>";
        } cbvis = !cbvis;
        } </script>
        <div id="nut_dong_mo" style= "position: fixed; bottom: 0px; left: 0px; width: 100px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px        solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 16px;"
        onclick="togglecbox()"><font color="red"><blink><b>Mở Cbox</b></blink></font></div>
        <div id="hunghsmn_Cbox" style= "display: none; position: fixed; bottom: 30px; left: 0px; width: 100%; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius:        3px;"> </div>   

    Code trên đây là mình mở chatbox. Bạn muốn đóng mở  gì thì - Thay link http://trekhuyettat.sosforum/h3-page bằng link trang tiện ích của bạn
    - Sửa mấy chữ đóng mở chatbox thành đóng mở cái gì đó của bạn
    Vậy là xong
Thể loại: Templates code | Gửi bởi: hunghsmn | Tags: Thủ thuật
Views: 599 | Downloads: 0 | Đánh giá: 5.0/3
Tổng số ý kiến: 0
Name *:
Email *:
Code *:
  Copyright MyCorp © 2017