Create a CSS only version of BRL-CAD LogoBRL-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
brlcad-css3-logo.html1.2 KBNovember 18 2013 18:39 UTC
brlcad-css3-logo.tar.gz625 bytesNovember 19 2013 14:43 UTC
Screenshot from 2013-11-19 20:11:51.png6.7 KBNovember 19 2013 14:45 UTC
brlcad-css3-logo.tar.gz643 bytesNovember 19 2013 15:26 UTC
http://martinhermida.es/code-in-2013/2_BRL...n/aNovember 20 2013 17:08 UTC
BRL-CAD-css-version.zip953 bytesNovember 20 2013 17:09 UTC
BRL-CAD-css-version_V2.zip868 bytesNovember 21 2013 18:23 UTC
BRL-CAD-css-version_V2.1.zip3.7 KBNovember 22 2013 15:01 UTC
Comments
binarykingon November 18 2013 17:12 UTCTask Claimed

I would like to work on this task.

Sean on November 18 2013 17:17 UTCTask Assigned

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

binarykingon November 18 2013 18:39 UTCReady for review

The work on this task is ready to be reviewed.

Daniel Rossberg on November 18 2013 23:39 UTCSome issues

Your file looks ill formated and contains java script.  This could be caused by the Melange website.  Maybe you should upload an zip file to make sure iw won't be changed by the website.


Furthermore: Would it possible to make the sides of the rectangles round?

Daniel Rossberg on November 18 2013 23:39 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 19 2013 03:00 UTCbigger

Also needs to be bigger.

binarykingon November 19 2013 09:16 UTCRe: bigger

Can you please give the exact dimensions for the logo in pixels?


Thank You

binarykingon November 19 2013 14:43 UTCReady for review

The work on this task is ready to be reviewed.

Sean on November 19 2013 14:45 UTCScalable

As CSS, the size shouldn't be fixed.  It should be scalable.  Maybe size it to 50% or 100% of the window size.  Right now, it sort of scales but is about 5%.  Too small to evaluate your attention to the detail necessary.

binarykingon November 19 2013 15:07 UTCRe: Scalable

Making it scalabe, with so manu CSS shapes, will not work out well on all resolutions. Can I make it to a fixed size. 500px x 500px maybe?

binarykingon November 19 2013 15:56 UTCRe: Re: Scalable

I have used 600px x 600px as the size.

binarykingon November 20 2013 01:15 UTCClaim Removed

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

Sean on November 20 2013 01:34 UTCso close

So close, but giving up?

Martín Hermidaon November 20 2013 14:05 UTCTask Claimed

I would like to work on this task.

Mandeep Kaur on November 20 2013 14:55 UTCTask Assigned

This task has been assigned to Martín Hermida. You have 72 hours to complete this task, good luck!

Martín Hermidaon November 20 2013 17:09 UTCReady for review

The work on this task is ready to be reviewed.

Daniel Rossberg on November 21 2013 00:59 UTCScalable?

Same as said before: It should be scalable.  Look at the magnifying glass example at the css-tricks website to get an idea on how this could be done.

Daniel Rossberg on November 21 2013 01:00 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 21 2013 05:24 UTCerrors?

Martín, in addition to the scaling issues, I see several errors in the design that should be corrected in the CSS.  The "interconnecting" portions of the link should form a smooth transition, not have a "dent" where it mates up with the circular parts.


Also, can you eliminate the gray (transparent background so we can put it on any page?  I'm also seeing some errors in the gray. This is what I see: http://brlcad.org/tmp/csslogo2.png

Martín Hermidaon November 21 2013 14:21 UTCSVG?

Could I use some SVG just to draw the interconnecting portions directly written in the HTML? I mean: the SVG code, not an image itself

Martín Hermidaon November 21 2013 14:29 UTCScale doubt

Would be right to scale it using "transform:scale(1.5);"? Obviously '1.5' is just an example

Martín Hermidaon November 21 2013 18:23 UTCReady for review

The work on this task is ready to be reviewed.

Sean on November 22 2013 04:35 UTCportability?

I see this in Safari on Mac OS X:


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


 

Sean on November 22 2013 04:36 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.

Martín Hermidaon November 22 2013 07:56 UTCRe: portability?

That's because I forgot the "-webkit" prefix for rotatating. I'll fix it when I arrive home as soon as I can

Martín Hermidaon November 22 2013 15:01 UTCReady for review

The work on this task is ready to be reviewed.

Martín Hermidaon November 22 2013 16:09 UTCIf it's wrong

If the task isn't right yet, I ask you for extending the time, please. Otherwise I won't be able to finish it.


By the way, the logo can be scalable by changing the "font-size" of the container div, as shown in the example.


 

Sean on November 22 2013 17:04 UTCTask Closed

Congratulations, this task has been completed successfully.

Sean on November 22 2013 17:06 UTCpretty fantastic

That's pretty fantastic work Martín!  Looks good now.  The exact diameters look like they may be slightly off our logo, but it's obviously pretty darn close.  Nicely done.


You'll be credited in our authorship documentation with this contribution and will likely be showcased in a future announcement sent to our brlcad-news mailing list.  You're encouraged to join to keep in touch and see your work put to use over time.