Featured post

A responsive 2 row fluid layout with mobile view

A 2 (or multiple) row responsive fluid layout, one row has fixed width, all rows have same height, a margin is between rows.
It collapses in mobile resolutions.

The code is minimal, no freaky negative margins or paddings. Everybody should be able to use it.

DEMO:

Fluid width row

Your bones don’t break, mine do. That’s clear. Your cells react to bacteria and viruses differently than mine. You don’t get sick, I do. That’s also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We’re on the same curve, just on opposite ends.
(Text by http://slipsum.com)

Fixed width row

Change browser width to see it respond.
Continue reading

Show static google map image and link to map with marker

With this snippet you can show a static google map image for a specific location, which is linked to google maps and includes showing a marker in all views.
Don’t forget to change YOUR_GOOGLE_STATIC_MAPS_API_KEY to your api key, which you can get at https://console.developers.google.com by creating a server key and aactivate google maps for this account.


$arrContextOptions=array(
"ssl"=>array(
"verify_peer"=>false,
"verify_peer_name"=>false,
),
);
$address = urlencode("Kupferbergterrasse 10, 55116 Mainz");
$request = file_get_contents("https://maps.google.com/maps/api/geocode/json?address=" . $address . "&key=YOUR_GOOGLE_STATIC_MAPS_API_KEY&sensor=false", false, stream_context_create($arrContextOptions));
$json = json_decode($request, true);
$lat = $json['results'][0]['geometry']['location']['lat'];
$lng = $json['results'][0]['geometry']['location']['lng'];
$marker = "color:blue|label:ZIEL|".$lat.','.$lng;
echo '<a href="https://www.google.com/maps/place/'.$address.'"><img src="https://maps.googleapis.com/maps/api/staticmap?center='.$lat.','.$lng.'&zoom=14&size=600x300&markers='.$marker.'&key=YOUR_GOOGLE_STATIC_MAPS_API_KEY"></a>';

demo:

staticmap

Exercise for Frontend-Developer to test PHP-, CSS3- and HTML-skills.

Task: Create a slider from the entries of an an XML-File.

Design draft is here: http://pascha.org/aufgabe/slider.png

XML-File is here: http://pascha.org/aufgabe/comments.xml

Icons & Elements: http://pascha.org/aufgabe/pascha.org-aufgabe-icons.zip

Guidelines:
– You can use jQuery
– The entries in the XML are pointing to facebook or google, so the respective logo should be shown in the slider.
– The Slider should jump from the last to the first entry.
The slider should be draggable and use touchevents.
– The “Read more”-Button (“weiterlesen”) should be linked to the respective page.

Multiple step animation of an element with CSS only

If you want to move elements around the screen in multiple steps, you can use CSS animations for that.

Demo:

HOVER ME

Continue reading

Move/animate div or element to screen corner on click or hover with CSS only

If you want to move an element to a screen corner with CSS only, theres a simple Solution with CSS3.

Demo:

Continue reading