Contents tagged “CSS”

There are 99 contents with this tag:

  3. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

  9. screenshot of SupportsCSS

    Stephanie Eckles

    SupportsCSS

    Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and…

  13. Running CSS animations only if both the device and the user allow it

    Thanks to Chrome release notes, I discovered today that there is an update media feature which accepts values fast, slow and print, to set styles depending on the ability of the device to update the rendering and the speed of it. As I'm already respecting the user's preference with the prefers-reduced-motion media feature, I wondered how I could progressively enhance this with the new media feature.

  28. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }

  43. Avatar for nhoizey
    Nicolas Hoizey @nhoizey

    Working on my photography site, I wanted to show a few photos from folder in a gallery, and built something cool with just CSS.

    But is it really cool, or just cool once and then annoying?

    Try it live on desktop: nicolas-hoizey.photo/travels/europe/

    youtu.be/VmwJ4KInloQ

    1 12:47 PM · Jul 17, 2021

    I finally decided the effect on hover was too invasive and difficult to tweak, so I changed for a much more traditional way to show multiple images of a folder: a diaporama with a Ken Burns effect.

    Try it! https://nicolas-hoizey.photo/travels/

  53. When I import my Google Analytics data in #CanIUse, it says only 80 % of my visitors have support for CSS clamp(), while it's 90 % globally. 🤔

    Percentages of users that have browsers supporting CSS clamp().

    I have almost only tech-savvy visitors, so I don't understand. 🤷‍♂️

  56. Is there some sort of shape-outside: self; in CSS, to use an image as it's own shape? 🤔

    I couldn't find it in any docs, but it would be really useful to not declare the same URL twice.

  60. I'm a developer, not a graphic designer, so I genuinely wonder if CSS Grid and Flexbox automated layout and space management would be better for the flexible Web than such rigid artificial grids. I'm really wondering.

    Avatar for vpieters
    Veerle Pieters @vpieters

    Responsive Grid Design: Ultimate Guide

    This article highlights the most important aspect of the responsive grid and how product designers can adapt grids in their design workflow. medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892

    Image from Tweet
    38 09:59 AM · Dec 23, 2020

  77. screenshot of Can I email ___ ?

    Rémy Parmentier avatar Rémy Parmentier

    Can I email ___ ?

    Rémy and a few others launched an awesome resource for people who plan to struggle with rich email using HTML and CSS, which are not well supported…

  91. Responsive Icons with SVG

    There have already been some explorations on responsive SVG images a while back, but when Joe Harrison posted a responsive icon concept on Dribbble and even a working version on a dedicated website, a few people thought this was so wrong they had to make their own version. I must admit I'm one of them… 😉

See all tags.