Menu
Logged-In As
ACCOUNTNot Logged In
Create a CSS only version of BRL-CAD Logo #2BRL-CAD
Status: ClosedTime to complete:
72 hrs
Mentors: Sean
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/URL | File size | Date submitted | |
---|---|---|---|
only_logo.zip | 28.5 KB | November 19 2013 19:04 UTC | |
gradient.zip | 28.6 KB | November 19 2013 19:27 UTC | |
difference.xcf | 77.7 KB | November 20 2013 06:42 UTC | |
cross-browser.zip | 2.5 KB | November 20 2013 07:16 UTC | |
css-fixed.zip | 2.6 KB | November 20 2013 07:36 UTC | |
auto-size.zip | 2.6 KB | November 20 2013 07:53 UTC | |
text.zip | 34.6 KB | November 20 2013 09:02 UTC | |
optimized.zip | 34.6 KB | November 20 2013 09:06 UTC |
I would like to work on this task.
This task has been assigned to Divya Ranjan. You have 72 hours to complete this task, good luck!
The claim on this task has been removed, someone else can claim it now.
I would like to work on this task.
This task has been assigned to Yatharth Agarwal. You have 72 hours to complete this task, good luck!
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!
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.
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.
The work on this task is ready to be reviewed.
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 :)
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, 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
The work on this task is ready to be reviewed.
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
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.
The work on this task is ready to be reviewed.
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).
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'.
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.
Congratulations, this task has been completed successfully.
I would be interested, but I don't think I can solve these issues:-
What do you think? Could I solve these problems with the approaches mentioned? If not, what could I use?