Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Was sollen wir auf dem Mars?

Posted by sura1 - 16. April 2009

april16
Bookmark and Share

Alpha Centauri: Sendereihe auf BR-Alpha

Sterngucken mit Professor Harald Lesch

Geschichtenerzählen und Astrophysik – das sind seine beiden großen Leidenschaften: Dr. Harald Lesch ist Professor für theoretische Astrophysik an der Uni München und unterrichtet Naturphilosophie an der Hochschule für Philosophie S.J. in München. Er ist Mitglied der Kommission „Astronomie in Unterricht und Lehramt“. Seine Hauptforschungsgebiete sind kosmische Plasmaphysik, Schwarze Löcher und Neutronensterne.

Ausführliche Informationen zum Moderator: hier (!)

Gibt es Außerirdische? Wie dünn war die Ursuppe? Und wie sieht eigentlich die Zukunft des Universums aus? Manchmal wissen nur Experten wie der Astrophysiker Harald Lesch weiter.

Folge 90: Was sollen wir auf dem Mars?

[Video ansehen: Link oder Screenshot anklicken]

BR-Online: Was sollen wir auf dem Mars?

wassollenwiraufdemmars

Posted in Alpha Centauri | Verschlagwortet mit: , , , , , , , , , , , | Leave a Comment »

Woher kommt unser Wasser?

Posted by sura1 - 16. April 2009

april16
Bookmark and Share

Alpha Centauri: Sendereihe auf BR-Alpha

Sterngucken mit Professor Harald Lesch

Geschichtenerzählen und Astrophysik – das sind seine beiden großen Leidenschaften: Dr. Harald Lesch ist Professor für theoretische Astrophysik an der Uni München und unterrichtet Naturphilosophie an der Hochschule für Philosophie S.J. in München. Er ist Mitglied der Kommission „Astronomie in Unterricht und Lehramt“. Seine Hauptforschungsgebiete sind kosmische Plasmaphysik, Schwarze Löcher und Neutronensterne.

Ausführliche Informationen zum Moderator: hier (!)

Gibt es Außerirdische? Wie dünn war die Ursuppe? Und wie sieht eigentlich die Zukunft des Universums aus? Manchmal wissen nur Experten wie der Astrophysiker Harald Lesch weiter.

Folge 89: Woher kommt unser Wasser?

[Video ansehen: Link oder Screenshot anklicken]

BR-Online: Woher kommt unser Wasser?

woherkommtunserwasser

Posted in Alpha Centauri | Verschlagwortet mit: , , , , , , , , | Leave a Comment »

Sex bei Tempo 123 km/h kostet Norweger Führerschein

Posted by sura1 - 16. April 2009

april16
Bookmark and Share

Besuchen Sie doch auch meine neue Webseite Suras Weblog, wo ich seit Mitte Feber 2010 über Tipps und Tricks rund um Webdesign, Grafik und Internet blogge.

Suras Weblog


Sex bei Tempo 123 km/h kostet Norweger Führerschein

sex-im-auto

Sex auf der Autobahn bei Tempo 123 hat einen Norweger zu Ostern den Führerschein gekostet. Wie die Zeitung „Drammens Tidende“ am Montag berichtete, war eine Polizeistreife am Vortag auf den Wagen des Mannes aufmerksam geworden, weil er die zulässige Geschwindigkeit von 100 Stundenkilometern zwischen Asker und Drammen bei Oslo deutlich überschritt. Als die zwei Streifenbeamten das Auto verfolgten, entdeckten sie, dass eine Frau auf dem Schoß des Mannes saß und beide sich heftig bewegten.

sex-im-auto2

„Sie hatten Geschlechtsverkehr“, berichtete Tor Stein Hagen von der Einsatzzentrale Sondre Buskerud. Das habe erhebliche Gefahren erzeugt, weil der Wagen „sichtlich ins Schlingern kam“.
Die Beamten konnten als Beweis für ihre Beobachtungen eindeutige Filmaufnahmen vorweisen. Sie stoppten das Paar nach knapp einem Kilometer. Der 28 Jahre alte Mann am Steuer musste seinen Führerschein sofort abgeben und den Fahrersitz seiner 21-jährigen Gefährtin allein überlassen.

Posted in Humor | Verschlagwortet mit: , , , , , , , , , , , | 14 Comments »

Kostenlose 3-spaltige CSS-Layouts auf CSSplay – Free 3-column-layouts

Posted by sura1 - 15. April 2009

april15
Bookmark and Share

3-spaltige CSS-Layouts auf CSSplay

Der ‚CSS-Papst‘ Stu Nicholls von CSSplay stellt in seinem Artikel ‚Three Columns – Seven choices‘ vom 4. Februar 2009 die am meisten nachgefragten 3-spaltigen CSS-Layouts vor.

Alle 7 Beispiele werden alleine mit dem Einsatz von Hintergrund-Farbe formatiert und beinhalten keine Grafiken. Alle 3 Spalten behalten immer die gleiche Höhe, ganz egal, wieviel Text/Content auch eingefügt wird.

Die vorgestellten Beispiele wurden in folgenden Browsern erfolgreich getestet: IE6, IE7, Firefox, Opera, Safari(PC) und Chrome.

Beispiele ansehen: Layouts anklicken!

flex_flex_flex  fix_fix_flex
flex_fix_fix fix_flex_flex flex_fix_flex
flex_flex_fix

Posted in Free CSS Layouts | Verschlagwortet mit: , , , , , , , , , , | Leave a Comment »

7 Beispiele, wie Sie mit CSS schöne Überschriften im Headbereich von Webseiten gestalten können

Posted by sura1 - 14. April 2009

april14
Bookmark and Share

7 Beispiele, wie Sie mit CSS schöne Überschriften im Headbereich von Webseiten gestalten können

Basierend auf dem Artikel 10 Examples of Beautiful CSS Typography and how they did it… von Ross Johnson in seinem Blog www.3point7designs.com/blog vom 2. Juni 2008 möchte ich Ihnen zeigen, wie Sie alleine mit CSS wunderschöne und optisch sehr ansprechende Überschriften und Head-Bereiche gestalten können.

Ich habe mir die vorliegenden 10 Beispiele angesehen. 7 davon habe ich etwas bearbeitet – diese möchte ich Ihnen hiermit näher vorstellen:

Fertige Beispiele ansehen

Download Beispiele (*zip*-File: 5,35KB)

Beispiel Nummer 1:

beispiel1

HTML:

<div id="box1">
<h3>Kleine <span>Überschrift</span></h3>
<h2>Große Überschrift</h2>
</div>
<!-- end box1 -->
CSS:

/* ===============
    Beispiel 1 - Typography
    =============== */

   #box1 h3 {
       font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
   }
   #box1 h3 span { color: #c30; }

   #box1 h2 { font-family: times, Times New Roman, times-roman, georgia, serif;
	color: #444;
	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 51px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;
   }

Beispiel Nummer 2:

beispiel21

HTML:

<div id="box2">
<h2>Beispiel Überschrift</h2>
<p><span>Lorem ipsum dolor sit amet</span>, onsectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div> <!-- end box2 -->

CSS:

/* ===============
    Beispiel 2 - Typography
    =============== */

   #box2 h2 {
       font-family:Georgia,serif;
	color:#4E443C;
	font-variant: small-caps;
	text-transform: none;
	font-weight: 100;
	margin-bottom: 0;
   }
   #box2 p {
       font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
       font-size: 14px;
       margin-top: .5em;
       color: #666;
   }
   #box2 p span {
       font-family:Georgia,serif;
	font-size: .8em;
       font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px;
   }

Beispiel Nummer 3:

beispiel31

HTML:

<div id="box3">
<h2>Freitag, dem 6. Juni 2008</h2>
<h3>Lernen Sie, <em>die Kontrolle zu übernehmen.</em></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div> <!-- end box3 -->

CSS:

/* ===============
    Beispiel 3 - Typography
    =============== */

   #box3 h2 {
       font-family: times, Times New Roman, times-roman, georgia, serif;
       font-size: 48px;
       line-height: 40px;
       letter-spacing: -1px;
       color: #444;
       margin: 0;
       padding: 0;
       font-weight: 100;
   }
   #box3 h3 {
       font-family: times, Times New Roman, times-roman, georgia, serif;
       font-size: 28px;
       line-height: 40px;
       letter-spacing: -1px;
       color: #444;
       margin: 0;
       padding: 0;
   }
   #box3 p {
       font-family: times, Times New Roman, times-roman, georgia, serif;
       font-size: 14px;
       line-height: 20px;
       text-transform: uppercase;
       color: #444;
       margin: 0;
       padding: 0;
   }

Beispiel Nummer 4:

beispiel4

HTML:

<div id="box4">
<p>There used to be a blog around these parts of the intertubes. And t%u2019was glorious %u2014 full of
mindless blabber about Apple, Design, Typography, CSS, web design & the like%u2026</p>
<p id="tit"><span>I like the term Mac-man. I think I`ll make that my official work title...</span>
<a href="https://sura1.wordpress.com/">about an hour ago</a></p>
</div> <!-- end box4 -->

/* ================
    Beispiel 4 - Typography
    ================ */

   #box4 p:first-letter {
	text-transform: uppercase;
   }

   #box4 p { color: #424242;
	font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	width: 300px;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 145%;
	font-size: 14pt;
	font-variant: small-caps;
   }
   #box4 #tit {
       width: 500px;
       letter-spacing: 0;
   }
   #box4 p#tit span {
	 font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	 font-style: italic;
	 color: #424242;
        font-size: 12px;
        font-variant: normal;
	}
   #box4 p#tit a {
        font-style: normal;
	 font-variant: small-caps;
	 text-decoration: none; font-family: "Adobe Caslon Pro", "Hoefler Text",
       Georgia, Garamond, Times, serif;
	 color: #afafaf; font-size: 14px;
   }

Beispiel Nummer 5:

beispiel5

HTML:

<div id="box5">
<h3 class="timoni">14. April 2009</h3>
<h2 class="timoni">Notizen über %u201Cdie Relativitätstheorie von Albert Einstein%u201D</h2>
</div> <!-- end box5 -->

/* ===============
    Beispiel 5 - Typography
    =============== */

   #box5 .timoni {
        width: 300px;
   }

   #box5 h3.timoni {
        font-size: 12px; /* Resets 1em to 10px */
	 font-family: Georgia, 'Times New Roman', serif;
	 background: #fff;
	 color: #000;
	 margin: 20px auto;
	 text-align: center;
        font-weight: 100;
        text-transform: none;
   }

   #box5 h2.timoni {
        font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
	 font-weight: normal;
	 font-size: 1.25em;
	 letter-spacing: .2em;
	 line-height: 1.1em;
        margin: 20px auto;
	 text-align: center;
	 text-transform: uppercase;
	 color: #6a9ca7;
   }

Beispiel Nummer 6:

beispiel6

HTML:

<div id="box6">
<div id="ostern">
<h2>Sonntag nach Ostern: Ende der Feiern</h2>
<p>Auferstehung Jesu Christi</p>
</div> <!-- end ostern -->
</div> <!-- end box6 -->

/* ===============
    Beispiel 6 - Typography
    =============== */

   #box6 #ostern {
         width: 325px;
         text-align: center;
         margin: 20px;
   }

   #box6 h2 {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:24px;
	 margin-top: 5px;
	 margin-bottom: 0px;
	 letter-spacing: 0;
	 text-align: center;
	 font-weight: normal;
	 color: #222;
	 text-transform: none;
   }

   #box6 p {
       font-family: "Lucida Grande", Tahoma;
	font-size: 10px;
	font-weight: lighter;
	font-variant: normal;
	text-transform: uppercase;
	color: #666666; margin-top: 10px;
	text-align: center!important;
	letter-spacing: 0.3em;
	margin-bottom: 40px;
   }

Beispiel Nummer 7:

beispiel7

HTML:

<div id="box7">
<div id="sample">
<h2>Nam quis massa. Fusce ultrices turpis at turpis. Pellentesque leo.
In hac habitasse platea dictumst. Etiam varius lacus sit amet odio.
Maecenas quis urna semper mi pellentesque tincidunt.</h2>
<h3>Nr. 4</h3>
<p>%u201CDr. Fredric J. Baur was so proud of having designed the container for
Pringles potato crisps that he asked his family to bury him in one.%u201D Enough said. [Via Unbeige]</p>
</div> <!-- end sample -->
</div> <!-- end box7 -->

 /* ================
      Beispiel 7 - Typography
      ================ */

   #box7 #sample {
        width: 375px;
        margin-left: 50px;
   }
   #box7 h2 {
       font-family: Georgia, serif;
	color:#381704;
	font-size:10px;
	letter-spacing:0.1em;
	line-height:200%;
	text-align:center;
	padding-top:11px;
	font-weight: 100;
	text-transform: uppercase;
   }
   #box7 p {
       font-family:georgia,serif;
	color:#381704;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	padding:0px;
    }
   #box7 h3 {
        font-family:georgia, serif;
	 color:#3B200F;
	 font-size:16px;
	 font-weight:bold;
	 line-height:125%;
	 text-align:center;
	 background-image: url(divider_quips_orange.gif);
	 background-position: 0% 100%;
	 background-repeat: no-repeat;
    }

Fertige Beispiele ansehen

Download Beispiele (*zip*-File: 5,35KB)

Posted in CSS | Verschlagwortet mit: , , , , , , , , , , , , , , , , , , , , | Leave a Comment »