Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Client Showcase/Gallery Design – CSS Only

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #277503
    geekalert
    Participant

    Is it possible to make something like this:

    CardUI Client Showcase

    Or like the examples on this page:

    Smart Logo Showcase

    with only CSS (no JS)? If so, how would I get started? I would really like to learn to make these kinds of layouts this myself, and I’m just not sure where to begin. ANY help is appreciated. I really am eager and I can figure out most things with CSS and HTML, I just need a little starter about how to make the interactions work—or find out even if they can work—with only CSS. :D

    Examples would be brilliant. Even if it’s just pieces.

    Thanks!

    #277507
    Beverleyh
    Participant

    I’m not sure what trouble you’re having but you can normally find example layouts if you type a query into google: “grid of image css layout” for example, and start your research there.

    You could also look into different type of layouts:
    – float layouts
    – flex layouts
    – grid layouts

    Interactions (click/tap/drag the screen = something happens) are normally performed with JavaScript, although you can do some things with CSS using the “checkbox hack”, and the :target selector, or even with :hover (albeit v basic and not great for cross-compatibility/usability on touch devices). Again, try googling those: “interactions with checkbox hack”, etc.

    For animations, look into “CSS animations and keyframes”. You could then trigger an animation using the checkbox hack, for example.

    Once you’ve done some research, if you hit a specific problem, feel free to post a simple CodePen demo and we can offer suggestions on how to fix the issue. Broad questions are unfortunately too difficult to answer effectively, so you’ll likely receive broad answers (like above).

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.