Martin Schneider

Tag: css

I have currently saved 60 bookmarks with this tag.

← Back to all bookmarks

  1. The CSS Mindset | Max Böck - Frontend Web Developer

    Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It’s too hard. It’s too simple. It’s unpredictable. It’s outdated. Peter Griffin struggles with blinds dot gif.

  2. Relearn CSS layout: Every Layout

    If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.

  3. Using CSS Counters - Pine

    The CSS counters are variables which we can increment or decrement with the specific property. With the help of it, we can achieve some generic iteration like in a programming language.

  4. Palx

    Provide a single color value and Palx returns a full-spectrum color palette, well suited for UI design and data visualizations that work harmoniously with brand colors.

  5. How to Section Your HTML | CSS-Tricks

    The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section. Here is a brief explanation of each sectioning element and how they are used.

  6. Styling a Select Like It's 2019 | Filament Group, Inc., Boston, MA

    The select element has long been difficult to style consistently across browsers. To avoid its shortcomings in the past, we have used workarounds like styling a parent element, adding pseudo-elements, and even using JavaScript to construct a select-like control out of different elements that are easier to style.

  7. GradientLab

    Gradient-Generator, der automatisch Zwischen-Farbwerte berechnet und dadurch schönere Gradienten macht.

  8. Cards

    Eine wirklich komplette Anleitung, wie man ein Kartenelement baut.

  9. Font style matcher

    If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.

  10. ✿

    Die Webseite unterstützt mit einem interaktiven Diagramm beim Erstellen von Cubic-Bezier-Animationen.

  11. Grid by Example

    <blockquote>Everything you need to learn CSS Grid Layout</blockquote>

  12. Methods to Organize CSS | CSS-Tricks

    <blockquote>Ben Frain once remarked that it's easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem.</blockquote>

  13. Flex-grow 9999 Hack

    <blockquote>The flex-grow 9999 hack makes a flex item behave like it has two flex grow values. It prevents a flex item in a row from growing, but allows it to grow if it’s wrapped into its own line. All without the use of media queries.</blockquote>

  14. Performant Parallaxing  |  Web  |  Google Developers

    <blockquote>Love it or hate it, parallaxing is here to stay. When used judiciously it can add depth and subtlety to a web app. The problem, however, is that implementing parallaxing in a performant way can be challenging. In this article we’ll discuss a solution that is both performant and, just as importantly, works cross-browser.</blockquote>

  15. Web Font Loading Patterns - Bram Stein

    <blockquote>Web font load­ing may seem com­pli­cated, but it is ac­tu­ally quite sim­ple if you use these font load­ing pat­terns. Com­bine the pat­terns to cre­ate cus­tom font load­ing be­hav­iour that works in all browsers.</blockquote>

  16. Flexbox Patterns

    <blockquote>Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end. You can start using these patterns in your own code right away.</blockquote>

  17. flexbox in 5 minutes

    <blockquote>an interactive tour of all the major features of the new CSS property: flexbox.</blockquote>