 |  Styling your links with CSS
by Andrea Butterworth With the use of Cascading Style Sheets (CSS), in conjunction with HTML, you can easily achieve a variety of effects for your links. Lets start with basic link styling. In the <head> portion of your document place the following: <style type="text/css"> a:link {font: bold 11px tahoma, sans-serif; color: #004891;} a:visited {font: bold 11px tahoma, sans-serif; color: #a800ff;} a:hover {font: bold 11px tahoma, sans-serif; color: #ff8400;} a:active {font: bold 11px tahoma, sans-serif; color: #ff0000;} </style> These are the basic pseudo classes for the anchor tag. A pseudo class allows several different styles to be applied to some selectors such as the anchor. Let's define these pseudo classes by what they control. | a:link | the default style of the link. | | a:visited | the style of the link after you have already clicked on it. | | a:hover | the link style while a user's mouse is hovering over it. | | a:active | the style while a user is actively clicking on the link. | If you want to take things a step further, you can style your anchor tag to have a width and a height and a background color. This will, in effect, make it look like a button. Add the following to the style tag in your <head> tag: a {width: 90px; height: 25px; background-color: #fff0df; border: 1px solid #666666; text-align: center; padding-top: 4px;} In the end, you will have an anchor tag that looks like this: Free Tools ...Good Luck!
If these sample scripts do not render properly in your email client, please visit the online version of this newsletter. | ADVERTISEMENT
CafePressure:David's In The House
It was bound to happen. Cafepress enjoyed a nearly unchallenged playing field in the online, customized apparel and merchandise business within the United States. With their shop platform, quick turn around times, and early start in the market they quickly expanded their company. Now, like David before them, Spreadshirt.com has stepped onto the field to do battle with the Goliath CP – but Spreadshirt has more than rocks to throw… Spreadshirt has the most technologically advanced design tool in the business. Customers can visit it at www.spreadshirt-designer.com and design their items or it can be integrated into a shop as www.boingboing.net recently did. Moreover, Spreadshirt allows customers to print on dark colored clothing unlike CP – this has everyone but the Easter Bunny excited. SS also has far more options in printing including digitals, dark digitals, flex, and flock – a fuzzy material that is cool and redeems Spreadshirt to the Easter Bunny. Plus Spreadshirt is the market leader in Europe – so if someone creates a shop they can have it all over the world in every language that matters. SS matches CP or exceeds them in quality, shipping times, and shop development If you’re looking to merchandise your designs, logos, or catchphrases; run an outstanding promotion; or set up a free shop with Spreadshirt visit us at www.spreadshirt.com. Come on, David was way cooler than Goliath – and you know he would have went for being global and wearing something other than girly pink ;) |  Fun with Photoshop
by Jake Redekop Vector Masking allows one to hide parts of a layer. We�ll get to the practical application of this powerful technique next month so save this newsletter. Duplicate your image (right click and choose �Duplicate Layer�). Now, create a new layer by clicking the �Create New Layer� icon located at the bottom of the layers palette. Fill this new layer with white using the Fill Tool (shortcut: 'g') and move it down one position on your layers palette. Select the top layer (your image) and apply a vector mask to it by clicking this icon:  also located at the bottom of the layers palette. While the vector mask is enabled, anything painted black will be hidden, revealing whatever is behind the layer (in our case, a white canvas) and anything painted white will be visible. Click on the vector mask and select the brush tool (shortcut: 'b'). Now, with black selected as your foreground color, start painting on areas of the image that you wish to hide. As you do this, you will reveal the white canvas from the layer immediately below your image layer. If you accidentally hide a portion of the image, switch your brush color to white and paint over the mistake. To quickly swap the colors in your swatch, hit the 'x' key. This makes correcting mistakes quick and easy. Some helpful tips and shortcuts: magnify the image with the Zoom Tool (shortcut 'z') for more precision. While zoomed, press and hold the space bar and left mouse button, and move your mouse to move to other areas of the canvas quickly. Use the '[' and ']' keys to increase or decrease your brush size so as to make getting in those tight spots easier. Tip: Try using a brush with 50% hardness to smooth any unnaturally rough or discolored edges of your subject caused by the masking process.  |  |  |  Javascript - Required Fields on Forms
Roger Riche If you would like to have a form that requires the user to fill out all or selected fields, this article will show you how. The Javascript Place the following javascript in between the <head></head> of your html document. <script type="text/javascript"> var valid = true; function validate_form() { var required_fields = new Array('name','email','comments'); var num_required = required_fields.length; for(i=0;i<num_required;i++) { if(eval("document.bravenet_form." + required_fields[i] + ".value")=="") { window.alert('The ' + required_fields[i] + ' field is required. Please fill in all required fields to continue.'); valid = false; break; } else { valid = true; } } } </script> The Email Form Place the following form in between the <body></body> of your html document. <form method="post" action="path-to/your-script" name="bravenet_form" onsubmit="validate_form();if(!valid) return false;"> Your Name <input type="text" name="name"><br> Your Email <input type="text" name="email"><br> Your Phone <input type="text" name="phone"><br> Comment <textarea name="comments" cols="30" rows="5"></textarea><br><br> <input type="submit"> </form> To customize this javascript to work with your current form, modify the items in the required_fields line to match the names of your form elements. Make sure that your form has name="bravenet_form". For example,
var required_fields = new Array('country','state','postal'); for form elements with the names country, state and postal. That's it, you can now require input to specified form elements within your online forms. Happy coding! If these sample scripts do not render properly in your email client, please visit the online version of this newsletter. | Don't Forget to Forward This Newsletter To Your Friends! | |
0 Comments:
Post a Comment
<< Home