Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

Post reply on HN
Print view View original

101–107 of 107 posts

Re: Animation to Explain CSS Triangles

#101

Post by chavesn »

jeremiep wrote: post #71
chavesn wrote: post #47

Earlier quoted context omitted.

Well, then the text isn't really "in" the triangle, is it? Leading you to rely on further hacks to make sure the text stays in the triangle with a nice padding, correct wrapping, and all the other features you get when text is really inside a container.

Could always do Hello where the div has position: relative and the span has position: absolute. Should work everywhere too.

Yes, that's how you'd get a box to appear over the triangle, but it doesn't really solve any of the containment issues.

Example: http://jsfiddle.net/9pMJS/

Re: Animation to Explain CSS Triangles

#102

Post by michaelbuddy »

talmand wrote: post #96
michaelbuddy wrote: post #92

Earlier quoted context omitted.

Is this a hack? Yes. Hacks are replaced by standardized and better approaches (especially when better approaches are available now. "Fixing" this means removing it in code in place of a more logical approach. Where a triangle is really a triangle, not a rectangle with no dimension. Part of web work is knowing immediately what you're dealing with. dimensionless rectangles that show up as triangles is a layer of comple…

Well crap, I guess I just don't get it. I suppose I'll understand once I realize what you mean by "fixing" is actually "replacing". Specifically with your preferred method of accomplishing the same thing. You aren't one of those programmers that can't help themselves in "fixing" everybody else's code that comes across your desk because they didn't do it the way you would, regardless of whether it works or not? I mean…

"fixing everybody else's code that comes across your desk because they didn't do it the way you would"

that's the real world of design and collaborative environments. Branding, code quality, standards they all start with setting a direction that makes sense in order to improve efficiency across multiple disciplines and experience levels.

Hackey fixes have always been available. Instead of using h3 tags you can use b tags and scale them up to a particular font size.

Even when something works, you have collaboration and reputation to operate by. Case in point: Somebody actually had to create an animation to explain what the hell is going on with this hack to people who already know html and css, whereas with a unicode character or SVG you wouldn't have to have meta instructions. You could say good code or technique often requires no explanation.

that's what I'm trying to get it.

Re: Animation to Explain CSS Triangles

#103

Post by cheald »

psychometry wrote: post #84
kalleboo wrote: post #68

Earlier quoted context omitted.

Positioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.

I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.

What happens when a user agent overrides your preferred font size?

Re: Animation to Explain CSS Triangles

#104

Post by SiVal »

cheald wrote: post #103
psychometry wrote: post #84

Earlier quoted context omitted.

I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.

What happens when a user agent overrides your preferred font size?

Serious problem. I usually have my page magnification jacked up to reduce eye strain, and it's amazing how many things go wrong on the pages I browse. Don't use a clever hack without testing how it looks after a few cmd-+ (ctrl-+) resizings.

Re: Animation to Explain CSS Triangles

#105

Post by kamakazizuru »

alanctgardner2 wrote: post #87
kamakazizuru wrote: post #85

I find it depressing how most of CSS related drawing is basically all just hacks. I saw the same a few weeks ago when someone posted a bunch of different CSS shapes - the code behind it was the most unintuitive stuff. It's like saying - here's a bicycle - now lets get another one and weld it together in some ugly way and make a car out of it. I dont understand why CSS / Browsers have not come far enough to natively s…

There shouldn't be any CSS-related drawing. Full-stop. Your analogy is accidentally very accurate, because it's like looking at a car, then a pile of bicycles, and saying "how can I get from A to B". The sane person would go to an auto parts store, get the appropriate parts and build a car as we understand it. The madman would weld two bicycles together, and then complain that it wasn't intuitive to do - bicycles are…

1) I never mentioned a new spec. 2) " bicycles aren't supposed to be used for creating cars. " - exactly my point.

I think we said the same stuff - came at it from slightly different angles. I´m not advocating yet another standard. Im saying - lets make it easy enough to use the appropriate (and already existing) standards to draw - rather than be at the mercy of a seemingly prehistoric styling system. My point with google et al was - get together and agree to a way to do simple things like images - the same way across browsers.

Does that help clarify?

Re: Animation to Explain CSS Triangles

#106

Post by gcb0 »

phaer wrote: post #60
gcb0 wrote: post #38

Earlier quoted context omitted.

Touche. The sooner people realize the web is a presentation thing the sooner we can get our sanity back. sadly, we will see some dozen iterations of 'flash' until that day finally comes. and html5 js shenanigans are only the third...

...and all those impaired people and people with old and slow devices are finally locked out of our new shiny "sane" web. The web isn't just one visual presentation layer, its a multitude of presentation layers for all kind of people and that demands some compromise.

riiight. because the current solution of listening to a webapp via jaws is perfect. They get all the content, which only appears in the end of animations during that nifty scrolling effect.

Everyone that needs accessibility is already screwed with regular web presentation hacks. And having to add more presentation hacks to get the presentation right only screw them more.

Accepting the web is a presentation, the effort a few sites do to add accessibility to the hacks could be spent adding micro formats to the page content or something, benefiting blinds and people just wanting a easier way to get the content.

There are several solutions to problems. And the current state of accessibility on the web is not a prime example of a good one.

Re: Animation to Explain CSS Triangles

#107

Post by psychometry »

cheald wrote: post #103
psychometry wrote: post #84

Earlier quoted context omitted.

I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.

What happens when a user agent overrides your preferred font size?

Just don't use font-size and line-heights that references pixels for the containing your arrow and you should be fine. It might not be perfectly aligned, but it won't break.
Post reply on HN