The Current State of Styling Scrollbars in CSS (2022 Update) | CSS-Tricks
Your best bet for styling scrollbars in CSS, for as much cross-browser support as possible, is to use the special ::webkit prefixed scrollbar CSS properties (Chrome & Safari will need those for now) and the standardized scrollbar-width and scrollbar-color properties (for Firefox for now). So a basic setup would look like this: .styled-scrollbars { /* Foreground, Background */ scrollbar-color: #999
Simple Swipe with Vanilla JavaScript | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined. This article is going to take you, step by step, through the imp
Breaking down CSS Box Shadow vs. Drop Shadow | CSS-Tricks
Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs. Not too long after box-shadow was introduced, a working draft
Methods to Organize CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Developer 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. OOCSS OOCSS stands for object-oriented CSS. This approach has two main ideas: Separation of structure a
Form Validation Part 3: A Validity State API Polyfill | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every
Form Validation Part 2: The Constraint Validation API (JavaScript) | CSS-Tricks
Form Validation Part 2: The Constraint Validation API (JavaScript) In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type="email">) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that hav
Form Validation Part 1: Constraint Validation in HTML | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some cus
Intro to Vue.js: Rendering, Directives, and Events | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If I was going to sum up my experiences with Vue in a sentence, I’d probably say something like “it’s just so reasonable” or “It gives me the tools I want when I want them, and never gets in my way”. Again and again, when learning Vue, I smiled to myself. It just made sense,
Creating Non-Rectangular Headers | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Over at Medium, Jon Moore recently identified “non-rectangular headers” as a tiny trend. A la: it’s not crazy popular yet, but just you wait, kiddo. We’re talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids:
A Guide for SVG Support in Email | CSS-Tricks
Total support: 60% SVG as Inline HTML In this test, we’re plucking the code for the SVG file right out of Illustrator and plopping it directly into the email’s HTML: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-227 241 225.3 224.1" style="enable-background:new -227 241 225.3 224.1;" xml:space="preserve"> <path class="dice-1" d="M-132,24
Responsive Images in CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The term “responsive images” has come to mean “responsive images in HTML”, in other words, the srcset and sizes attribute for <img> and the <picture> element. But how do the capabilities that these things provide map to CSS? CSS generally wasn’t really involved in the respon
Styling Underlines on the Web | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what’s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post. There are a bunch of different ways to style underlin
A Complete Guide to Flexbox | CSS-Tricks
display This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. .container { display: flex; /* or inline-flex */ } Note that CSS columns have no effect on a flex container. flex-direction This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional
Gulp for Beginners | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Gulp is a tool that helps you out with several tasks when it comes to web development. It’s often used to do front end tasks like: Spinning up a web server Reloading the browser automatically whenever a file is saved Using preprocessors like Sass or LESS Optimizing assets li
image-rendering | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a probl
A Complete Guide to SVG Fallbacks | CSS-Tricks
If you’re using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback. UGURUS by DigitalOcean for agency owners UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Here at CSS-Tricks, there’s a lot of information telling you how
Star Ratings With Very Little CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Here’s a much newer article: Five Methods for Five-Star Ratings, although it doesn’t cover this exact technique, which is still a legit CSS trick! Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping | CSS-Tricks
HTML5 Drag and Drop Avatar Changer with Resizing and Cropping In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user’s Twitter avatar, Facebook avatar, or Gravatar. That’s a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is go
Stripes in CSS | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I’d document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeat
A Complete Guide to the Table Element | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article, we’re going to look at how to use them, when to use them,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
