Just to play around, I wanted to achieve the following input box look with pure CSS 3. Also to teach myself how box-shadow works.

I think I got pretty close.
Just to play around, I wanted to achieve the following input box look with pure CSS 3. Also to teach myself how box-shadow works.

I think I got pretty close.
Have chrome installed on your desktop and your android device.
Download Android SDK, unzip, double click on the exe installer
Add
\sdk\platform-tools
to your PATH environment variable
Enable USB debugging on your device.
On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.
On Android 4.0 and newer, it’s in Settings > Developer options.
On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number 7 times (this is fun!). Return to the previous screen to find Developer options.

Set up your computer to detect your android device.
If you’re developing on Windows, you need to install a USB driver for adb.
Find the driver for your android device e.g. https://motorola-global-portal.custhelp.com/app/answers/detail/a_id/88481
For more information, visit here.
Install the driver on your computer
Use a data usb cable to connect your android device to the computer
Once plugged in, there should be some prompts indicating that your device is ready to use
Open a cmd prompt and type adb devices, you should see something like:
List of devices attached
0A3D10E60D00500C device
Then enter command
adb forward tcp:9222 localabstract:chrome_devtools_remote
On your android device, visit a site under your chrome and under settings -> developer options -> Enable USB Web debugging

On your computer, launch http://localhost:9222 in your chrome browser, you should be able to see all of the tabs on your android device
The WordPress 3.6 Beta has been released, and users with a self-hosted WordPress installation can easily upgrade to it with the Beta Tester plugin. This is the first beta release, so it's not recommended for live sites, but plugin/theme developers and anyone with a keen eye for bugs are encouraged to try it out now.
Unlike previous WordPress Beta releases, this one is feature-complete, so everyone can focus entirely on reporting and fixing bugs without worrying about any incoming new features.
To add arrows for any boxes in CSS3 is relatively easy. You may use the border, absolute position along with the :before pseudo selector to add arrows in any directions.
To make a triangle with CSS border:
border: 20px solid transparent; /* box width for your triangle */ border-right-color: #fff; /* color for your triangle, the direct is opposite of what you want. For example, if you want a left pointing arrow, then set the right border color. */
To position the arrow, make sure the box container is positioned relative so the arrow may be absolutely positioned based on the box container
.box {
position: relative;
}
.box:before {
content: ' ';
height: 0;
position: absolute;
width: 0;
/* your arrow and the positioning css here */
}
You can generate the arrows using this tool.
I use the TinyNav jQuery plugin to transfer a list menu into a dropdown for mobile devices.
I notice when I resize my browser on my desktop, the TinyNav leaves kind of a nasty look. For example, after I resized my browser into mobile size like 450px wide, I have to refresh the page for the tinynav to take effect and then when I resize my browser back to the normal size, I may see the leftover TinyNav dropdown like:

To make tinynav more resize friendly, I implemented the following concept.
To detect mobile, I check if a certain layer is no longer display none. This way I let the CSS media query take full control of when it’s considered mobile. I don’t have to do any javascript detection. So it could be considered mobile just when you resize your browser window on your desktop. This is the concept I’m using; you may not like it but that’s ok.
My implementation also caches the tinyNav plugin so it doesn’t create a new dropdown every time you resize the window.
I spent some time to understand how border-image works in CSS3. It does take a bit of visualization to wrap your head around it. On top of that, they really look different in different browsers depend on the browsers’ rendering engine. This is the best tutorial I found on this topic.
I came up with three borders in the new theme I’m working on for wordpress. You can take a look and see whether your browser supports it. (Or you can run your browser against the CSS3 test.)
I’m trying to figure this out. Was the subject for this email intentional?
I hope he’s talking about pucca

- you know the character I use for my twitter account.
There is a remote chance he has seen my twitter account and is referring to that. But it’s not an avi. So what does he mean? I’m trying to think if I’ve shared any pucca avi lately or anywhere? I cannot think of anything.
- Is it possible it’s a mix up? He pasted some text he meant for another email as the subject?
- Or is it an extremely creative way to catch my attention?
Either way I’m replying. Whether I’m interested in the job is almost secondary. I just want to find out what the subject means.
Update, reply from Justin:
I found you using a service from Dice.com that aggregates people’s
various social networking profiles (LinkedIn, Google+, Facebook, etc)
and your profile was sporting the aforementioned avatar. I am a fan of
the show and thought that was cool.
….
Created by this wonderful artist
I made the set into a phpbb smiley pak you may install via your admin screen.
To install:
So one of the things I put into my new theme Tender Spring is the post thumbnail support. The theme handles the image that you set as post Featured Image on the post in a special way. It puts a circle around it and adds a leave. I’m sure it’s not a new concept but heck I thought of it while designing the theme so I want to share my new revelation!
the_post_thumbnail() doesn’t really give the flexibility I need because I don’t want the img tag but rather just the url for the post thumbnail file.
So here’s my template code:
/**
* Custom post thumbnail (featured image)
*/
function tenderSpring_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<div class="tenderSpring-post-thumbnail" style="background: url(' . wp_get_attachment_url( get_post_thumbnail_id($post_id) ) . ') no-repeat center center;background-size: 200px"><div class="tenderSpring-post-thumbnail-inner">' . $html . '</div></div>';
return $html;
}
add_filter( 'post_thumbnail_html', 'tenderSpring_post_image_html', 10, 3);
I wrapped two layers over the img.
My css looks like:
.tenderSpring-post-thumbnail {
width: 100px;
height: 100px;
border-radius: 50px;
float: left;
margin: 20px 20px 0 0;
}
.tenderSpring-post-thumbnail-inner {
background: url("images/postThumbnail.png") no-repeat right top;
width: 100px;
height: 100px;
}
img.wp-post-image {
display: none;
}
I made the img not display but used the background image from the first layer with border-radius to get the circle affect. The inner layer is used to overlay a background image on top of the outer layer.
![]()
This image is the leaf you see.
This technique depends on the CSS3 background-size & border-radius which should now be supported by your latest versions of FF, Chrome and even IE believe it or not.