Link Specificity
Last modified Thursday 28 December 2017 21:02:34 UTC Q: I tried to apply CSS to my hyperlinks and the hovering didn't work. How come? Is this another case of browsers being stupid? A: While it's always possible that you have a stupid browser-- that's not really for me to say-- it is more often the case that the styles have simply been written in the wrong order. To ensure that you see your various
CSS Vertical Bar Graphs
It's pretty much all positioning. Actually, once you figure out how you want the graph to look, figuring out how to position things is fairly simple. The (comparatively) hard part is in figuring out how to calculate the heights of the various vertical bars and the horizontal "strata". This could be done in PHP, ASP, or some other server-side processing engine; via JavaScript on the client side; or
Pure CSS Menus
pure CSS menus css/edge complexspiral ...devolved ...distorted Pure CSS popups curvelicious slantastic slanty claus? ragged float boxpunch For some time now, I've had this idea that if one could apply :hover to arbitrary elements, all kinds of possibilities would open up. Sure, we can do nifty stuff with hyperlink hovering, such as popup text and images, but to be able to apply hover styles to any
css/edge
Please note that none of the demonstrations in css/edge are intended to work in Navigator 4.x. I say this not to denigrate that browser, but instead to spare you any frustration you might otherwise feel. This site exists to explore the cutting edge of HTML+CSS design, and Navigator 4.x is, at four years and counting, just too old to keep up with most things that will be done here. Again, there's n
Boxpunch
How does one punch out the corner of an element and put something in the space created? Answer: you don't, at least not structurally. But the appearance can be achieved very easily just by using floated elements and, when necessary, some tiny negative margins. In this example, I've wrapped the "Q" in a div of its own and then floated the div over. Then I give the float some nice padding and margin
Complexspiral Demo
complexspiral demo The page you are viewing right now exists to show off what can be accomplished with pure CSS1 and a little teeny piece of CSS2 (specifically, the hover effects on hyperlinks). Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language. It's all done using straight W3C-rec
CSS Vertical Bar Graphs
Here's a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really. Q1 $18,450.00 $16,500.00 Q2 $34,340.72 $32,340.72 Q3 $43,145.52 $32,225.52 Q4 $18,415.96 $32,425.00
CSS Vertical Bar Graphs
It's pretty much all positioning. Actually, once you figure out how you want the graph to look, figuring out how to position things is fairly simple. The (comparatively) hard part is in figuring out how to calculate the heights of the various vertical bars and the horizontal "strata". This could be done in PHP, ASP, or some other server-side processing engine; via JavaScript on the client side; or
Eric Meyer: CSS
CSS Work Books and Articles by Eric Mostly they’re about CSS, although there are a few exceptions here and there. Books include CSS: The Definitive Guide, Fourth Edition, CSS Pocket Reference: Fifth Edition, and Cascading Style Sheets 2.0 Programmer’s Reference, among others. The articles are mostly from last millennium. CSS4 Color Keyword Distribution A visualization of the 148 color keywords in
Rotational Sliders
In the following cases, the animated transforms slide around a bit with non-centered transform origins. This is because all properties are being transformed, including transform-origin. Over the second-long transition, the transform's origin point transforms from 50% 50% (the default) to the new value. That's why the centered case looks fine: it's transitioning from 50% 50% to 50% 50%. Fixes: eith
Index of /eric/css/tests
Index of /eric/css/tests NameLast modifiedSizeDescription Parent Directory - -base.html 2017-05-09 14:42 269 DOM-display.html 2014-12-21 03:25 2.1K all-unset.html 2020-06-23 14:44 663 almost-standards-qui..>2014-12-21 03:25 1.8K almost-standards-str..>2014-12-21 03:25 1.9K almost-standards.html 2014-12-21 03:25 1.9K alt-style-1.css 2014-12-21 03:25 405 alt-style-2.css 2014-12-21 03:25 697 alt-st
CSS Module Timelines
1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Lists and Indentation
In order to keep from getting too confused, I'm going to start over and present a complete exploration for what's happening with lists in general,and then in IE5/Mac and Netscape 6.1. I think there will be less chance for misunderstanding that way. The question which I was trying to answer was "how are lists styled by browsers?" This helps to answer the corollary question, "why don't IE5/Mac and N
CSS3 test: hyphens
It is most likely necessary to resize the viewport to properly evaluate this test. [#p01] This is a paragraph with no embedded hyphenation hints and no hyphen-related CSS applied. Corporate gibberish follows. Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to ma
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Line-height Testing