10/10/2018, 00:02

Cho hỏi về mấy cái hiệu ứng. Ai rành thì chỉ giúp !



Mọi người thấy cái trên rồi chứ, cái hiệu ứng đường viền có bóng đổ xuống đó

Sao mà mỗi khi em download mấy trang có hiệu ứng giống như vậy, dùng Dreamweaver mỏ lên coi thì lại hổng thấy gì, toàn là một khối xấu ỉnh, chẳng giống như lúc duyệt trang đó !! Code thì toàn div, chẳng thấy cái table nào !!

Mọi người cho em hỏi cách làm như vậy, và công cụ để làm

Thanks in advance !
Tran Vu viết 02:05 ngày 10/10/2018
cái đó phải tạo khung bằng PS rồi cắt ra từng khối như góc trái, phải ở trên và ở dưới, trái ,phải .v.v. sau đó tạo các div lồng nhau mỗi div chứa 1 khối

CSS:

Code:
#left {background:#ffffff url(images/bg/left.gif) repeat-y 0 0;}
#right {background:url(images/bg/right.gif) repeat-y 100% 0;}
#top {background:url(images/bg/top.gif) repeat-x 0 0;}
#bottom {background:url(images/bg/bottom.gif) repeat-x 100% 100%;}

#corner_tl{background:url(images/bg/tl.gif) no-repeat 0 0;}
#corner_tr{background:url(images/bg/tr.gif) no-repeat 100% 0;}
#corner_bl{background:url(images/bg/bl.gif) no-repeat 0 100%;}
#corner_br{background:url(images/bg/br.gif) no-repeat 100% 100%; padding: 10px;}
XHTML:
PHP Code:
<div id="left"><div id="right"><div id="top"><div id="bottom">
    <
div id="corner_tl"><div id="corner_tr"><div id="corner_bl"><div id="corner_br">
        
Content here
    
</div></div></div></div>
</
div></div></div></div
zoejoe viết 02:14 ngày 10/10/2018
Sao mình làm không được vậy bạn, bạn có thể cho mình luôn mấy tấm hình PS đó đựoc khôg ?

Bạn vui lòng rinh nguyên mẫu để mình tham khảo và học hỏi với. Thanks
Tran Vu viết 02:11 ngày 10/10/2018
Đây là vài hình trong cái mẫu mà bạn đưa ở trang Redmine nè
Góc phải dưới

Góc trái dưới

và bên phải ( nhỏ lắm sẽ khó thấy)



và còn left, top, bottom nữa: các thuộc tính này sẽ lặp lại ví dụ left, right sẽ repeat theo trục y còn top và bottom sẽ repeat theo chiều x sau đó 4 góc sẽ chồng lên. Vậy là xong bạn đã hiểu cách mà nó làm chưa.

Bạn có thể dùng filebug để debug xem trang web đó nó làm như thế nào
https://addons.mozilla.org/en-US/firefox/addon/1843

Goodluck!

PS: move cái này wa box Web Design đê bác mod ơi
zoejoe viết 02:17 ngày 10/10/2018
Thanks so much, close được rồi
Bài liên quan
0