Menu
Logged-In As
ACCOUNTNot Logged In
Create a CSS only version of BRL-CAD LogoBRL-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 | |
---|---|---|---|
brlcad-css3-logo.html | 1.2 KB | November 18 2013 18:39 UTC | |
brlcad-css3-logo.tar.gz | 625 bytes | November 19 2013 14:43 UTC | |
Screenshot from 2013-11-19 20:11:51.png | 6.7 KB | November 19 2013 14:45 UTC | |
brlcad-css3-logo.tar.gz | 643 bytes | November 19 2013 15:26 UTC | |
http://martinhermida.es/code-in-2013/2_BRL... | n/a | November 20 2013 17:08 UTC | |
BRL-CAD-css-version.zip | 953 bytes | November 20 2013 17:09 UTC | |
BRL-CAD-css-version_V2.zip | 868 bytes | November 21 2013 18:23 UTC | |
BRL-CAD-css-version_V2.1.zip | 3.7 KB | November 22 2013 15:01 UTC |
I would like to work on this task.
This task has been assigned to binaryking. You have 72 hours to complete this task, good luck!
The work on this task is ready to be reviewed.
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?
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.
Also needs to be bigger.
Can you please give the exact dimensions for the logo in pixels?
Thank You
The work on this task is ready to be reviewed.
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.
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?
I have used 600px x 600px as the size.
The claim on this task has been removed, someone else can claim it now.
So close, but giving up?
I would like to work on this task.
This task has been assigned to Martín Hermida. You have 72 hours to complete this task, good luck!
The work on this task is ready to be reviewed.
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.
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, 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
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
Would be right to scale it using "transform:scale(1.5);"? Obviously '1.5' is just an example
The work on this task is ready to be reviewed.
I see this in Safari on Mac OS X:
http://brlcad.org/tmp/csslogo3.png
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.
That's because I forgot the "-webkit" prefix for rotatating. I'll fix it when I arrive home as soon as I can
The work on this task is ready to be reviewed.
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.
Congratulations, this task has been completed successfully.
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.