Results 1 to 7 of 7

Thread: CSS3 Transform

  1. #1
    Join Date
    Feb 2009

    CSS3 Transform

    I'm building a photo gallery template with a box grid of photo thumbnails. When hovering over a thumbnail the image is suppose to scale larger.

    I've been asked to use CSS3 transformations for this effect. Though I'm wondering if jQuery effects are more practical. How much support does transform have across browsers? IE would have to use something like filter, yes?

  2. #2
    Join Date
    Dec 2003
    Bucharest, ROMANIA
    Usually, IE (at least 7 and 8) are behind the rest of the browsers while implementing CSS3, and yes, it provides an intricate alternate solution using filter.

    But, the main question is: do you want a continuous scaling (in movement) or a simple and suddenly one (from a single move). In the first case you need a JavaScript solution by all means. And, yes, JQuery might ease your work in this case.

    I would opt for a JavaScript solution. CS3 is still inconsistent among the browsers.

  3. #3
    Join Date
    Dec 2005
    I think you may have meant CSS3 "transitions" in your post - which can look virtually identical to Javascript animations.

    If you're a developer who's always looking to stay on his game and stay at the current edge of web development, I'd recommend test out CSS3 transitions with a Javascript fallback for all versions of IE and Firefox <4.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

  4. #4
    Join Date
    Dec 2003
    Bucharest, ROMANIA
    Quote Originally Posted by aj_nsc View Post
    I think you may have meant CSS3 "transitions" in your post - which can look virtually identical to Javascript animations.
    Hm... can you bring an example?

  5. #5
    Join Date
    Dec 2005
    First of all, note that I said "CAN" look like JS animations, and second of all, here are two templates that I programmed in the past week to use CSS3 instead of JS. I didn't bother putting JS fallback on the first one because, other than experience, they don't hinder the user's ability to use the website in any way, and I'd rather that IE users eventually realize what they're missing when they see someone open up a website and they say "Hey, that didn't fade/slide down when I saw it on my computer"

    CSS3 Transitions:


    Dropdown Menu and hover links on "Brands" navigation link
    Hover effects on links when you hover over company logos
    Slide-out divs that appear when you hover over any of the main images


    Accordion slider on the left is 99&#37; CSS3, all I had to do was to use Javascript to change the target (window.location.hash) if the user clicked on an accordion panel that was already open.

    These are personal examples (and fairly weak ones, at that), google will provide you with a thousand more that look amazing.

    EDIT: Like this one that uses CSS3 (but I think it's based on animations rather than transitions) - http://kickoffapp.com/
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

  6. #6
    Join Date
    Dec 2003
    Bucharest, ROMANIA
    aha. Ok, thanks. Interesting.

    Of course, IE will not make a smooth transition

    A note about the site above: Move your comments from the top of the document below the Doctype. The Doctype should be the first line of the document. Anything written above might spoil things. For instance, IE will display the document in quirks mode, by default. I had to set manually the document's mode

  7. #7
    Join Date
    Dec 2005
    Of course, as I pointed out also, IE will not make a smooth transition UNLESS you provide a JS fallback in which case you can mimic the transition exactly, but thanks for reiterating.

    I was unaware of the quirksmode issue if anything was before the doctype. Fortunately, this is the base HTML template for a dynamic website to be built off of and the comments, as I'm sure you could tell, are used for the backend team and won't appear on the final site. Good info to know, though.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.16786 seconds
  • Memory Usage 2,908KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates