Specifying CSS color with alpha transparency / opacity

Say you want to set the background color of something to black. In CSS, you might write something like:

[cc lang=”css”]background-color: #000000;[/cc]

But, what if you wanted the color to be less dark while showing whatever is underneath it like what you’d get by specifying 50% opacity in Photoshop. To do that, do the following:

[cc lang=”css”]background-color: rgba(0, 0, 0, 0.5);[/cc]

The first 3 parameters are the red, green and blue values and the fourth is the alpha transparency from 0 to 1.

Creating CSS 3 Drop Shadows for All Browsers

To add a drop shadow to an element using CSS, just add the following code to your CSS
[cc lang=”css”]
.shadow {
-moz-box-shadow: 3px 3px 4px #000; // for firefox
-webkit-box-shadow: 3px 3px 4px #000; // for chrome and safari
box-shadow: 3px 3px 4px #000; // for CSS3-supported browsers
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);/* For IE 5.5 – 7 */
}
[/cc]

If a browser doesn’t support drop shadows, it just won’t show them.

To change the direction and size and opacity of the drop shadow, tweak the values. Learn more at http://www.css3.info/preview/box-shadow/

Creating CSS3 Gradients for All Browsers

To add a gradient to an element using CSS, just add the following code to your CSS

[cc lang=”css”]
background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]

If a browser doesn’t support gradients, it will just display the background color.

To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.

Creating CSS3 Rounded Corners For All Browsers

To add rounded corners to an element using CSS, just add the following code to your CSS
[cc lang=”css”]/* 4 rounded corners */
-webkit-border-radius: 10px; // for Safari and Chrome browsers
-khtml-border-radius: 10px; // for Konqueror browser
-moz-border-radius: 10px; // for Firefox browser
border-radius: 10px; // for browsers that support CSS 3
[/cc]
Of course, change the values (10px) to whatever value you want to change the corner radius.

If a browser doesn’t support rounded corners, it will just show square corners.

For more information, visit http://www.css3.info/preview/rounded-border/

Batch Processing / Automation Tips

Text Processing

Dreamweaver Find and Replace (w/ Regular Expressions)

Finding and replacing text is pretty straightforward. For example, you can find all text matching “car” and replace them with “cars”. Other types of find and replace are not so obvious. Here are some examples.

  • Replace “x” with “x followed by a tab”
    This is useful when you want the text to be tab delimited so you can copy and paste it all into Excel so that each column (separated by a tab) will appear in its own column for further processing.
    FIND: x
    REPLACE: xt
    REGEX: checked
  •  Replace new lines with “x newline”
    This is useful if you need to edit text that appears at the end of a line.
    FIND: n
    REPLACE: xn
    REGEX: checked
  • Wrap multiple values (one on each line) with single quotes (‘x’)
    This is useful when you’re building a long drop down list of options in the format
    <option value=’a’>a</option>
    <option value=’b’>b</option>
    <option value=’c’>c</option>

    FIND: n
    REPLACE: ‘n’
    REGEX: checked

Continue reading Batch Processing / Automation Tips

Windows Command Prompt Shortcuts

Recently I had to do some Recently I had to do some stuff in Windows Command prompt. I got tired of having to type everything out letter by letter so I found these shortcuts.

Copy Text To Clipboard

Highlight  the text you want to. It will be copied to your clipboard.

Paste Text Within Windows Command Shell

Right-click your mouse to paste

Auto-Complete Entering Commands

Type the first few letters of a command or file / folder path and then hit TAB

Cancel The Currently-Running Program

Hit CTRL+C

How To Set Up SSL on Multiple Sites / Virtual Hosts on Apache

This example uses Apache that comes with Bitnami’s WAPPStack (Windows, Apache, PHP, Postgres) installer.

Create your SSL certificate keys. Instructions on creating a self-signed SSL certificate are available in chapter 8.5 Creating a Self-Signed Certificate Key in O’reilly’s Website Cookbook. It uses openssl to create the certificate keys. If you are on Windows, you can install Cygwin and add the openssl package to follow the instructions.

Once you’ve created your SSL certificate keys, do the following: Continue reading How To Set Up SSL on Multiple Sites / Virtual Hosts on Apache