Cast Drop Shadow With CSS3

CSS3 Cast Drop Shadow Effect Demo and Code

View DemoGet Code

There are many neat things you can do with the box-shadow property in CSS. Many of them we see almost everywhere now, including the famed paper curl effect.

One effect I haven’t seen around though is a cast drop shadow, the kind you usually see under a device shot – for example an iPhone 5. I recently had the opportunity to create such a shadow for the refresh of the WordPress for Android home page.

The Idea

A drop shadow that’s more blurry towards the right and left sides, automatically adjusts to its parent element for width, and has a subtle skew for depth. Preferably using CSS pseudo elements rather than adding to the markup.

CSS & Markup Walkthrough

Skip ahead to final result

You need a parent element that is not a <img /> tag, since pseudo elements won’t work on the image itself. Other than that the HTML is pretty straightforward:

<div id="device">
<img src="#" width="#" height="#" alt="#" />
</div>

The #device element should have the same constraints as the image inside it, otherwise the shadow won’t be aligned properly. Relative positioning is also needed so that the pseudo element’s x/y coordinates are taken from the parent element and not the HTML body. The perspective property is important, it tells the browser how big the 3D space is.

#device {
width: 312px;
height: 264px;
position: relative;
perspective: 600px;
}

The image needs to be positioned above the pseudo element which is easily accomplished with this CSS:

#device img {
position: relative;
z-index: 2;
}

Now we’re getting to the good stuff. The pseudo element that will create the device shadow! First the basics. Pseudo elements are meant to be used for adding things like quote marks to a paragraph of text, but with a little trickery you can make it act like any other HTML element: add content: ""; and display: block;. Position absolute and a z-index means it’ll show up below the image, and the height + bottom px value sets it’s alignment with the bottom edge of the element.

content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 1px;
height: 2px;

The shadow size settings is the tricky part. Since the shadow is scaled up 10x later to make it extra blurry on the right and left sides, you need to enter a tenth of the width you ultimately want here. You also have to make sure that the left value (X axis) is a negative half of the width.

/* Shadow size */
width: 8%;
left: -4%;
margin: 0 0 0 50%;

The transform property scales the element to be 10x wider, while making it slightly thinner, greatly exaggerating the drop shadow’s blurriness on the left/right sides compared to top/bottom. RotateX(45deg) gives the element a slight depth.

transform: rotateX(45deg) scale(10, .75);

Time to fill the element, both in and around. The solid black background color and multiple layered box shadows make the element easier to work with in different environments where you may want a different weight to the entire shadow. Thanks to the first few drop shadows being tight around the shape of the element and then branching out, there’s no hard line in between where the element stops and the drop shadow begins.

background: #000;
box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;

Finally, setting the opacity property to the entire pseudo element allows us to change the weight of the drop shadow on the fly and easily adapt it in animations and similar.

-moz-opacity:.65;
filter:alpha(opacity=65);
opacity:.65;

The Result

This is what all the CSS looks like combined (View Demo):

#device {
    width: 312px;
	height: 264px;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px;
}

#device img {
	position: relative;
	z-index: 2;
}

#device:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 1px;
	height: 2px;
	
	/* Shadow size */
	width: 8%; /* Add a 10th of the width you want (scaled up later) */
	left: -4%; /* Half of the 10th of the width! */
	margin: 0 0 0 50%; /* Centers element before it's upscaled, don't change this */
	
	/* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
	-moz-transform: rotateX(45deg) scale(10, .75);
	-ms-transform: rotateX(45deg) scale(10, .75);
	-o-transform: rotateX(45deg) scale(10, .75);
	-webkit-transform: rotateX(45deg) scale(10, .75);
	transform: rotateX(45deg) scale(10, .75);

	/* Apply shadow & background */
	background: #000;
	-moz-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-o-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-webkit-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-ms-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	
	/* Change opacity of entire element to tint shadow */
	-moz-opacity:.65;
	filter:alpha(opacity=65);
	opacity:.65;
}

That’s it for today. Hope this helps!

Get Notified about Keyword Mentions in Skype Group Chats

Here’s a little trick that might come in handy for those that use Skype as a group messaging tool: set up the chat to only notify you about specific keyword mentions and mark other messages as read immediately.

This guide is for Skype 6.1+ on Mac OS X 10.8 Mountain Lion (untested on other platforms but might work).

How to change Notification Settings in Skype

  1. skype-group-chat-notification-settings-sidebarOpen Skype and find the group chat you want to change Notifications for in the sidebar.
  2. Right-click on the conversation and choose “Notification Settings…”.
  3. A dialogue lets you set your Notification Settings.
    • Notify me: default, get notified about every new message.
    • Do not notify me: turn off notifications altogether – you’ll see new messages only if you go directly to the group chat.
    • Notify me only if these words are mentioned: allows you to specify specific keywords for which you want to be notified about, separated by spaces.
    • Mark unread messages as read immediately will clear the badge count on the app icon.

    skype-group-chat-notification-settings-dialogue

Props Joen Asmussen for the post idea.

My favorite Photoshop Shortcuts

Recently I had the opportunity to give a new Photoshop user some pointers on how to use the program. One thing that I think is very important to get used to early on is to use keyboard shortcuts for as many actions as possible. The amount of time it saves over time is astounding.

Here are my most used Photoshop shortcuts, with notes.

CMD + 1
Zooms to 100%! Genius! Tip: CMD + 0 zooms to “Fit Screen”.

CMD + S
Do this a lot.

CMD + Shift + S
Save As.. useful for saving a copy, or if you need a non-optimized version of the file for use elsewhere.

CMD + Shift + Alt + S
“Save for Web & Devices”. Your best friend when you go on to create purpose-filled pixel fighters optimized for the web. Just make sure you further compress those .png’s with another application afterwards, to keep file sizes at an absolute minimum.

Spacebar
Holding the spacebar is a quick way to temporarily use the Hand tool (H). This allows you to drag around a section of your image without losing the tool you were working with – release the spacebar and you’re back.

F
Circle Screen Mode. This allows you to quickly switch between Standard Screen mode (with the tabs showing), Full Screen Mode With Menu Bar, and Full Screen Mode. I prefer the full screen mode with the menu bar, since it handles zoom the best and best leverages the limited pixels on my laptop screen.

Tab
Toggles the entire Photoshop interface. Very useful for small screens, this way you can get more screen space instantly when working on something bigger.

Control + Tab
Circle open Photoshop documents. (Instead of using the tab bar, which can be hard.)

CMD + Alt + Z / CMD + Shift + Z
Face it. Even with your mad Photoshop skills, you’re going to want to correct things from time to time. This bad boy will step back/forward in History for you, and effectively kills and buries CMD + Z.

0-9
Pressing any number between 0-9 will change the opacity of the selected layer, where 0 = 100%. Example: pressing 5 will set the opacity to 50%. Example 2: pressing 3 and then 5 quickly will set the opacity to 35%.

Shift + 0-9
Does the same as above, but instead sets the Fill opacity – handy if you work with layer blending options a lot.

Z
Zoom. Zoom in/out by either clicking+holding and then dragging (right to zoom in, left to zoom out), or by clicking repeatedly – and holding Alt to zoom out. I recommend only using the click and drag function to get to somewhat the right zoom level, and then making sure you’re at an even % zoom for best pixel editing power.

V
Move Tool. Move dat layah. Tip: while using the Move Tool, try holding CMD and clicking an element on the canvas. This will, with some luck, select that element in the Layers palette.

M / Shift + M
Rectangular / Oval marquee tool (selection). Select non-vector elements. Do crazy stuff.

G / Shift + G
Gradient / Paint Bucket (fill) Tool. Quick ways to draw gradients and fill selections (and more) for non-vector elements.

C / Shift + C
Crop / Slice / Slice Select tool. I don’t use Crop much at all, but Slices are a gift from heaven. Don’t crop your entire .psd to get single images ready for the web – use slices instead!

T
Mr. Double T as in Text Tool. Make that mockup come alive with some old-school latin vibes.

U / Shift + U
Rectangle / Rounded Rectangle / Ellipse / Polygon / Line / Custom Shape Tool. I generally prefer to use vector shapes for large interface elements – it’s just faster and more versatile. Especially when things like rounded corners are not usually done using rendered graphics anymore.

P / Shift + P
Pen Tool / Freeform Pen Tool. I really only use this to modify existing vector elements (see U). Tip: with a path selected and using the Pen Tool, hold Shift to temporarily turn it into the Convert Point Tool, allowing you to delete bezier curves, as well as transforming them.

A / Shift + A
Path Selection / Direct Selection Tool. Your best friend when dealing with vector elements in Photoshop. Just like in Illustrator, these allow you to select and manipulate a full path, parts of it, or individual curves. Tip: while using the Direct Selection Tool, hold Shift to select multiple points to manipulate.

D
Sets foreground/background color to default (black/white).

X
Swaps the foreground/background colors.

CMD + I
Inverts the current layer. Very useful if you need some contrast to be able to match up overlapping layers. Inverting again will of course bring the layer back to it’s normal colors without harm. Tip: for more precise matching of those “onion layers”, lower the opacity of the inverted layer when aligning.

CMD + T
Free Transform! Takes the layer’s contents (or the selected paths in a vector element) and puts them in free transform mode.

CMD + A
Select All. Selects the entire canvas. Tip: CMD + D deselects the canvas again.

CMD + N
New document. Very, very useful shortcut. Since Photoshop defaults to the size of any content in the clipboard, this is a great way to quickly check for pixel level imperfections and making sure elements align.

CMD + Shift + Alt + N
New layer (without dialog). Huzzah! Welcome newborn.

CMD + J
New layer via copy (duplicating). Beats drag and drop!

CMD + G
Group selected layers. Very handy way to quickly organize things. A tidy house makes for peace of mind (and a better shot at finding what you’re looking for 3 years from now).

CMD + E
Merge layers. Merges the selected layer with whatever is under it, unless it requires rasterizing.

CMD + H
Temporarily hide all guides and slices on the canvas. “Only show ’em when you need ’em.”

CMD + R
Show/hide rulers. This is the quickest way I know to double check that measurements are in the format I need (pixels, millimeters, centimeters, etc). Right click the ruler to bring up a small menu. Also useful for a basic sense of where you are, and creating guides. Tip: to create a guide, start dragging from either ruler. You can toggle between horizontal/vertical guides by holding Alt.

CMD + F
If you’re using Filters, this applies the last used filter again. Can be handy if you’re making minimal changes using a blurring filter or similar. Or to just mess up a picture completely. That’s always fun, too.

Did I miss any? What’s your most used shortcut?

How to restart Bluetooth (blued) on a Mac

Update February 2016: If you’re on Mac OS X El Capitan or newer, please follow these steps to reset your bluetooth module instead.

Update March 2016: If you’re getting the “Bluetooth Not Available” error, please follow this guide instead: Bluetooth Not Available Mac OS X Problem

apple-bluetooth-illustration-old Sometimes when my computer runs out of battery, and Bluetooth devices are still connected, I can’t reconnect the devices when the computer is alive again. It seems to be a bug in OS X 10.6 that, besides not letting you reconnect the devices, also makes it impossible to restart the Bluetooth service (which otherwise is the first thing to try if you ever have problems with connected devices).

In the menu bar it looks like you can’t turn off bluetooth, if you dig deeper and go into System Preferences you’ll find that BT is actually turned off and from there the checkbox to turn it on again won’t accept your clicks.

After getting annoyed by this over and over again for the past few months or so, and with no OS X updates fixing the problem, I finally uncovered a simple way to force power cycle the process which seems to temporarily fix the problem for me. Here’s how you do it:

  1. Open the Activity Monitor (Applications > Utilities > Activity Monitor).
  2. Find the process called blued and select it. (Tip: sorting using the Process Name column makes this much easier to find.)
  3. With blued selected, click the Quit Process button at the top.
  4. A dialogue comes up asking you to confirm the action. Press Force Quit. Since this process is run by the “root” user, you will most likely have to enter the Administrator password to continue.
  5. Done! The process quits, and immediately starts itself again. You should now be able to turn Bluetooth on/off again, as well as connect your devices.

This was a guide on how to restart the Bluetooth process (“blued”) using the Activity Monitor in OS X Snow Leopard. I like to write these small basic tutorials for things I’ve had problems with myself, but then found a work-around for.

Do you have a better way of doing this? Let me know in the comments!

Review Of Chosr, A “Quicksilver” Startpage

This was news to me. I stumbled across this article about Chosr, a web based command like interface that works just like Quicksilver. (Read more about Quicksilver here.) The idea is that as soon as you open a new tab in your browser, the startpage (Chosr) appears and lets you type in what you want to do next. This alleviates the problem of always changing input medium (keyboard/mouse), and you can do more just using the keyboard.

Let’s take an example. You are watching the election closely, and want to see his latest ad that aired on several TV stations yesterday. Normally you would open a new tab, move your cursor to the address field, click, type in “youtube.com”, wait for it to load, move your cursor to the search field, type in “obama ad”, press enter and wait for the search results, click your preferred video, wait for it to load, then watch it. (I’m fully aware that there are several other ways to speed up this process, I’m using search keywords myself, for instance.)

If you were using Chosr though, you would do the following. Open up a new tab, type in “obama ad”, tab to the next box, type youtube, hit enter to load the list of results, then enter again to play the video. A much faster process, just because you don’t have to go back and forth from the keyboard and the mouse.

You don’t even have to sign up to give it a test run. Just go to www.chosr.com and take it for a spin! They also have a bunch of tremendous videos that teach you about the possibilities of the startpage interface.

Mac OS X Mail Problem: Attached Images Show Up Embedded In Outlook & Other Clients

I’ve had this problem for a while, that Mac OS X Mail (the native mail client in OS X) sends emails that other email clients don’t recognize as attachments, but as embedded pictures. This has been really frustrating, because if I’m sending an image to a client that needs to be saved on the client’s computer, he or she is unable to do so because the image is not a “real attachment”.

So, here are the facts: Wether an image is embedded in the email or not, it’s still an attachment. Thus, OS X Mail does nothing wrong when it embeds the image, other clients simply doesn’t want to understand that it’s still an attachment. The clients (read: “Outlook”) offer no way to save the image other than to right click it inside the email, but that only generates a .bmp that’s scaled down to the email size in pixel width.

Please note that it doesn’t matter if you click the Attachment button in the main taskbar or simply drag the images to the email body.

The solution:
The reason my images were getting embedded was because I was using some signatures with colors in them. As soon as you set the font, a color or similar, Mail turns the email into a “Rich Text” email, which basically means it’s a HTML email. So when you attach images to such an email, Mail generates an tag for that image, thus embedding it into the email itself. You can avoid this easily by just using Plain Text emails (see screenshot).

You can also try to simply don’t use any formatting in the email, including your signature.

Hope this helps. 🙂

Tips on Using the Outline CSS Property

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

Get perfect Web 2.0 16x16px icons quickly!

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

  • Facebook: favicon
  • Last.fm: favicon
  • CNN: favicon
  • Yahoo!: favicon
  • Twitter: favicon

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

  1. Enter root web adress in your browsers adress field: http://www.sitename.com
  2. Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
  3. Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

Flash Movie Controls – Play/Pause Button

I’m not very experienced in Flash. I can do basic movies with tweens, some playback buttons and maybe one or two animations, but that’s pretty much it. For a recent project however, I had to do a pause button.

Now this might seem like an easy task, but it isnt. A pause button must both pause and play the video. I looked around the web for some easy solutions, but couldn’t come up with anything useful (although I’m sure there are guides for it out there, I just didn’t look hard enough..). This is what I came up with:

How to create a Play/Pause button in Flash

  1. Create a movieclip called “playpause”. Put this movieclip anywhere in your main movie.
  2. Create a button in this movieclips first frame, call this button “pause”.
  3. Now go to frame two, create a keyframe and another button, call this one “play”.
  4. Create another layer, call this layer “script”. Put the marker in the first frame and open Frame Actions. Type in “stop();”. Create another keyframe, and do the same thing again.
  5. The buttons need some actionscripting too to be able to work. They need to both make the other button display and to play and pause our movie, which is the main target. I found a way to do this really easily. Click the button “pause”, and open Button Actions. Then type in:

on (release) {
gotoAndStop(2);
_parent.stop();
}

The first line displays the play button, the other one pauses the main movie. Select the other button, “play”, and type in:

on (release) {
gotoAndStop(1);
_parent.play();
}

Save the document, press Command+Enter (PC: CTRL+Enter) and make sure it works.

I hope you found the guide useful! Please leave a comment below and let me know what you thought.