PHP + CSS Style Sheets + rand() = cooles Webdesign

Nur noch was kleines mit PHP und CSS für heute, bevor ich mich ins Bett schmeiße. Vor einiger Zeit habe ich mal eine Website für einen Jugendgottesdienst in Leipzig gebastelt. Heute möchte ich euch ein kleines Feature daraus vorstellen. Wenn ihr euch die Seite anseht werdet ihr beim zweiten Besuch merken, dass sich das Guestbook verändert hat. Ja richtig, die Wolken sind nun anders positioniert. Außerdem wird ab bestimmter Textlänge ein anderes Hintergrundbild gewählt (je 3 Varianten pro Kommentarlänge). Ganz schön tricky, oder? Doch das lässt sich alles ganz einfach über PHP + CSS Style Sheets (Inline Styles) realisieren.

Den Codeschnippsel lass ich euch mal da und wie es aussieht könnt ihr euch ja live ansehen.

CSS + PHP und ein Stückchen HTML:


<?php
while ($guestbook_output = mysql_fetch_assoc($result)) {
/*Hintergrundbild auswählen*/
switch ($guestbook_output["lenght"]) {
  case($guestbook_output["lenght"] < 50): $cloud = rand(1,3); break;
  case($guestbook_output["lenght"] < 220): $cloud = rand(4,6); break;
  case($guestbook_output["lenght"] < 350): $cloud = rand(7,9); break;
  case($guestbook_output["lenght"] < 500): $cloud = rand(10,12); break;
  default: $cloud = rand(13,15);
  }
  switch ($cloud) {
  /*Höhe der Table je Hintergrundbild. Ist bisschen dreckig, lässt sich aber für die vertikale Zentrierung nicht anders lösen...*/
  case 1 : $cloudheight = '73';break;/*todo*/case 2 : $cloudheight = '60';break;/*todo*/
  case 3 : $cloudheight = '60';break;/*todo*/
  case 4 : $cloudheight = '115';break;
  case 5 : $cloudheight = '115';break;
  case 6 : $cloudheight = '110';break;
  case 7 : $cloudheight = '213';break;
  case 8 : $cloudheight = '200';break;
  case 9 : $cloudheight = '205';break;
  case 10 : $cloudheight = '230';break;
  case 11 : $cloudheight = '238';break;
  case 12 : $cloudheight = '245';break;
  case 13 : $cloudheight = '305';break;/*todo*/
  case 14 : $cloudheight = '303';break;/*todo*/
  case 15 : $cloudheight = '310';break;/*todo*/
  }
  /*Position vom linken Rand*/
  if ($cloud < 13) $rand_margin = rand(0, 360);
  else $rand_margin = rand(0, 275);
  ?>
  <!-- Output, CSS mit generiertem PHP -->
  <div class="guestbook_entry cloud<?php echo $cloud; ?> style="margin-left:<?php echo $rand_margin; ?>px;">
  <table>
  <tr>
  <td height="<?php echo $cloudheight; ?>">
  <span><?php echo ($guestbook_output["author"]); ?></span>
  <span><?php echo $guestbook_output["date"]; ?></span>
  <p><?php echo ($guestbook_output["comment"]); ?></p>
  </td>
  </tr>
  </table>
  </div>
  <?php } ?>  

Hoffe ihr fühlt euch inspiriert.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.