Demo
Click on the screenshot below. Both mouse and keyboard navigation is functional.
Installing the Webkit greeter
You will first need the lightdm and lightdm-webkit-greeter packages. Xephyr is used for testing LightDM themes while logged in, so I'd install that as well
Arch Linux
Both packages can be installed from the AUR:
packer -S lightdm lightdm-webkit-greeter xorg-server-xephyr
When building lightdm, edit the PKGBUILD and change line 38 from --with-greeter-session=lightdm-gtk-greeter to --with-greeter-session=lightdm-webkit-greeter.
You'll also have to make the Webkit greeter the default greeter via a symlink:
# cd /usr/share/xgreeters/
# ln -s lightdm-webkit-greeter.desktop default.desktop
Ubuntu
Both packages are in the default repositories:
sudo apt-get install lightdm lightdm-webkit-greeter xserver-xephyr
Others
I've only really used Arch and Ubuntu, but I can imagine the instructions for other distros will vary only slightly.
Installing Bevel
You first have to edit the LightDM configuration file, which resides in /etc/lightdm/lightdm-webkit-greeter.conf. Change line 13 from webkit-theme=webkit (this might be different for Ubuntu) to webkit-theme=bevel.
Next, you have to clone the repo:
# cd /usr/share/lightdm-webkit/themes/
# git clone https://github.com/Blender3D/Bevel bevel
Finally, try out LightDM in test mode:
$ lightdm --test-mode