Shadows

estudent — Tue, 24 Nov 2009 21:14:26 +0000

Now the question is: Why didn’t it work in class when clearly it works on the site. If you CANNOT see the shadows, please let me know. I need to find out if it is that your browsers are not up to date etc.

I’m not going to teach you shadows per se but to point you to using the Web Developer Tool Bar more often.

Go to the folder SAMPLES on the OurSchoolYears.com Site.

Notice that I created the very simple pages to show you different ways to create the text shadows.

If you cannot see them, this is all for naught.

Click on the CSS Web Developer Tool Bar or just right click on the page anywhere and it will give you the option to go to the Web Developer, then scroll over to View Style Info and then click on the places that you see the shadow effect.

Notice that on the boys I used a “negative pixels” technique that will make the H3 Tag in the Masthead to creep up on the H1 Tag above. What that is telling it to do is take LESS of the top padding away instead of adding a cushion to it.

Play around with the CSS and make a page using these techniques. I would like you to create an HTML file and name it “boys.html or girls.html” or whatever you want but use the class01.html, class01.css and layout.css files you have.

You can put them in a different folder on your geek bling and then you need to only copy the layout file to it and not rename it. Remember also that you will need to change this link that is in your HTML page:

so that it points to the correct style sheet AND then that has to point to the layout.css sheet. It is good to copy these before changing them each time so you have an original to keep. The other thing you can do is to keep the email I sent you and always have fresh copies.

Have fun trying all this out. Last but not least, I used an image for the Body Background on the girl’s page but I used a BORDER tag for the navigation border with dots. It is just an example of how you can use CSS styling to create the look of images.

Let me know how it works and send me the links to any pages you put up online so I can see them. Until we write code again…

Pixels

estudent — Tue, 24 Nov 2009 20:27:50 +0000

Hi Class,

Here is how to make an easy graphic that you can have fun playing with in buttons, backgrounds and images.

1: Open PAINT (I cannot give you instructions with Gimp but if you are using it then I am sure you can figure out the differences in what I am saying.)

2A: DECIDE:

2B: If you want an image that is going to go VERTICALLY/DOWN (repeat-y) the left or right side of an area such as Masthead, Body etc., you will want to create a image going ACROSS and if it is a box image, you will have to create it in a way that the bottom of the image will work well with the top of the image since they will be stacking on top of eachother.

2C: Likewise, if you are creating a HORIZONTAL/ACROSS image (repeat-x) you will need to create it in a way that the left and right sides will match nicely since this will be meeting up ACROSS at the seams.

3: For VERTICAL you will make a line or box across the page or even short will do.

4A: Pick your colors that will match the site and add from the paintbrush tool little splotches of color that match your site as well. Remember that you can use the Zoom Magnifier to see better while you plan it. The more colors you add and the closer together they are, the more stripes there will be down the page.

4B: For the HORIZONTAL IMAGE you will create a line or box in the same way but your original line will go straight up and down so that when you are finished your image will be repeated across the section of background you choose.

4C: For the “boys” page, I simply make a box of one color and used the Spray Can tool and sprayed evenly around the box. Play with the tools and see what you want to do.

5: Save your image either very shallow for the Horizontal one or very thin for the Vertical. Save as a “jpg” file so that the color is not distorted. Make sure to save to your “images” folder and NO CAPS in the name of the file. Here are a couple tips: You can use the “invert colors” tool under IMAGE on the tool bar. It is fun to see the opposite colors that occur. You can also save the image and then from the IMAGE tool bar you can then flip the image and save it as the “right” side so that you can use left and right versions of it. PLAY AROUND.

6: Go to your CSS. Find the background area that you would like a background image to cover.

6A: For the VERTICAL such as with the left side of your site you will look for the BODY element. It will look something like this: body { background-image: url(“…”); background-color: pink; background-repeat: repeat-y; }

6B: For the HORIZONTAL such as in an active link (a: on your style sheet of the navigation) you can use it to make buttons without using a larger image. It would just keep repeating UNDER the link name. Just make sure you are using a color that will show up for text on top of the image. Keep your images small. This is why it is good to zoom in when creating them.

6C: You can also just do a {border-left-style: dashed green; background-color: blue; border-width: 15px; } Add this to your BODY element or your navigation, content, sidebar, masthead or footer and see what happens. Do the same by changing it to border-right-style etc and change the top, right or bottom as well. Change it from Dashed (NO CAPS I’m just using them to accentuate the names) to Solid, Dotted, Ridge, Groove or Inset, Double etc. Change the pixels as well to larger or smaller for fun. Now you can use an image or create a fun border around your site without even using images at all.

7: Play with it. HAVE FUN! Email me if you have any questions at all.

OUR SCHOOL YEARS . COM / BLOG » borders

Shadows

Pixels