Posts tagged css in Jul
Filters: Month: Jul × css × Sorted by date
Button Stealer (via) Really fun Chrome extension by Anatoly Zenkov: it scans every web page you visit for things that look like buttons and stashes a copy of them, then provides a page where you can see all of the buttons you have collected. Here's Anatoly's collection, and here are a few that I've picked up trying it out myself:
The extension source code is on GitHub. It identifies potential buttons by looping through every <a> and <button> element and applying some heuristics like checking the width/height ratio, then clones a subset of the CSS from window.getComputedStyle() and stores that in the style= attribute.
So you think you know box shadows? (via) David Gerrells dives deep into CSS box shadows. How deep? Implementing a full ray tracer with them deep.
Box shadow CSS generator (via) Another example of a tiny personal tool I built using Claude 3.5 Sonnet and artifacts. In this case my prompt was:
CSS for a slight box shadow, build me a tool that helps me twiddle settings and preview them and copy and paste out the CSS
I changed my mind half way through typing the prompt and asked it for a custom tool, and it built me this!
Here's the full transcript - in a follow-up prompt I asked for help deploying it and it rewrote the tool to use <script type="text/babel"> and the babel-standalone library to add React JSX support directly in the browser - a bit of a hefty dependency (387KB compressed / 2.79MB total) but I think acceptable for this kind of one-off tool.
Being able to knock out tiny custom tools like this on a whim is a really interesting new capability. It's also a lot of fun!
viewport-preview (via) I built a tiny tool which lets you preview a URL in a bunch of different common browser viewport widths, using iframes.
Bringing page transitions to the web (via) Jake Archibald’s 13 minute Google I/O talk demonstrating the page transitions API that’s now available in Chrome Canary. This is a fascinating piece of API design—it works by effectively creating a static image screenshot of the before and after states of the transition, then letting you define CSS animations that animate a transition between the two static images. By default the screenshot encompasses the full viewport, but you can instead define multiple elements within the page and apply separate transitions to them. It’s only available for SPAs right now but the final design should include support for multi-page applications as well—which means transitions with no JavaScript needed at all!
Defensive CSS (via) Fantastic new site by Ahmad Shadeed describing in detail CSS patterns which can help build layouts that adapt well to unexpected content—things like overly long titles or strange aspect ratio images, common when you are designing against UGC.
Is there an alternative to media queries for responsive design?
Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries—for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.
[... 102 words]Modernizr (via) Neat idea and an unobtrusive implementation: a JavaScript library that runs feature tests for various HTML5 features (canvas, box shadow, CSS transforms and so on) and adds classes to the HTML body element, allowing you to write CSS selectors that only apply if a feature is present. Detected features are exposed to JavaScript as boolean properties, e.g. Modernizer.multiplebgs.
Conflicting Absolute Positions. Neat technique, although it uses CSS expressions for IE compatibility so it may break down in IE 5 and 6 when JavaScript is disabled.
The CSS Redundancy Checker. A tool for checking your markup for outdated CSS rules that don’t match any of your HTML. We were discussing the need for something similar to this at Torchbox a few weeks ago.
Superb CSS template/tutorial
I’m not sure how I missed this one. Holly Bergevin’s Perched Upon a Lily Pad is a CSS demo that shows off a 3 column layout with a flexible header, full length columns, horizontal navigation bar and complete descriptions of exactly how it all works contained within the page. It’s very educational (I’ve learnt a trick or two just by reading it) and a great example of solid, cross-browser CSS design.
[... 97 words]More CSS tips and tricks
- Lachlan Cannon shows off some neat tricks for styling forms with minimal markup on the freshly redesigned illuminosity. I used his CSS for the forms in the comment authentication prototype and it worked a treat.
- Adam Kalsey struts his stuff with techniques for dotted borders in IE and a nice new rounded box corners method.
- Dave Shea reclaims Times New Roman. I’d been avoiding it for so long I’d completely missed the idea of sprucing it up with CSS. Lovely.
CSS drop shadows
Yet another groovy CSS demo: Drop shadow effects using only two nested divs and an alpha-transparent PNG. They look passable in IE as well. Another gem from Paul Hammond’s link blog. Incidentally, Paul has written up some interesting observations on how a previous item from his link blog spread itself around the ’net after I linked to it a few days ago.
Diagonal shapes with CSS
Information on Border Slants (via Paul Hammond). Border slants are the effect whereby diagonal lines can be created using pure CSS, by taking advantage of the fact that thick borders around a box meet at an angle. This article describes the effect in detail and shows how it can be used to achieve a number of interesting shapes, then goes on to show off with an impressive Valentine’s Day Heart. See also Tantek’s awesome pentagon site map and A Study of Regular Polygons.
CSS Roundup
- SitePoint are running a CSS Design Contest, inspired by the Zen Garden.
- CSS/Exp is Mark Schenk’s collection of CSS experiments which show off some pretty advanced CSS, much of which oonly works in Opera due to its full support of generated content.
- CSS Destroy is a similar collection, with an emphasis on pushing CSS to its limits and beyond.
The CSS bug ring
Killer CSS link: Position Is Everything, part of the CSS bug ring. Big John on CSS-Discuss is probably the single most helpful individual I have ever encountered on a mailing list—he explains the most complicated (and simple) of solutions quickly, comprehensibly and in easy to understand terms. Position Is Everything is his collection of common but complex CSS browser bugs, complete with full explanations and any effective workarounds. The site links in to the CSS bug ring, a small ring of five sites providing more of the same. Truly an indespensable resource for anyone with an interest in CSS.
CSS could be so much more
Stuart Langridge discusses the nature of minimalism and CSS design, following a post by Sarabian. Stuart wonders if the current trend for relatively plain site designs is an interim period while we find our feet in the relatively new medium of CSS. I am sure it is—while I personally love the elegance and simplicity being showcase in many pure CSS sites, it’s not going to help convert die hard table fanatics. The annoying thing is that CSS is capable of so much—the power it gives us over background images should free designers to do things that were difficult or impossible with tables. I’m a rubbish designer, but I’m considering taking on the challenge of “interesting” CSS design in the not too distant future. If I can make things look good, anyone can ;)
More CSS demos
Chris Smith has an interesting set of CSS demos, including some attractive CSS buttons and an excellent example of a more complex layout. There’s a lot of interesting creative work going on with CSS at the moment as more developers start exploring the possibilities it brings—Eric Meyer’s css/edge is just the tip of the iceberg.
Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
Accessible fonts
Mark has out-done himself today with his long awaited coverage of relative font sizes. This is a notoriously tough topic (thanks to a whole bunch of strange CSS bugs and browser differences) but Mark carefully and comprehensively explains the various work arounds and CSS hacks needed to get the right effect with maximum accessibility.