PLEASE LOG IN OR REGISTER TO BE ABLE TO SEE THE PICTURES AND ATTACHED FILES!
|
| Author |
Message |
Sat
Star Angel
Warnings:
Posts: 7539
|
 |
Quote |
Wow, great work, Lunatsuki. That ended up better than I thought 
_________________
Some people say, the universe is a Star Ocean!
Want to donate to keep the site up? PM me for possible donation ways!
We now also accept Bitcoin.
Got a suggestion on how we can improve LAH? Post it here or vote for other people's suggestions! |
|
|
| Sat Mar 09, 2013 1:27 am |
Profile PM WWW Skype
|
 |
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
Yay awesome work, thanks!
Thinking about the bubble now though. Any ideas on bg/format? Here's the updated bin: hxxp://jsbin.com/obofup/21 - I'm kinda falling asleep so the code part is terrible and I made it to work only in Chrome, just so you can check it and give ideas. 
Edit: Ok, I cleared up the code a bit and this should work on Firefox and Opera as well now: hxxp://jsbin.com/obofup/23
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
|
|
| Sat Mar 09, 2013 3:02 am |
Profile PM MSN Skype
|
|
frzangel
Tiny Angel
Warnings:  Posts: 2
|
| |
Quote |
I really like the dynamic in her position, Lunacuki. 
Good job!!
_________________
DON'T ASK FOR PASS IN PM! READ THE RULES AND FAQ! |
|
|
| Sat Mar 09, 2013 6:39 am |
Profile PM
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Thanks, glad you like it. I tried to stick to the original Feather-chan the best I could.
Regarding the speech ballon, that's mostly what I had in mind. I guess we could get a lighter bg, but the current one seems good enough. The "arrow" part of the ballon could be narrower and curvier, I guess. Not fan of wide and straight arrows myself, but eh, that's just my personal preferences.
Edit : what did you use to make the bubble ? Illustrator or something else ? If illustrator, can make a vectorial speech bubble that you'll be able to adapt easily after before using it.
Edit the second : made one to show an alternative, without text, in case you need to add custom message there. If you want/can, can upload the illustrator version as well to adjust size/shape more easily. Plus adding an example with the text and on the pic. It's done a bit roughly just to show the overall result.
|
|
| Sat Mar 09, 2013 10:37 am |
Profile PM
|
|
Sat
Star Angel
Warnings:
Posts: 7539
|
| |
Quote |
The bubble was made using CSS commands
_________________
Some people say, the universe is a Star Ocean!
Want to donate to keep the site up? PM me for possible donation ways!
We now also accept Bitcoin.
Got a suggestion on how we can improve LAH? Post it here or vote for other people's suggestions! |
|
|
| Sat Mar 09, 2013 12:33 pm |
Profile PM WWW Skype
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Ah, not familiar with that stuff. 
|
|
| Sat Mar 09, 2013 1:45 pm |
Profile PM
|
|
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
Yes, the first one wouldn't work in Firefox because I didn't add the -moz vendor prefix. The first one's code was terrible, I just absolute-positioned a half diamond above the corner of the ellipses.
Yesterday I got to revision 30 just making the arrow relatively positioned to the bubble, turning repeated code into re-usable classes for easy maintenance (maintenance of the maintenance screen - maintenanception) and removing unnecessary code.
Now I just have to fix some of the troll positioning that I used to put the bubble above the image and I'll get to work in the bubble.
Oh you asked how I did it. It is simple. As I said, the first revision was a rotated half-diamond above an ellipsis. Yesterday I still made a second version, which can easily adjust the size and positioning of the arrow. This one follows this simple recipe:
- First create a div (rectangle) and give it 50% border-radius (makes an ellipsis) with a 1px orange border and black bg.
- Make a pseudo-element (::before) with 1px orange border and black bg as well and apply transform skewX to turn it into an diamond, rotate it a bit and place it above the ellipsis (left top in this example) with approximately half of the diamond inside and half outside of the ellipsis.
- Make another div inside of the ellipsis, with basically the same style as the parent ellipsis, but no border. Place it in a layer above the parent ellipsis and the diamond. Its black background will hide the half of the diamond that is inside the first ellipsis, while the diamond hides the part of the border that it covers from the first ellipsis as well. This allows for freely positioning the diamond knowing that it will always cover the ellipsis border where it overlaps and that the part of the diamond inside of the ellipsis is covered by the inner ellipsis' black bg.
- Add some padding to the ellipsis so the border-radius doesn't cut out the text (would've added more padding but my troll positioning wouldn't allow me to, fixing that).
- Also added 1px padding to the first ellipsis otherwise the inner ellipsis' black bg was making the first one's orange border sharpy.
Well it's basically that. I've attached a screenshot with elements in a different order, a pic is worth a thousand words. The ellipsis' border comes from an ellipsis below the diamond, and half of the diamond is covered by the ellipsis with text and black bg (I've moved the diamond a layer up so you can see where it is more clearly).
Now back to the bubbles topic. I like your bg color. The border looks a bit more bright/thick too, really nice.
For the arrow, I guess I can just replace my diamond with an image (cropping your bubble's arrow). I guess I should have no problem doing that as it is how LAH currently has the posts' speech bubbles. (though these aren't ellipses though)
And for fonts, I liked the one you used. Do you have its name? And also Sat is looking for an imposing font for the Heading ("Maintenance") but I'm not good with typography.
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
|
|
| Sat Mar 09, 2013 2:27 pm |
Profile PM MSN Skype
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Eh, still think putting a graphic element would be easier, but I don't really know how the coding side works XD
As for the font, it's Hobo Std. Can't remember if that's some native font or not for windows or one I get for jobs, but should be easy enough to find. As for the word Maintenance, depend on what you call "imposing". I guess it might be possible to find fonts that have some "mechanical" feel or something that way to keep on the maintenance/tinkering theme, but don't think I have any like that right now. I usually get fonts that I need for a work, but not using text all that much and usually, don't need that exotic a font. I'd recommend getting a sweep over Dafont, see what you find there.
|
|
| Sat Mar 09, 2013 2:53 pm |
Profile PM
|
|
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
Yeah, I know where to get fonts but I don't know which to pick. Sat chose one for the heading. Going to work in the bubble a bit then. The arrow looks nice, but I guess the original is a little too big for this, maybe you can easily make it a bit smaller keeping the same border size and transparent bg? Thanks.
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
|
|
| Sat Mar 09, 2013 3:07 pm |
Profile PM MSN Skype
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Sure thing. As I say, it's done by vectorial drawing under illustrator, so can change the size at will without altering anything else. Even made a "arrow only" version as you don't seem to need the ballon itself.
|
|
| Sat Mar 09, 2013 4:10 pm |
Profile PM
|
|
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
Yeah thanks. I've also made a vectorial image by drawing with the pen tool above your png in the meantime to exercise my close to none graphic skills. I'll experiment with yours too to check which fits better in the bubble.
We're getting almost finished by now.
Hobo Std is an adobe font that costs $29, I believe this kind of font is not suited for web or we might get a lawsuit if we were to make it an web font. Not sure if that applies to text embedded into images though.
Not sure if we leave the balloon text with Verdana or look for a free webfont. Sat asked for a charcoal-like font but I believe the heading is enough charcoal. Well it is not like it matters that much.
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
|
|
| Sat Mar 09, 2013 4:19 pm |
Profile PM MSN Skype
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Mmmh, don't know exactly if using it would be legal or not. I used that font because it was kind of "cartoonish", I'm pretty sure you can find some similar fonts for free around.
Mmmh, checking around quickly, here's two suggetions : Chinacat, that looks rather nice, though thinner, and Gosmick Sans that a little more bold. Both can be found on dafont and are free. Uploading a preview pic.
|
|
| Sat Mar 09, 2013 4:31 pm |
Profile PM
|
|
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
As yours is still a little bit bigger than my arrow, I've moved the bubble a bit to the right to don't overlap with the feather-chan's arm.
hxxp://jsbin.com/obofup/35 (before, my arrow)
hxxp://jsbin.com/obofup/41 (after, Lunatsuki's arrow and more spacing)
Your border seems to blend better with the bubble's border (as in, border width and anti-aliasing) IMO and the extra spacing now makes the page less clogged up / uses the available space better.
Thanks for the fonts, they look really nice. Though, reading the Chinacat license:
readme.txt:
The Chinacat Font is Shareware and copyright ｩ1998 Dogstar (All Rights Reserved) If you have any doubt about anything, please get in touch.
You may use this font free of charge for evaluation purposes only. If you want to use this font for commercial or noncommercial publishing purposes (this includes all forms of electronic as well as hard copy publishing), you are obliged to register and pay your shareware fee.
Please register the Chinacat font, it costs just US$10 for a single user license. Site licenses ($200) and worldﾐwide licenses ($1000) are also available. A site license covers all machines in the organization which are within 100 miles of a central point, worldﾐwide means this planet only
Will try Gosmic Sans then.
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
|
|
| Sat Mar 09, 2013 4:56 pm |
Profile PM MSN Skype
|
|
Lunatsuki
LAH Artist
Warnings:
Posts: 0
|
| |
Quote |
Meh, forgot about this.
Regarding the arrow, can still reduce its size if needed. Can also see if I can get the end of lines thiner in order for the junction with the speech ballon to be smoother.
Edit : here goes. Can't make the end thiner than that, it seems, so went for round ending, hoping that might do the trick.
|
|
| Sat Mar 09, 2013 5:08 pm |
Profile PM
|
|
ult_combo
Matrix Angel
Warnings:
Posts: 86
|
| |
Quote |
The old one was fine already. You don't have to worry about joining lines, as I said, if the arrow happens to overlap the ellipsis it gets cut out nicely (I'm still using the old technique but with a different arrow). Nevertheless I've joined it pixel perfect already.
Just choosing fonts and centering the box now. I believe center doesn't look nicely hxxp://jsbin.com/obofup/45 maybe vertical center-10% hxxp://jsbin.com/obofup/46
_________________
My main MF acc was suspended, use other mirrors until I re-up it all to a new host.
There is no knowledge that is not power.
Our only limitations are those we set up in our own minds.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
Measuring software productivity by lines of code is like measuring progress on an airplane by how much it weighs.
Programming is an art form, whose real value can only be appreciated by another versed in the same arcane art. |
Last edited by ult_combo on Sat Mar 09, 2013 5:55 pm; edited 1 time in total |
|
| Sat Mar 09, 2013 5:50 pm |
Profile PM MSN Skype
|
|
|
|
You cannot post new threads in this forum
You cannot reply to threads in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
Do not upload or mention any illegal content. Violators will be reported to the authorities. You are responsible for your uploads and actions.
If it is illegal for you to view adult lolikon material in your current location, leave this site immediately.
LAH is in compliance with DMCA.
|
Month's top: Carnack with 100$