If you’re into clean Flat Design, maybe you’ve also discovered the Long Shadows variant. I was making my own long shadows but here is a super-simple ready-made CSS tool.
http://sandbox.juan-i.com/longshadows/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK I am getting interested in CSS and FW6. I have seen tools similar to this one which generates code.
Is there a basic set of instructions available as to what to do with code copied from sites like this ?
Ernie Perhaps you could use this particular example to tell me how to use the code and where to put it in order to create a long shadow and maybe I can figure out from that how these things work in general ?
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
NICE!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
http://cssway.thebigerns.com/workbench/long-shadows/
Basic instructions? Unfortunately this isn’t that basic… not even a simple
cut-and-paste.
The most important thing to learn would be what basic CSS is, how it works
and how Freeway Pro makes CSS. Then, you must learn how you to make Freeway
Pro make CSS for you. That is not so simple, and there are many efforts
already in the forum to set people in the that direction - just no single
example I think, as I do not believe that is possible.
Here are the process that I took to make my example…
First, I opened up the tool I shared (
http://sandbox.juan-i.com/longshadows/ ) and size up the code that is
produced… it’s different than how I would approach it, but well with my
code standards (such as they are). So I begin by setting the page
background color to white ( #ffffff ). The second color setting is for the
background-color of the text. This is because his shadows are not actually
transparent ( rgb instead of rgba ), so these color choices are important
or else the shadows look horrible. All the other settings look good to me,
so I click the button to show the code, then the one to select-all. Press
command-c to copy this text.
The next step involves using a good search-and-replace text editor - for
this I used the free TextMate. Paste the text and pare away everything but
the two CSS styles that I actually need – box-shadow and text-shadow
– both of which are supported by current browser versions according to
http://caniuse.com … If you’re looking for older browser support, you’ll
have to ask someone else.
With those two CSS definitions isolated, I do a little search/replace magic
to get rid of the linefeeds – that is, I replace the comma linefeed with a
comma space – though technically that’s not essential, just easier for me
to deal with. I also separate the CSS property name from the definition
with a carriage-return – this is important as FWP needs them to be
separate. The first property is text-shadow: ( the colon is the give-away )
then box-shadow: – also, I remove the final semicolon on the property
definition… again, to make Freeway Pro happy.
Now I am ready for FWP. With my background color set the same color as I
did in the tool page and FWP set to CSS Layers, I start making my page. My
page is inline-inflow-boxmodel-construction, but you can do this with a
layered construction. In either case you have to be concerned about layer
order and overlaps – remember, the shadows aren’t actually transparent…
flat colors and lots of space are what is needed to pull this off. If your
page design is tight, or textured, this will not work for you.
I make my HTML box for my text, and color it as I set the text background
color.
Now, I make the CSS style to give that box ( and every other box against
the white background) its shadow. In the Style Editor I create a new style
named LONGSHADOWwhite and give it a minimum style to make FWP allow me to
apply it. I open the Extended style for that, create a new property named
box-shadow THEN switch over to my text editor and copy the definition block
that follows box-shadow: ( all those rgb listings ) and paste that into the
value for that new style. Close the Style Editor, apply the style to the
box, Save, then check it out.
After I enter my text into the box, I want to have apply the text shadow to
it. So, I again open the Style Editor and create a style for my text –
LONGTEXTyellowgreen – I style this text with the background color I chose
in the shadow generator, size, color, etc. I also give it a paragraph style
to force-apply it to the whole text. Then opening the Extended style
feature, I create a new property text-shadow and, like before, switch over
to my text editor and copy the code block that follows the text-shadow:
property, switch back to FWP and paste that into the value field. Close,
save, publish, preview.
So far, working very nice. The text shadow is overflowing my narrow green
box, so I set the overflow of that box in FWP to none.
Now I want to make another box, but this one is a different color. Since
this box also sits on a white background, I don’t need to change that.
Instead I go back to the shadow tool, set the new text background color,
and everything is generated for me. Open the code, but this time see if you
can identify just the part that you need - the text-shadow: color
definition block – try copying just that. I paste it into my text
document, replacing the existing text-shadow code with this new. Now go
back to FWP, make and color the new html text box, apply the style for the
outer shadow, then create a new text style for this color using this new
text-shadow code.
And so on for every color of text that is shadowed, every different
background color… and that’s as easy as I can make it. Don’t forget to
download my FWP file, that will help you visualize what I’m saying.
–
Ernie Simpson
On Thu, Jul 18, 2013 at 2:30 PM, Richard Lowther <email@hidden
wrote:
OK I am getting interested in CSS and FW6. I have seen tools similar to
this one which generates code.Is there a basic set of instructions available as to what to do with code
copied from sites like this ?
Ernie Perhaps you could use this particular example to tell me how to use
the code and where to put it in order to create a long shadow and maybe I
can figure out from that how these things work in general ?Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Gosh Ernie that is comprehensive… Many many thanks for taking the time to set all that down. This will be my homework for the weekend - (except its finally summer over this side of the world, not indoor weather at all ! And there is a cricket match taking place which is grabbing too much of my attention.) Nevertheless I would feel guilty if I did not get a handle on this after all the effort you have gone to.
Merci encore et bon week-end
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Looks great Ernie! Especially your example page! This is really something to use in my flat design.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Nice sample page there, Ernie. Hopefully FW10 will have a proper CSS editor.
Marcel
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options