Create a CSS only version of BRL-CAD Logo #2BRL-CAD
Status: ClosedTime to complete: 72 hrs Mentors: SeanTags:

BRL-CAD's logo is very simple and can be easily created with CSS3, such a logo would be a great asset to the new design of BRL-CAD's website.

This task involves at minimum creating a bunch of CSS styles (preferrably a SASS mixin) which result into BRL-CAD's logo. You can take inspiration from

http://css-tricks.com/examples/ShapesOfCSS/

You can check the logo at

http://cpp-tricks.com/brl-cad/

Uploaded Work
File name/URLFile sizeDate submitted
only_logo.zip28.5 KBNovember 19 2013 19:04 UTC
gradient.zip28.6 KBNovember 19 2013 19:27 UTC
difference.xcf77.7 KBNovember 20 2013 06:42 UTC
cross-browser.zip2.5 KBNovember 20 2013 07:16 UTC
css-fixed.zip2.6 KBNovember 20 2013 07:36 UTC
auto-size.zip2.6 KBNovember 20 2013 07:53 UTC
text.zip34.6 KBNovember 20 2013 09:02 UTC
optimized.zip34.6 KBNovember 20 2013 09:06 UTC
Comments
Divya Ranjanon November 18 2013 17:46 UTCTask Claimed

I would like to work on this task.

Mandeep Kaur on November 18 2013 17:50 UTCTask Assigned

This task has been assigned to Divya Ranjan. You have 72 hours to complete this task, good luck!

Divya Ranjanon November 18 2013 17:53 UTCClaim Removed

The claim on this task has been removed, someone else can claim it now.

Yatharth Agarwalon November 18 2013 19:21 UTCTask Claimed

I would like to work on this task.

Sean on November 18 2013 19:25 UTCTask Assigned

This task has been assigned to Yatharth Agarwal. You have 72 hours to complete this task, good luck!

Sean on November 18 2013 19:48 UTChopping around

Yatharth, hopping around to a lot of different tasks frequently usually makes it much more difficult to complete any task.  I recommend committing to a task, any task, and working on it for at least a day before moving on to something else.  If you join our IRC channel or mailing list, you can get interactive help and answers to questions more easily.  Cheers!

Yatharth Agarwalon November 19 2013 06:25 UTC2-D logo or 3-D logo?

One, sorry for the hopping around. I was extremely nervous, but I'm going to see tasks through now.


Second, I should just model the 2-D logo, right? Not the 3-D one? And should the text be there? If so, what font should it be in? I didn't find any page on BRL-CAD giving the logo specs. I'll extract the dimensions and colors, but I'd like to know this info also. 


10x for the support, and sorry again.

Gauravjeet Singh on November 19 2013 15:04 UTC2-D logo

2-d logo would be good. 


Designing just the logo would be statisfactory, but adding text along with logo would prove better. Refer the following link for logo reference


http://brlcad.org/images/angelov_256.png


And for the dimesions and fonts, it's completely your own decision.


As the logo would be in css we can easily increase the dimesions or change fonts if there is any need/demand.

Yatharth Agarwalon November 19 2013 19:04 UTCReady for review

The work on this task is ready to be reviewed.

Yatharth Agarwalon November 19 2013 19:07 UTCReview Notes

I have created a crude approximation (necessary sacrifice for lack of SVG due to CSS limitations) in SCSS (recommended in the description) of the 2-D BRL-CAD logo without text.


I am working on adding the text. Pleae tell me if the logo looks too off.


Is it OK? 10x :)

Sean on November 20 2013 06:31 UTCTask Needs More Work

One of the mentors has sent this task back for more work. Talk to the mentor(s) assigned to this task to satisfy the requirements needed to complete this task, submit your work again and mark the task as complete once you re-submit your work.

Sean on November 20 2013 06:32 UTClooking fantastic

Yatharth, that's looking fantastic, but there's only some slight issues with how you used "background" shapes.  Your browser probably defaults to gray, so mine (which is defaulting to white) shows something ... interesting.  See if you can fix it:


http://brlcad.org/tmp/csslogo.png


 

Yatharth Agarwalon November 20 2013 07:16 UTCReady for review

The work on this task is ready to be reviewed.

Andrei on November 20 2013 07:27 UTC

I tried to see brlcad.html in both Chromium and Firefox and I got virtually no display. Do you know what's causing the issue? Can you fix it?


 


Cheers,


Andrei

Andrei on November 20 2013 07:27 UTCTask Needs More Work

One of the mentors has sent this task back for more work. Talk to the mentor(s) assigned to this task to satisfy the requirements needed to complete this task, submit your work again and mark the task as complete once you re-submit your work.

Yatharth Agarwalon November 20 2013 07:36 UTCReady for review

The work on this task is ready to be reviewed.

Yatharth Agarwalon November 20 2013 07:37 UTCFixed bug

The bug was caused by a stupid typo while declaring the external CSS file. Chrome glazed over it, but the other browsers barfed. Now it's fixed.


The code should work in Chrome, Chromium, Firefox 4 and IE 9 (IE won't have the nice linear gradient, though).

Yatharth Agarwalon November 20 2013 09:07 UTCNotes

I added the text in a free font that closely matches the one used in the original logo. I also refactored my code and tested in multiple browsers.


A comparison shot is uploaded 'difference.xcf'.

Sean on November 21 2013 04:28 UTCgood for the task

Yatharth,


Nice work.  This is good enough to close the task, but more work will be needed to actually use this.  Here are a few issues identified:


The connections between the circles do not line up exactly causing little discontinuities where it should be a smooth transition.  Also, you "fixed" the gray circles I mentioned earlier by making the background gray.  That's ignoring the issue.  We want something that can work with any color background without having to be manually specified (i.e., transparent).


If you're interested in taking things further, please let me know and we can work up another task to address those remaining issues.


 

Sean on November 21 2013 04:28 UTCTask Closed

Congratulations, this task has been completed successfully.

Yatharth Agarwalon November 21 2013 05:37 UTCFollow-up Task

I would be interested, but I don't think I can solve these issues:-



  • you mentioned there are still small discontinuities. Do you really think that the outer edge of the gears can accurately enough be modelled simply by placing 2 equal-sized circles next to each other?

  • you also mentioned that you want to have a transparent background. I do not believe that is possible with my current approach as it oncolves cutting off sections of circles with another solidfilled circles. Having the background as any solid color (or indeed, a gradient also) is no problem; but for transparency, are there CSS tricks that will let me show what's beneath 2 or 3 layers below?


What do you think? Could I solve these problems with the approaches mentioned? If not, what could I use?