[{"data":1,"prerenderedAt":427},["ShallowReactive",2],{"project-5802043":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":26,"sentiment":27,"stance_mix":28,"scored_comments":32,"aspects":33,"strip":45,"post_text":47,"what":48,"said":64,"maker_in_thread":179,"shape":186,"grid":190,"attempts":389,"same_week":390,"maker_shows":40,"maker_hidden":420,"reader_version":421,"card":422},"5802043","Logos in Pure CSS","title","Show HN: Logos in Pure CSS","http:\u002F\u002Fwww.bchanx.com\u002Flogos-in-pure-css-demo","bchanx.com","bchanx",1370046607,2013,283,74,39,1739,3,"legend","creative","css art","web_app",[23,24,20,25],"css logos","pure css","css shapes","debated",0.23,{"positive":29,"neutral":30,"mixed":17,"critical":31},22,6,15,46,{"idea":34,"execution":37,"design":39,"performance":42,"pricing":44},{"positive":35,"critical":36},8,10,{"positive":35,"critical":38},4,{"positive":40,"critical":41},2,0,{"positive":43,"critical":43},1,{"positive":41,"critical":41},[46,17,46,46,46,17,41,41,17,17,17,43,41,41,43,43,46,17,46,17,41,17,43,46,17,46,43,43,46,46,43,46,43,46,46,46,46,46,41,41],5,null,{"problem":47,"audience":47,"pricing":47,"motivation":49,"time_to_build":47,"stack":56,"openness":63,"stage":63,"team_size":63},{"value":50,"source":51,"evidence":52},"Fun experiment to see what CSS can do","maker",[53],{"id":54,"by":10,"text":55},"5802226","It's a problem when I lack the proficiency to even create gradients in photoshop! However, I can create gradients all day with CSS. Don't read too far into this comment though,…",[57],{"value":58,"source":51,"evidence":59},"CSS",[60],{"id":61,"by":10,"text":62},"5802202","Thank you for the kind words! For each one I started off pinpointing the toughest areas\u002Fcurves to create, and then worked off that. There's a lot of thought behind which layers…","unknown",{"praise":65,"objections":90,"requests":136,"questions":152,"alternatives":158},[66,86],{"value":67,"source":68,"evidence":69},"Clever and impressive use of CSS","commenter",[70,74,78,82],{"id":71,"by":72,"text":73},"5802082","DigitalSea","Oh my God, this is amazing. I envy people like you Brian, this is insanely clever. I wish I were as masterful with CSS to even think of being able to do what you've done here.…",{"id":75,"by":76,"text":77},"5802086","bbx","Remaking images in CSS only is not a new experiment (and is often frowned upon) but this implementation adds 2 interesting features: hovering an element reveals all the…",{"id":79,"by":80,"text":81},"5802320","taternuts","As someone who is just getting into front-end development and doesn't have much css mastery, seeing how you arranged the shapes\u002Felements to create the final product was very cool…",{"id":83,"by":84,"text":85},"5802131","pacomerh","This is great. Mostly the creativity to come up with those shapes. sometimes limitations can give you a different perspective to designing.",{"value":87,"source":68,"evidence":88},"Hover reveals construction of each logo",[89],{"id":75,"by":76,"text":77},[91,106,121],{"value":92,"source":68,"evidence":93},"Impractical; SVG is better for logos",[94,98,102],{"id":95,"by":96,"text":97},"5802091","TazeTSchnitzel","What's wrong with SVG? Use the right tool for the job.",{"id":99,"by":100,"text":101},"5803149","grey-area","This looks wonderful and is a lot of fun. It's not very useful in the real world due to the painstaking method for creating images, and something like SVG is far more appropriate…",{"id":103,"by":104,"text":105},"5802553","gridmaths","SVG seems more 'natural' way of doing logos ? [ Also more amenable to editing tools ]",{"value":107,"source":68,"evidence":108},"Breaks in IE8 and on mobile, pixelation when zoomed",[109,113,117],{"id":110,"by":111,"text":112},"5802151","timdorr","IE \u003C= 8 and Android \u003C= 2.3 don't support SVG without a polyfill[1]. For much of the web, IE8 is still the lowest acceptable version of IE and Android \u003C= 2.3 is still about 40% of…",{"id":114,"by":115,"text":116},"5802174","nwh","They look fairly useless in IE8 — http:\u002F\u002Fi.imgur.com\u002FIjWkRvp.png",{"id":118,"by":119,"text":120},"5802477","deckar01","Breaks on mobile devices. When I zoom in I see pixelation... Images?",{"value":122,"source":68,"evidence":123},"Thread is negative or the post is overrated on the front page",[124,128,132],{"id":125,"by":126,"text":127},"5802223","sergiotapia","Some of the comments on here are pure trash. I wish a mod would delete them or something. Fantastic job on the logos! It's insane how powerful CSS has gotten, can you imagine…",{"id":129,"by":130,"text":131},"5802342","rickdale","I think a lot of people here wish this type of post would only have made the top of the front page 10 years ago (knowing hn was starting in 07), nowadays a post about css images…",{"id":133,"by":134,"text":135},"5802420","goostavos","Nonsense. That is pointless dismissal of someone's efforts. I personally think this is awesome. It's using css in a non-traditional way, and one that surely took a lot of…",[137,145],{"value":138,"source":68,"evidence":139},"Hand-crafted or process details of how it was built",[140,141],{"id":71,"by":72,"text":73},{"id":142,"by":143,"text":144},"5802437","DanielRibeiro","Also, unlike the Mona Lisa in css[1], it seems to be hand-crafted. [1] http:\u002F\u002Fcodepen.io\u002Fjaysalvat\u002Fpen\u002FHaqBf",{"value":146,"source":68,"evidence":147},"Support for more logos such as Twilio",[148],{"id":149,"by":150,"text":151},"5802986","caseysoftware","Awesome work. My only disappointment was not seeing the Twilio logo in there.. but realized it would be too easy to be challenging. :)",[153],{"value":154,"source":68,"evidence":155},"Was it hand-crafted or trial and error",[156,157],{"id":71,"by":72,"text":73},{"id":61,"by":10,"text":62},[159,164,172],{"value":160,"source":68,"evidence":161},"SVG",[162,163],{"id":95,"by":96,"text":97},{"id":99,"by":100,"text":101},{"value":165,"source":68,"evidence":166},"Jay Salvat's CSS Mona Lisa",[167,168],{"id":142,"by":143,"text":144},{"id":169,"by":170,"text":171},"5804010","geekam","It is not. Says right in the JS section \u002F* Mona Lisa with pure CSS Pointless but fun! ``` Of course, it's not handcrafted. Here is my code: https:\u002F\u002Fgithub.com\u002Fjaysalvat\u002Fimage2css…",{"value":173,"source":68,"evidence":174},"Font Awesome",[175],{"id":176,"by":177,"text":178},"5802132","coherentpony","http:\u002F\u002Ffortawesome.github.io\u002FFont-Awesome\u002F",{"comments":17,"answered":40,"key":180},[181,182,185],{"id":61,"text":62},{"id":183,"text":184},"5802215","Hah, that looks incredibly sad. They look a lot better on IE9 though! (besides IE9 not having radial gradients for the Apple logo)",{"id":54,"text":55},{"commenters":187,"max_depth":46,"maker_replies":17,"first_comment_mins":188,"lifespan_hours":189},57,13,36,[191,193,195,197,200,202,204,207,209,213,215,217,219,222,224,227,230,233,235,238,241,242,245,247,249,252,254,257,260,261,264,265,268,271,274,277,279,283,285,288,290,293,295,297,299,301,304,306,310,313,317,318,320,323,325,329,332,335,339,342,345,348,352,353,357,359,363,367,371,374,379,381,384,387],[75,41,46,192,76,41],"project\u002Fpositive\u002Fidea",[142,41,17,194,143,41],"project\u002Fneutral\u002Fexecution",[169,41,41,196,170,41],"commenter\u002Fneutral\u002Fnone",[198,41,41,196,199,41],"5804318","nathannecro",[71,43,46,201,72,41],"maker\u002Fpositive\u002Fnone",[61,43,41,203,10,43],"maker\u002Fneutral\u002Fexecution",[205,43,46,201,206,41],"5802232","fady",[149,43,46,208,150,41],"project\u002Fpositive\u002Fdesign",[210,43,41,211,212,41],"5806492","other\u002Fneutral\u002Fnone","X4",[125,40,46,214,126,41],"project\u002Fpositive\u002Fexecution",[129,40,43,216,130,41],"project\u002Fcritical\u002Fidea",[133,40,41,218,134,41],"commenter\u002Fpositive\u002Fidea",[220,40,41,196,221,41],"5802563","PommeDeTerre",[223,40,41,196,130,41],"5802805",[225,40,43,216,226,41],"5802489","LowKarmaAccount",[228,40,46,192,229,41],"5802853","azochz",[231,40,41,196,232,41],"5803437","bvaldivielso",[99,17,17,234,100,41],"project\u002Fmixed\u002Fidea",[236,17,41,196,237,41],"5803753","lttlrck",[239,17,17,234,240,41],"5808228","tracker1",[95,38,43,216,96,41],[243,38,41,211,244,41],"5802107","krapp",[246,38,41,211,104,41],"5802572",[248,38,41,211,96,41],"5803535",[250,38,41,211,251,41],"5802140","MatthewPhillips",[110,38,43,253,111,41],"project\u002Fcritical\u002Fexecution",[255,38,41,211,256,41],"5802163","ianstormtaylor",[258,38,43,253,259,41],"5802167","TomGullen",[114,38,43,253,115,41],[262,38,46,214,263,41],"5802212","icambron",[183,38,41,203,10,43],[266,38,46,208,267,41],"5803032","johnsoft",[269,38,43,216,270,41],"5802168","supercoder",[272,38,41,196,273,41],"5802273","smegel",[275,38,46,192,276,41],"5802592","PavlovsCat",[54,38,41,278,10,43],"maker\u002Fneutral\u002Fidea",[280,38,17,281,282,41],"5804499","maker\u002Fneutral\u002Fdesign","hash9",[284,38,41,196,72,41],"5802433",[286,38,43,216,287,41],"5803132","pete_b",[289,38,46,192,72,41],"5803939",[291,38,43,216,292,41],"5805663","meerita",[294,38,43,216,287,41],"5805763",[296,38,17,234,96,41],"5803530",[298,38,46,214,72,41],"5803889",[300,38,43,216,292,41],"5805655",[302,38,46,192,303,41],"5803224","libria",[305,38,41,196,237,41],"5803757",[307,46,46,308,309,41],"5803040","project\u002Fpositive\u002Fperformance","hawkharris",[311,46,43,216,312,41],"5803093","anonymouz",[314,46,17,315,316,41],"5804349","project\u002Fneutral\u002Fperformance","octatone2",[103,30,43,216,104,41],[319,30,46,192,104,41],"5802562",[321,30,17,322,104,41],"5802587","project\u002Fneutral\u002Fdesign",[79,324,46,214,80,41],7,[326,35,17,327,328,41],"5802103","project\u002Fneutral\u002Fpricing","hayksaakian",[330,35,17,327,331,41],"5802142","ztratar",[333,35,43,253,334,41],"5802800","slacka",[336,337,46,201,338,41],"5802084",9,"Sealy",[340,36,41,211,341,41],"5802758","kumar_navneet",[343,36,41,211,344,41],"5802974","sharkweek",[118,346,43,347,119,41],11,"project\u002Fcritical\u002Fperformance",[349,350,46,214,351,41],"5803366",12,"stdclass",[83,188,46,192,84,41],[354,355,41,211,356,41],"5802754",14,"adregan",[358,355,41,211,344,41],"5802977",[360,31,46,361,362,41],"5802239","maker\u002Fpositive\u002Fexecution","chasb",[364,365,46,192,366,41],"5804194",16,"svl",[368,369,46,214,370,41],"5803200",17,"coderhs",[372,373,46,361,331,41],"5802145",18,[375,376,41,377,378,41],"5803617",19,"commenter\u002Fcritical\u002Fnone","_sabe_",[176,380,41,211,177,41],20,[382,380,41,377,383,41],"5802162","jlogsdon",[385,380,41,211,386,41],"5802469","IanChiles",[388,380,41,211,237,41],"5803759",[],[391,395,400,405,410,415],{"id":392,"name":393,"points":394,"category":19},"5794083","Unsplash",357,{"id":396,"name":397,"points":398,"category":399},"5826530","Yoleo",269,"productivity",{"id":401,"name":402,"points":403,"category":404},"5799272","Codementor",132,"learning_science",{"id":406,"name":407,"points":408,"category":409},"5821421","Infraprint",118,"web_saas",{"id":411,"name":412,"points":413,"category":414},"5813542","Reveal",113,"dev_tools",{"id":416,"name":417,"points":418,"category":419},"5795778","The Choice",95,"games",false,"v2",{"id":423,"name":5,"line":5,"ai":420,"cat":19,"year":12,"points":13,"comments":14,"rec":26,"s":27,"top":17,"kw":424,"maker":10,"domain":9,"tier":18,"attempts":41,"strip":425,"url":8,"mix":426,"praise":67,"objection":92,"sub":20},5802043,[23,24,20,25],"5355530033310011535303153511551515555500",[29,30,17,31],1794036507296]