Today’s pure-css challenge: Duplicate this dribbble.com/shots/235024-F…. My attempt so far jsfiddle.net/taybenlor/da4Z…

Of course the challenge was instantly accepted

Source Image: Here
My Result: Here

I think pretty darn close using only pseudo elements, the only thing missing is the striping on the inner wall.

I challenge anyone to get closer!

Project Description: Create a complete, user-centric, database driven website designed to draw consumers attention and drive clients to the business.

Visit site

Telstra – Internet
Name: Telstra Internet
APN: Telstra.internet
Proxy:
Port:
Username:
Password:
Server:
MMSC:
MMS Proxy:
MMS Port:
MCC: 505
MNC: 01
Authentication Type: CHAP
APN Type: default

Telstra – Internet
Name: Telstra Internet
APN: Telstra.wap
Proxy: 10.1.1.181
Port: 80
Username:
Password:
Server: wap.telstra.com/wap
MMSC:
MMS Proxy:
MMS Port:
MCC: 505
MNC: 01
Authentication Type: CHAP
APN Type: default

Telstra – MMS
Name: Telstra MMS
APN: Telstra.mms
Proxy:
Port:
Username:
Password:
Server:
MMSC: http://mmsc.telstra.com:8002
MMS Proxy: 10.1.1.181
MMS Port: 80
MMS Protocol: WAP 2.0
MCC: 505
MNC: 01
Authentication Type: CHAP
APN Type: mms

The Method

The first step is to think about what we are trying to accomplish on the most basic level – from a list of buttons, allow the user to select only one. Therefore, it makes sense to use the HTML element designed to do exactly this, the radio input. Not only do radio inputs meet the requirements, they are 100% semantic for this purpose, they don’t require slow clunky javascript and still function as expected if the user has CSS turned off.

The HTML

The HTML is very simple, we create a form with some radio buttons.

The most important part of the code is that each radio input must have an associated label, and the label tag must come directly after the input tag.

Another thing to note is the unselectable="on" attribute on each label element. This attribute tells the browser not to let the user select the text contained with in this element. Making the labels act the same way button elements would.

The CSS

There are only two things to note in the CSS.

First is *[unselectable=on] { ... }. This picks up all elements that we have said we don’t want the user to be able to select text in. Since this in a HTML5 attribute, adding this in the CSS lets older browsers know what to do with it.

Second thing to notice is the input[type=radio]:checked+label selector. This selector says “Find any input tag, with type ‘radio’, that is checked; then select the label tag directly adjacent to it.” This is what allows us to style the depressed buttons and also why it is important that the label tag comes directly after the input tag.

Conclusion

This method of creating toggle buttons with radio inputs allows for, not only semantic websites, but also fast loading sites as we don’t have to download a chunk of Javascript, then wait for the DOM to load and render the page, then run through Javascript and re-rendering the page again. This is something I plan to implement in the future, as should anyone looking to create a well structured website.

The website (so far) did not use any images for styling what-so-ever, this was a feature I wanted to hang on to. So, alas, the breadcrumb navigation was designed without the arrows, but still with rounded corners and CSS gradients for the newer browsers. After reading Breadcrumb Navigation with CSS Triangles by Chris Coyier a great idea struck me; why not use a CSS transform to create the corners, not only will I still be able to use CSS gradients for the background, but the points of the arrows will be clickable and interact nicely together.

After some quick maths and a bit of debugging I came to a pretty decent solution.

As viewed in Chrome

HTML

CSS

Conclusion

As a proof of concept, it was completely successful.

The benefits were all there:

• Arrows with borders
• Background gradients
• Rounded corners
• No images

There are a few drawbacks though:

• Not 100% semantic
• Doesn’t fall back well with older browsers (will be fine with a bit of tweaking)
• Safari doesn’t support stop points on the gradients, so you need to trial and error to get the colors right
• The list-items are in reverse order in the list so they overlap correctly

With a small amount of tweaking to degrade elegantly for older browsers, this should prove perfect for the situation.

Todo

• Add a settings area to allow filtering.

Changelog

v1.0.0

• Initial release.

Project Description: Convert an existing website to a dynamic WordPress driven website.

Visit site

This satisfied my problem for a little while, but before long I wanted more functionality. This led me to creating a PHP script to call imagesnap and thus give me a web interface to the iSight camera. It all seemed to be working, my form was submitting and there were no PHP errors being thrown, but there was no file being created. I checked permissions, everything seemed fine. I SSHed in and ran imagesnap manually, everything worked fine. I googled for days but couldn’t find anything. I even scoured the source code of imagesnap to try to get some insight but to no avail.

Eventually I ran my PHP script from an SSH terminal to try to produce some sort of error and to my surprise everything worked fine, but back in the browser – nothing.

The next piece of the puzzle came whilst playing around imagesnap itself, apparently when it is executed as anyone but a regular user it does not find any devices. This meant when apache was calling the PHP who in turn was calling imagesnap, it was getting executed as the apache user and couldn’t find any devices to take the photo with. The fix was call the imagesnap as a regular user. The easiest way to do this is to set its owner to be a regular user and then set permissions to be set user ID on execution using chmod.

chown username imagesnap
chmod 4755 imagesnap

Hopefully this will be useful for anyone else trying something similar.

For those interested I still have a few things to fix up before posting this app.

This script currently only works on Linux and OS X with HandbrakeCLI somewhere in the PATH

Known Issues

• Issues ending before rip is complete. Fixed, but very poorly.

Todo

• Select titles as a command line argument.
• Impliment naming from a file.
• Set cache directory as a command line argument.
• Windows support.
• Optimization.

Changelog

v1.1.3

• Fixed broken program cause by last update.

v1.1.2

• Fixed issue with title caching.
• Re-enabled title caching and removed all warnings.
• Fixed an error where no DVD would cause an infinite loop.

v1.1.1

• Changed display of some prompts.
• Disabled title caching as it will fail when ripping from disks.

v1.1.0

• Now caches imdb lookups.
• Cache level argument added.
• Moved scanning for titles to it’s own function.

v1.0.1

• Minor spelling/wording/bug fixes.
• Fixed issue where in titles pulled from imdb did not decode entities.

v1.0.0

• Implimented the imdb naming system.
• Better argument parsing.
• Further argument control.
• Improved documentation.

v0.1.0

• Basic application and functionality.

Project Description: To design small and effective website to advertise from.

Visit site