CSS DROP SHADOWS

CSS DROP SHADOWS

Add w3c compliant drop shadows to your text and images with just a few lines of code.
Heres the link w3.org/style I found this tutorial quite help and throught i'd share it with you. By simply modding the background and margin properties you can quickly and easily create custom shadows to suit your Blog.
To gain a better in sight in to css checkout w3schools.com for free tutorials.

css borders

There are various ways to create shadow effects in css. Here is a dirty and quick way to get the above effect.
Firstly add these css properties to your css style

.shadow {
border-top: solid 2px #ccc;
border-right: solid 4px #000;
border-bottom: solid 8px #666;
border-left: solid 1px #000;
}

Then apply the class to your image tag

<img src="assests/tractor.jpg" width="350" height="467" class="shadow">

I told you it was dirty, ok so it's not the best effect or the best way to create this type of effect. In fact this is more of a bevel effect if anything?
I imagine the best way to create a shadow effect would be to overlay "<div>tags.
I will do soon reading and post on it soon.
Photograph Taken 23-10-07 by Doug

Layout fixed for now!

Just finished my new layout, but was unable to edit the header div as i would like due to blogger changing the templates code.Turns out blogger have also been making changes to the way you can customise your blogs layout and it's just left me a little confused. So i off to get some sleep.

Template redesign

Sorry you guys using firefox, it seems i have and issue with the blogs navigational element... how embarrassing.

Curled over corners with fireworks

Here are some png source files for curled corners.

The shape is a rectangle modifyed using the subselection and freeform tools and has a gradient fill and drop shadow applied.
To download click the thumbnail then > right click > save as
on the full size image.

Switching blogger sidebar from right to left and vice versa

Easily and quickly reposition your blogger sidebar element and main blog content by choosing Template > Edit html
With the text editor open scroll down until you find the styles for the sidebar-wrap which will look something like this:-

#sidebar-wrap {
width:220px;
float:left;
font-size:90%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 0;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF2E6;
border: 1px dotted #cccccc;
}

now change the float property which looks like this:-

float:left;

In this instance you would change it to "float:right;" if you hit the preview button now you'll note that not much has changed if anything. This is because you also need to change the float property for main-wrap1 also.
As before locate the styles for main-wrap1 which looks something like this:-

#main-wrap1 {
width:465px;
float:right;
background:;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 10px;
}

and edit the float property this time from float:right; to float:left;
Now press preview to see how you have reversed the orientation of your template.
Depending on which template you are using your blogs content may seem to wide or close to the edge of your page to combat this simply reduce the width of your main-wrap1 #div by 5 to 10px.
Hope this was helpful

Editing classic blogger templates continued

Here is the screenshot of my progress so far, i plan to add a three column layout to the footer and tweak the fonts etc. I will post the css and images once finished.

editing classic blogger templates

I have continued my editing of the classic blogger template "rounders two" and have made a fair bit of progress. Althrough this template is not ready to go live quite yet i was going to post a screenshot showing my progress, but... there seems to be a problem with bloggers image upload script.

HTML,CSS plus a tiny little bit of PHP

HTML AND CSS WEB DESIGN my latest project is going to be the redesign and relaunch of the first website i created almost two years ago.
I've learnt a little in the last two years and this redesign will be standards compliant html and css. O.K so validation is only half the battle, it is of course true that while a page may validate correctly does not necessarily mean it will be cross browser/platform compliant. So whats a boy to do? Banging your head on your desk may seem like a good idea at the time(it won't help). Thats not everything i've learnt so far, get the latest versions of the popular browsers on your machine(IE,FireFox,Netscape and so on)for testing then visit browsershots here you can test your url in thirteen different browsers across all platforms specifying the screen size(from 640px -1600px)and other elements like javascript, flash and java.

One of the requirements of the redesign is for the client to be able to edit the content of the site without the need for any technical skills or software. So i have created a php script that outputs to text files which are included within the pages html with php. The sites admin pages where the content is edited uses the tinymce javascript text editor.

Once i finish this project i would like to develop this script in to a full content management system that allows the user to also edit the navigation and other elements much the same as blogger does.

Shopping, Beans & software upgrades

I hate the weekly shopping trip as much as the next man, the bright fluorescent supermarket lights and long queues are almost always certain to send me into a zombie like state in no time. I just about managed to stay half wake tonight as i thought about trying to emulate some food package labels with fireworks. I had recently downloaded some western style fonts from 1001
free fonts and had been eager to try them out, so i chose a well known brand of baked beans that i had remembered used a western style label on it's cans.
Thirty or forty minutes after my return from the supermarket and i had created the above png, although it is not identical to the food can i am happy that i was able to create a similarly styled object relatively easily.

I'm very keen to try out the latest incarnation of fireworks(cs3). I have always been very sceptical about software upgrades it only seems like yesterday that i starting using fw8 and wonder does the latest version have enough upgrades and new features to justify the price tag.

WEB 2.0 LOGO REFLECTION

Easliy create a logo or image reflection in fireworks
once you have created your icon/logo/image and grouped its elements together (CTRL+G).
Select duplicate from the edit dropdown (CTRL+ALT+D). This automatically places a duplicate of your orginial object on to your canvas.
Ensure you have your duplicate image selected then from the main menu choose modify > transform >flip vertical as shown below.

Now you have a mirror image of you original icon
lets reduce the master opacity of the duplicated icon to further enhance the reflection effect. The control for this is located in the right hand side of the properties panel.
Once you have completed this step you may wish to reduce the height of the reflected image to suit yourself.

That's it, to keep your images editable don't forget to save a png copy.

3D text effect with fireworks mx

Grab the text tool from the tools panel and drag it out across your canvas then input your message or logo. This will form the 3D shadow so choose a dark colour and set the stroke colour to black (#000000)

With your shadow text already selected select edit > duplicate(CTRL+ALT+D)
This will reproduce your shadow text on top of your original text. With the duplicated text selected choose a light fill colour from the properties panel whilst leaving the stroke black(#000000).

Now simply position your duplicated text in place to create your 3D effect.Once you have chosen your preferred perspective group your logos highlight and shadow together(CTRL+G).

Have fun!

One step photo editing in fireworks

Heres a one step fix for editing under or over exposed photos using fireworks.
Open the file you wish to edit with fireworks
Select the image then open the properties panel if it's not already open(ctrl+F3).
From the properties panel select the add filters icon > adjust colour and then select the curves option.

Once you have the curves window open ensure the preview check box is ticked, this will allow you to see the effects being applied to your image. Now simply place your cursor on the line in the centre of the curves grid and drag it from left to right, up or down until you are happy with your image. Then click ok to close this window.

ctrl+s to save your file.


It's that easy, did you find this tutorial helpful? Or not?