Thông báo windowsz.net

Chú ý Quảng cáo

 

Diễn dàn khuyên dùng trình duyệt Firefox hoặc Chrome để hiển thị tốt nhất

       

Tìm chúng tôi trên Google + của WindowsZ

Hãy bấm +1 và like để diễn đàn phục vụ bạn tốt hơn
Follow Me on Pinterest

 

 

 

 

Bạn không muốn bị Banned. Vui lòng đọc trước khi post bài

Tham gia vào BQT để nhận ưu đãi lớn

Please choose your language:
Hỗ trợ online: phungnguyen  - Hải Dương - boyplay
Hiện kết quả từ 1 tới 7 của 7

Chủ đề: [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS

  1. #1
    Boyplaysoftware

    Avatar của boyplay
    Tham gia ngày
    Sun Nov 2009
    Đến từ
    Go Vap, Hồ Chí Minh, Vietnam, Vietnam
    Tuổi
    22
    Bài gửi
    19.683
    Thanks
    3.088
    Thanked 18.217 Times in 5.706 Posts
    Blog Entries
    4

    Mặc định [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS

    Chia sẻ lên Digg

    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Xem demo


    Đầu tiên là HTML
    Menu của chúng ta có 3 đối tượng là Header <h2>, đoạn text <p>, và các <span> cho các element
    PHP Code:
    <ul class="imageMenu">
        <
    li id="tasmania01">
                <
    h2><a href="#tasmania01">Tasmania 01</a></h2>
                      <
    p><span>PlaceTasmaniaDate2008NameTasmania 01, ...</span></p>
                   </
    li>
                   <
    li id="tasmania02">
                      <
    h2><a href="#tasmania02">Tasmania 02</a></h2>
                      <
    p><span>PlaceTasmaniaDate2008NameTasmania 02, ...</span></p>
                   </
    li>
                   <
    li id="tasmania03">
                      <
    h2><a href="#tasmania03">Tasmania 03</a></h2>
            <
    p><span>PlaceTasmaniaDate2008NameTasmania 03, ...</span></p>
                   </
    li>
    </
    ul
    Đoạn code trên khi chưa có HTML sẽ trông như thế này

    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Tiếp theo là CSS
    Bắt đầu là chúng ta sẽ tùy chỉnh khi menu chưa đc click
    Chúng ta sẽ ẩn các thành phần chứa bên trong menu bằng cách sử dụng selector :not(: target). Liên kết trong <h2> sẽ cần tới CSS. điều này làm nền (background-color) cho các menu chưa đc chọn.

    PHP Code:
    .imageMenu:not(:targeth2 a {
        
    backgroundrgb(54,86,94);/* Fallback */
        
    backgroundrgba(0,0,0,.3);


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS

    Tiếp theo là khi menu đc click vào
    Tag <h2> sẽ đc chỉnh để có màu nền trong suốt là màu trắng.

    PHP Code:
    .imageMenu h2 a {
        
    displayblock;
        
    font-size18px;
        
    font-weightnormal;
        
    color:#FFF;
        
    text-decoration:none;
        
    margin:0;
        
    padding:10px;
        
    background:rgb(54,86,94);
        
    background:rgba(255,255,255,.3);

    Chúng ta sẽ dùng các class :target kết nối với class :not(). Điều này cho phép bạn tạo ra các hiệu ứng trưng bày ảnh đẹp hơn mà ko cần tới các class “active” hoặc “inactive”. Và Code HTMl của bạn sẽ "sạch" hơn.

    Class :not("target) là “inactive item” và nếu ko có class này thì nó thành “active item”. inactive items mặc định là có. Tuy nhiên chúng ta sẽ tiếp tục với "active items" (trong ví dụ này là khi bạn rê chuột vào).

    PHP Code:
    imageMenu h2 a:hover,
    .
    imageMenu h2 a:active,
    .
    imageMenu h2 a:focus {
        
    background:rgb(154,186,194);/* Fallback */
        
    background:rgba(255,255,255,.3);


    Có 3 trạng thái là :hover, :active :focus chúng sẽ đem lại độ trong suốt cho màu nền. Dưới đây là những gì chúng ta sẽ làm


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Hiện hình ảnh

    Class :target :not() sẽ cần 1 số thuộc tính bắt đầu. Có nghĩa là đóng các trạng thái của tất vả menu lại.

    Và vì thế bạn cần phải xác định đc chiều cao của bức hình bao gồm cả hình nền. Để có đc chiều cao cho trạng thái inactive. Bạn cần xác định cho nó chiều cao là 0px (dòng 4)
    PHP Code:
    .imageMenu:not(:target{
        
    padding:0;
        
    margin:0;
        
    height:0;
        
    overflowhidden;

    Các hình ảnh sẽ đc hiển thị bằng thuộc tính background.

    PHP Code:
    .imageMenu #tasmania01 p,
    .imageMenu #tasmania02 p,
    .imageMenu #tasmania03 p {
        
    backgroundurl(.../images/tasmania01.jpgtop left no-repeat;
        
    position:relative;
    }
    .
    imageMenu #tasmania02 p {
        
    background-imageurl(.../images/tasmania02.jpg);
    }
    .
    imageMenu #tasmania03 p {
        
    background-imageurl(.../images/tasmania03.jpg);


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Tiếp theo là cần xác định chiều cao cho "active state". "inactive state" thì ko cần nhưng "active state" thì buộc phải cần và là chiều cao chính xác của tấm ảnh. Ở đây tấm ảnh có chiều cao là 130px

    PHP Code:
    .imageMenu p {
        
    height:130px;


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Và bây h là hiệu ứng dịch chuyển khi click vào Menu

    Chuyển đổi ở đây đc thiết là là 1.5s

    PHP Code:
    imageMenu:not(:target{
        -
    moz-transitionheight 1.5s ease-in;
        -
    webkit-transitionheight 1.5s ease-in;
        -
    o-transitionheight 1.5s ease-in;
        
    transitionheight 1.5s ease-in;


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Lưu ý là. Các trình duyệt IE đều ko hiển thị đc hiệu ứng này. Nó sẽ trông như vầy


    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS
    Và ác 1 điều là nếu bạn ko có class :target và :not() (nhằm thay thế để chạy trên IE) thì nó sẽ đóng các hiệu ứng luôn

    Vậy là xong rùi. Download file zìa để xem cho rõ

    Bài viết ngẫu nhiên trong diễn đàn:

    • » [Soft] D7 v6.6.12 - Sửa lỗi máy tính toàn diện
    • » The Elder Scrolls V: SKYRIM...
    • » Chuyển đổi phim DVD thành phim định...
    • » Hình ảnh của Win7 trên kệ của MS Store
    • » [Driver] Bán bã đậu phộng sản xuất thức ăn chăn...
    • » [Tut] Thêm biểu tượng cảm xúc dễ thương...
    • » [Soft] Easy MP3 Downloader 4.4.8.8 – Hỗ trợ...
    • » [Soft] Ultracopier 0.3.1 - Tăng, hãm tốc độ...
    • » Bad Blood 2014 1080p BluRay H264...
    • » Terri (2011) BluRay 720p x264 DTS

    Xem thêm các chủ đề mới nhất:

    • » www .nhaxinhvn. net - TƯ VẤN, THIẾT KẾ...
    • » Thợ xây nhà
    • » Cho Vay Không Thế Chấp
    • » Hỏi cách vẽ biểu đồ Pie chung nhau...
    • » [CSS3] Trang web dạng trượt ngang
    • » [CSS3 - jQuery] Drop Down Menu với...
    • » [CSS3] Hiệu ứng chữ 3D nổi
    • » [CSS3] Hiệu ứng độc đáo khi rê chuột...
    • » [PHP] Tạo cache cho trang Web
    • » Tối ưu web bằng HTTP cache với .htaccess
    Tập tin đính kèm Tập tin đính kèm

    Y!M: anhchangdeptrai3792159
    Ko Thanks là ko Support nha

    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS Mọi link đều có mật khẩu là: windowsz.net
    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS Hỗ trợ download tài liệu tại trang tailieu.vn miễn phí cho mọi người
    Hãy bấm +1 nếu thấy bài viết hay nha bạn



  2. Những người đã cảm ơn boyplay cho bài viết có ích này:

    lhxwindowsz (26-11-2012)

  3. #2
    Thành Viên
    Avatar của VNSmile261
    Tham gia ngày
    Thu Nov 2012
    Bài gửi
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mặc định

    Bạn ơi, có cách nào thay thế :target trong css bằng một event trong html không?
    Lần sửa cuối bởi boyplay; 27-11-2012 lúc 03:43 PM

  4. #3
    Boyplaysoftware

    Avatar của boyplay
    Tham gia ngày
    Sun Nov 2009
    Đến từ
    Go Vap, Hồ Chí Minh, Vietnam, Vietnam
    Tuổi
    22
    Bài gửi
    19.683
    Thanks
    3.088
    Thanked 18.217 Times in 5.706 Posts
    Blog Entries
    4

    Mặc định

    Quote Nguyên văn bởi VNSmile261 [Chỉ có thành viên mới có thể nhìn thấy link. CLICK VÀO ĐÂY ĐỂ ĐĂNG KÝ]
    Bạn ơi, có cách nào thay thế :target trong css bằng một event trong html không?
    Mình ko rành về CSS nên ko thể giúp bạn đc. Chỉ là giới thiệu lại cho mọi người xem thôi

    Y!M: anhchangdeptrai3792159
    Ko Thanks là ko Support nha

    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS Mọi link đều có mật khẩu là: windowsz.net
    [CSS3] Hiệu ứng cho hình ảnh với Accordion trong CSS Hỗ trợ download tài liệu tại trang tailieu.vn miễn phí cho mọi người
    Hãy bấm +1 nếu thấy bài viết hay nha bạn



  5. #4
    Thành Viên
    Avatar của VNSmile261
    Tham gia ngày
    Thu Nov 2012
    Bài gửi
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mặc định

    Quote Nguyên văn bởi boyplay [Chỉ có thành viên mới có thể nhìn thấy link. CLICK VÀO ĐÂY ĐỂ ĐĂNG KÝ]
    Mình ko rành về CSS nên ko thể giúp bạn đc. Chỉ là giới thiệu lại cho mọi người xem thôi
    cảm ơn bạn đã quan tâm nhé, mình đã tìm được hướng giải quyết rồi!

  6. #5
    Junior Member
    Avatar của test
    Tham gia ngày
    Thu Aug 2010
    Bài gửi
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mặc định

    Cái này có vẻ hay hay, download thử xem thế nào

  7. #6
    Thành Viên
    Avatar của mrdampr0
    Tham gia ngày
    Wed Oct 2012
    Bài gửi
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Mặc định

    hay quá.thanks bạn mnhieeuf

  8. #7
    Thành Viên
    Avatar của Viruslove Nd
    Tham gia ngày
    Sat Dec 2012
    Bài gửi
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mặc định

    thanks bạn nhiều

Thông tin chủ đề

Users Browsing this Thread

Hiện có 1 người đọc bài này. (0 thành viên và 1 khách)

Chủ đề tương tự

  1. [CSS3 + jQuery] Tạo menu dạng xổ xuống (Accordion) bằng CSS3 cơ bản
    Gửi bởi boyplay trong mục Thủ thuật lập trình
    Trả lời: 17
    Bài cuối: 24-10-2013, 09:34 PM
  2. [CSS3] Nút bấm động đa lớp đẹp
    Gửi bởi boyplay trong mục Thủ thuật lập trình
    Trả lời: 4
    Bài cuối: 30-03-2013, 01:10 PM
  3. Trả lời: 0
    Bài cuối: 08-03-2012, 12:41 PM
  4. [Tut] Hiệu ứng chữ 3D với CSS3
    Gửi bởi boyplay trong mục Thủ thuật lập trình
    Trả lời: 0
    Bài cuối: 29-12-2011, 08:59 AM
  5. [Tip] CSS3 Cơ bản
    Gửi bởi boyplay trong mục Thủ thuật lập trình
    Trả lời: 0
    Bài cuối: 15-12-2011, 07:48 PM

Những thành viên tìm thấy trang này bởi từ khóa

hieu ung anh css

hieu ung anh bang css

css hieu ung nen trong suot

hiệu ứng ảnh css3

hiệu ứng css 3 cho ảnh

hieu ung hinh anh css

hieu ung hinh anh trong php

hieu ung trong suot trong css

header trong suot bang css

hieu ung css cho anh html

background

tao hieu ung mo dan cho anh nen bang css

hieu ung 3d bang css

css hieu ung voi anh

1 so hieu ung hinh anh bang css

hiệu ứng ảnh vs css

hien ung hinh anh css

code html hiệu ứng ảnh

code hieu ung doi hinh anh

code hieu cho anh css

tao hieu ung anh bang css

hieu ung cho img trong css3

css3 cho hinh

code hieu ung hinh dung bang css

hieu ung hinh hop trong css3

Từ khóa (Tag) của chủ đề này

Đánh dấu

Quyền viết bài

  • Bạn không thể gửi chủ đề mới
  • Bạn không thể gửi trả lời
  • Bạn không thể gửi file đính kèm
  • Bạn không thể sửa bài viết của mình
  •