drop shadows
Brought to you by:
nak5ive
Menu
▾
▴
#1 drop shadows
Hi,
I'm developing a jquery plugin in order to automatically add rounded corners box to html elements with a CSS cross-browsers rounded corners box technique that I've called: cornflex (http://dev.pnumb.com/cornflex).
Currently, I still have to manually design my boxes under photoshop but with your API, I plan to make it automatic.
Here is an example of what I'd like to obtain:
$("div.roundme").cornflex({
radius: 50,
foregroundColor: 'FFF',
backgroundTransparency: 1,
borderColor: 'red',
borderWidth: 5
});
which will have for effect to add a white rounded corners box to each '.roundme' div.
The only thing that stuck me are the way 'sides' are sliced since top, right, bottom, left don't match those I have implemented in my technique, look: http://dev.pnumb.com/cornflex#Specificclass
I'll have certainly to modify your code in order they match. Or maybe could I add a new shape named 'corflex'?
Could you give me a hint on how to do it? Have I to define another class?
My last question takes about drop shadows... Are you planning to implement it?
Like in photoshop(http://www.atpm.com/13.07/images/photoshop-03b-drop-shadow.png), maybe we could choose:
- an angle
- a spread value
- a distance
Is it hard to do?
Last last question: for color values, like foregroundColor, what about being able to define an opacity value?
Hope you'll give me your opinion about all.
Many thanks.
NB: I've implemented a demo-clone page to live test your library, with dependent parameters: http://paste.arandomurl.com/47fd6e40ae3e9
Feel free to grab my code if you want to enhance your own demo page
Cheers,
Antoine BERNIER
Logged In: YES
user_id=1948482
Originator: NO
Drop shadows have been considered, but i'm just not there yet. it's definitely feasible, i would just be concerned about computation time and memory resources while generating the image. it may be a feature restricted to the full rectangle shape at first. i will look into the best approach for this.
i have definitely thought about giving an opacity value instead of just toggling transparency on or off. this will definitely be in the next release, and should not be too difficult to implement.
i'm not sure what you mean by my Side class/shape not working for what you were intending to use it for. One important note is that when defining your side parameters, height and width definitions are required. for example, if you wanted to create only the left side of the rounded rectangle, you would need to specify the radius of the corner and the height of the box to get the appropriate output. the same goes for the top and bottom side will need radius and width. does this help? The side shape is exacly what you appear to have in your demo. Could you clarify a bit more on the problem you are having?
By the way, thanks for using the package! It's cool to see someone put it to good use. I'm not a jQuery user, myself. i'm more of a mootools guy, but a mootools plugin might be a good project for me to work on in the future.
Logged In: YES
user_id=1737261
Originator: YES
Hi nak5ive,
And thank you for your answer.
Since I wrote this post, I've managed to adapt your code so the sides now fit my cornflex implementation. You can have a preview here: http://82.229.245.231/roundedphp/ (just look at 'Shape->Sides')
From there, I've got now a full functionnal plugin, that dynamically generates rounded boxes around HTML elements: http://paste.arandomurl.com/4808d8de83762
The only thing which is missing? drop shadows! ;)
Thanks again for your great package and keep up the good work!
Best regards,
Antoine BERNIER