OMG! CSS3 can do anything

http://codepen.io/dylnhdsn/details/iphone/23


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Will take a look on my mac - ironically it doesn’t appear to work on my iPhone… Well the page doesn’t scale correctly anyway.

Nathan Garner
Senior Designer

+44 (0)1202 597 140
email@hidden
http://www.rla.co.uk

Sent from my iPhone

On 20 Jun 2012, at 20:10, “Walter Lee Davis” email@hidden wrote:

http://codepen.io/dylnhdsn/details/iphone/23


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
RLA - INDISPENSABLE IN WHAT WE DO
part of the mission
RLA is a trading name of RLA Group Ltd
Registered in England no: 3679160
If this email has found you by mistake, please do not share or reproduce any of its contents as they may be confidential or contain material subject to copyright. Instead let us know and delete the email immediately. This email does not necessarily represent the views of the RLA Group. Please consider the environment before printing.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 20 Jun 2012, at 20:12, Walter Lee Davis wrote:

http://codepen.io/dylnhdsn/details/iphone/23

Looks cool. Is it supposed to do anything?

Nothing happens in either Safari or Chrome on my system.

=o(

Heather


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s just a picture of an iPhone (look in the bottom pane of the page) but the entire thing is made out of CSS, no images used at all. It doesn’t do anything in particular, although that would be cool.

Walter

On Jun 21, 2012, at 3:11 AM, Heather Kavanagh wrote:

On 20 Jun 2012, at 20:12, Walter Lee Davis wrote:

http://codepen.io/dylnhdsn/details/iphone/23

Looks cool. Is it supposed to do anything?

Nothing happens in either Safari or Chrome on my system.

=o(

Heather


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 21 Jun 2012, at 15:30, Walter Lee Davis wrote:

It’s just a picture of an iPhone (look in the bottom pane of the page) but the entire thing is made out of CSS, no images used at all.

That is pretty cool. =o)

Heather


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It is pretty cool. On a note that seems related in my mind, has anyone
experimented with digitally coded images – that thing where instead of a
url link to an image there’s a bunch of coded gibberish… supposedly faster
response for regularly used images like navigation buttons and the like?


Ernie Simpson

On Thu, Jun 21, 2012 at 10:30 AM, Walter Lee Davis email@hiddenwrote:

It’s just a picture of an iPhone (look in the bottom pane of the page) but
the entire thing is made out of CSS, no images used at all. It doesn’t do
anything in particular, although that would be cool.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

has anyone experimented with digitally coded images

Are you referring to a QR code or something different?

Todd


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you mean a data() URL, I have, although there is a serious limit to the size of such beasties. IE (as usual) is the worst in this regard.

Walter

On Jun 22, 2012, at 1:55 PM, Ernie Simpson wrote:

It is pretty cool. On a note that seems related in my mind, has anyone
experimented with digitally coded images – that thing where instead of a
url link to an image there’s a bunch of coded gibberish… supposedly faster
response for regularly used images like navigation buttons and the like?


Ernie Simpson

On Thu, Jun 21, 2012 at 10:30 AM, Walter Lee Davis email@hiddenwrote:

It’s just a picture of an iPhone (look in the bottom pane of the page) but
the entire thing is made out of CSS, no images used at all. It doesn’t do
anything in particular, although that would be cool.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m showing my old-manliness here by hardly knowing what anyone else is
saying and refusing to google for directions – I think QR codes are those
scannable thingies? No not those. Maybe what Walter’s saying, a data code
thing.

I wonder how much longer before I can export my illustrator artwork as css
:slight_smile:


Ernie Simpson

On Fri, Jun 22, 2012 at 2:02 PM, Todd email@hidden wrote:

has anyone experimented with digitally coded images

Are you referring to a QR code or something different?

Todd


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What was the link please

Stu
Creative | artwork | event branding
07766546787

On 22 Jun 2012, at 19:02, Todd email@hidden wrote:

has anyone experimented with digitally coded images

Are you referring to a QR code or something different?

Todd


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you want to make one of these, make a little script like this one:

#!/usr/bin/env php
<?php
print(base64_encode(file_get_contents($argv[1])));
?>

Save that as data.php somewhere handy, and set it to be executable with the Terminal command

chmod +x data.php

Then again in terminal, you can call it like this:

./data.php path/to/file.jpeg

Path to file should be a relative path, relative to the location of data.php. You will get back a long string of random-looking text. Copy it exactly and paste it into the following CSS rule:

.icon {
	background-image: url('data:image/jpeg;charset=US-ASCII;base64,PASTE_HERE');
	background-position: center center;
	background-repeat: no-repeat;
}

Apply that rule to something you want to have that image as a background. Small is your watchword. Here’s way more detail about it: data URI scheme - Wikipedia

Walter

On Jun 22, 2012, at 2:05 PM, Walter Lee Davis wrote:

If you mean a data() URL, I have, although there is a serious limit to the size of such beasties. IE (as usual) is the worst in this regard.

Walter

On Jun 22, 2012, at 1:55 PM, Ernie Simpson wrote:

It is pretty cool. On a note that seems related in my mind, has anyone
experimented with digitally coded images – that thing where instead of a
url link to an image there’s a bunch of coded gibberish… supposedly faster
response for regularly used images like navigation buttons and the like?


Ernie Simpson

On Thu, Jun 21, 2012 at 10:30 AM, Walter Lee Davis email@hiddenwrote:

It’s just a picture of an iPhone (look in the bottom pane of the page) but
the entire thing is made out of CSS, no images used at all. It doesn’t do
anything in particular, although that would be cool.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Even easier, just go here: http://www.scalora.org/projects/uriencoder/

Upload your file, set the settings, get your URL back.

Walter

On Jun 22, 2012, at 2:31 PM, Walter Lee Davis wrote:

If you want to make one of these, make a little script like this one:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

sweet!


Ernie Simpson

On Fri, Jun 22, 2012 at 5:15 PM, Walter Lee Davis email@hiddenwrote:

Even easier, just go here: http://www.scalora.org/projects/uriencoder/

Upload your file, set the settings, get your URL back.

Walter

On Jun 22, 2012, at 2:31 PM, Walter Lee Davis wrote:

If you want to make one of these, make a little script like this one:


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options