Contents tagged “CSS”

There are 63 contents with this tag:

  7. 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/

  8. screenshot of The Large, Small, and Dynamic Viewports

    Bramus Van Damme avatar Bramus Van Damme

    The Large, Small, and Dynamic Viewports

    Bramus shows how the situation might finally improve for viewport height CSS units, more than 6 years after I reported the unreliable 100vh value as a bug to webkit, and webkit replied it was "intended".

  17. 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. 🤷‍♂️

  20. 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.

  23. screenshot of HTML and CSS techniques to reduce your JavaScript

    Anthony Ricaud avatar Anthony Ricaud

    HTML and CSS techniques to reduce your JavaScript

    relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These solutions generally have the advantage of using less code, thus reducing maintenance efforts for a development team (for example, no need to update the libraries used).

  24. 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

  25. screenshot of spider-pig

    Zach Leatherman avatar Zach Leatherman

    spider-pig

    Get a list of local URL links from a root URL. Works with JavaScript generated content. Can also act as a live-DOM CSS search across multiple files (find all the templates that are using the CSS selector I want to change).

  26. Wonder if #EveryLayout's sidebar could be used for a media component where the image is on top by default, and on the right when there's enough space.

    Looks like it's either 1st element on the left or 2nd element on the right… 🤔

    A media element based on EveryLayout's sidebar?

  27. screenshot of The (extremely) loud minority

    Andy Bell avatar Andy Bell

    The (extremely) loud minority

    Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means that when they say something like “CSS sucks”—what they mean is “CSS sucks for a small subset of less than 1 percent of the web”

  33. screenshot of Style Stage and old people of the web

    Christian Heilmann avatar Christian Heilmann

    Style Stage and old people of the web

    Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh god, not again” in our heads as that is our baggage and not the one of the web community. We’ve dropped the ball somewhere along the line talking exclusively to a receptive audience instead of moving on with our advocacy into academia, enterprise and education.

  38. screenshot of Deep dive CSS: font metrics, line-height and vertical-align

    Vincent De Oliveira avatar Vincent De Oliveira

    Deep dive CSS: font metrics, line-height and vertical-align

    Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

  40. screenshot of Why Is CSS So Weird?

    Miriam Suzanne avatar Miriam Suzanne

    Why Is CSS So Weird?

    If you don't understand why CSS is one of the great strengths of the Web, even if you've been using it for a while, you really have to spend these 15 minutes to watch Miriam Suzanne explain how it came to be, and why it is what it is.

  41. 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 in most email clients.

  45. screenshot of The perils of functional CSS

    Jay Freestone avatar Jay Freestone

    The perils of functional CSS

    Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.

  46. screenshot of Front-end Developer Handbook 2019

    Cody Lindley avatar Cody Lindley

    Front-end Developer Handbook 2019

    If you want to grok the great diversity of topics and technologies involved in Front-end Web development, here is probably the most comprehensive source you can find nowadays.

  49. screenshot of Generative Art With CSS

    Yuan Chuan avatar Yuan Chuan

    Generative Art With CSS

    Yuan Chuan creates art from everything available in CSS, created < css-doodle /> (a web component for drawing patterns with CSS), and gave a talk at the 5th CSS Conference in Shenzhen on March 30, 2019.

  50. screenshot of Sophisticated Partitioning with CSS Grid

    Rob Weychert avatar Rob Weychert

    Sophisticated Partitioning with CSS Grid

    Tinnitus Tracker is the live music diary of Rob Weychert, listing more than 300 shows he's attended. Events lists can be really boring to scroll through, unless you're fond of CSS and want to experiment with Grid Layout and Quantity Queries.

  51. screenshot of Font sizing with rem could be avoided

    Harry Roberts avatar Harry Roberts

    Font sizing with rem could be avoided

    I don't really agree with the simple statement made in the title of this article, as sizing fonts with rem is sometimes useful to escape the default cascading sizing, but the most important part here IMHO is the following:

  52. screenshot of The Flexbox Holy Albatross Reincarnated

    Heydon Pickering avatar Heydon Pickering

    The Flexbox Holy Albatross Reincarnated

    when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.

  53. screenshot of CSS Indexes: A listing of every term defined by CSS specs

    CSS Indexes: A listing of every term defined by CSS specs

    This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as a reference document for authors, implementors, and spec authors, to aid in finding the definition for a term hidden somewhere in the haystack of CSS specs.

  55. 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… 😉

  56. Where is the Fold?

    OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu'il y a des outils qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.

  62. L'ombre d'un doute…

    Un effet graphique assez répandu, au point d'envahir notamment les interfaces graphiques des différents OS, est celui des ombrages. Les ombres permettent de donner du relief aux interfaces, principalement pour mettre en évidence la supperposition de différentes « couches » graphiques.

See all tags.