Chrome logos in CSS • Hacker News Board

Re: Chrome logos in CSS

#11

Post by livingparadox » Mon, Nov 04, 2013, 9:15 PM UTC

Why no love for ::before or ::after? Would certainly clean up the html to a more practical level.

Re: Chrome logos in CSS

#12

Post by MrWhargarbl » Mon, Nov 04, 2013, 9:17 PM UTC

_sabe_ wrote: post #4

cmac2992 wrote: post #2

This is awesome. CSS is becoming very powerful. I was proud of myself when I made a simple css triangle

How do you make a triangle in pure CSS?

http://codepen.io/anon/pen/KlzHn

Re: Chrome logos in CSS

#13

Post by kjannis » Mon, Nov 04, 2013, 9:18 PM UTC

livingparadox wrote: post #11

Why no love for ::before or ::after? Would certainly clean up the html to a more practical level.

Poor support for rotate on before and after :) this was my initial idea, but it didn't work as expected.

Re: Chrome logos in CSS

#14

Post by kjannis » Mon, Nov 04, 2013, 9:19 PM UTC

MrWhargarbl wrote: post #3

cmac2992 wrote: post #2

This is awesome. CSS is becoming very powerful. I was proud of myself when I made a simple css triangle

I fail to see the awesome-ness. It's a proof of concept about a concept that just doesn't make sense. There are significantly better ways of presenting color/logo/icon/anything other than CSS.

It has no practical use, nor is it meant to be. Just a showcase.

Re: Chrome logos in CSS

#15

Post by _sabe_ » Mon, Nov 04, 2013, 9:24 PM UTC

peterjmag wrote: post #7

_sabe_ wrote: post #4

Earlier quoted context omitted.

How do you make a triangle in pure CSS?

http://css-tricks.com/snippets/css/css-triangle/ And this awesome animation explains how it works: http://codepen.io/chriscoyier/details/lotjh

This is not pure CSS. This requires Markup, and Markup is something that Marks Up Text to give it semantic meaning.

Re: Chrome logos in CSS

#16

Post by hablahaha » Mon, Nov 04, 2013, 9:27 PM UTC

peterjmag wrote: post #7

_sabe_ wrote: post #4

Earlier quoted context omitted.

How do you make a triangle in pure CSS?

http://css-tricks.com/snippets/css/css-triangle/ And this awesome animation explains how it works: http://codepen.io/chriscoyier/details/lotjh

I mean, it could be no-classes-pure css if we just had divs with no classes and then used n-th child selectors, but then what is pure css?

Re: Chrome logos in CSS

#17

Post by recuter » Mon, Nov 04, 2013, 9:29 PM UTC

_sabe_ wrote: post #5

This didn't work in my browser. FF 24 on Fedora.

Weird! It works just fine on my FF 24 / Arch. How can that be?

Re: Chrome logos in CSS

#18

Post by earlz » Mon, Nov 04, 2013, 9:39 PM UTC

I'm still waiting for someone to design a vector drawing program that can export to CSS. (or something that can take a vector format like SVG and turn it to CSS)

Re: Chrome logos in CSS

#19

Post by Mikeb85 » Mon, Nov 04, 2013, 9:45 PM UTC

_sabe_ wrote: post #5

This didn't work in my browser. FF 24 on Fedora.

Strange, FF24 on openSUSE also works.

Re: Chrome logos in CSS

#20

Post by richbradshaw » Mon, Nov 04, 2013, 9:59 PM UTC

_sabe_ wrote: post #15

peterjmag wrote: post #7

Earlier quoted context omitted.

http://css-tricks.com/snippets/css/css-triangle/ And this awesome animation explains how it works: http://codepen.io/chriscoyier/details/lotjh

This is not pure CSS. This requires Markup, and Markup is something that Marks Up Text to give it semantic meaning.

Typically you use :before or :after in CSS to add the required content.