Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for the ‘CSS’ Category

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 »

Link Styles – Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatieren – Teil 2

Posted by sura1 - 3. März 2009

silver031Bookmark and Share

Link Styles mit CSS – Teil 2

linkstyles2

Sie surfen auf einer Webseite mit sehr viel Text und mehreren Links und haben dabei das Problem, dass diese nur sehr schlecht oder aber überhaupt nicht vom Text zu unterscheiden sind.

Ich stoße immer wieder auf Blogs und Webseiten, welche zum Beispiel die Hyperlinks farblich überhaupt nicht anders darstellen. Was folgt daraus? Ist der Inhalt auch noch so interessant – solch eine Webseite wird sehr schnell wieder verlassen..

Ich möchte Ihnen hier in einer 3-teiligen Serie zeigen, wie Sie ganz einfach und ohne Einsatz von Grafiken Ihre Links so formatieren, dass diese bereits auf den ersten Blick vom übrigen Text unterschieden werden können.

   Fertige Beispiele ansehen
       demo2

Vorgangsweise:

Ich setze in meinen Beispielen so genannte Hover-Links ein. Das sind Links, die beim Drüberfahren mit der Maus ihre Farbe verändern. Von dieser Möglichkeit wird im Web rege Gebrauch gemacht. Ein Link kann bei Mausberührung die Unterstreichung verlieren oder bei nicht unterstrichenen Links sie annehmen, die Schrift kann vergrößert werden, fette oder kursive Buchstaben erscheinen und so weiter…..

Sehen Sie meine 10 fertigen Links im folgenden kurzen Video (30 Sekunden – 700 KB)

k-linkstyle2_video1

Link Styles mit CSS – Teil 2 (10 Beispiele)

Farbe der Links in den 10 Bespielen:

Grundfarbe: a {color: #0c7fce;}

Nummer 1 – 4

Hintergrundfarbe hinzufügen, Unterstreichung (hinzugeben, entfernen)

linkstyle2_1

Nach der Mausberührung sehen die obigen 4 Links wie folgt aus:

 1
/* adds background, underline */
    a.add-background-underline:hover {background: #ffdeeb;}
 2
/* adds background, no underline */
    a.add-background-no-underline {text-decoration: none;}
    a.add-background-no-underline:hover {background: #ffdeeb;}
 3
 /* adds background, removes underline */
    a.add-background-remove-underline:hover {background: #ffdeeb;
    text-decoration: none;}
 4
/* adds background, adds underline */
    a.add-background-add-underline {text-decoration: none;}
    a.add-background-add-underline:hover {background: #ffdeeb;
    text-decoration: underline;}

Nummer 5 – 8

Hintergrundfarbe, Wechsel der Schriftfarbe und Unterstreichung (oder nicht)

linkstyle2_2

Nach der Mausberührung sehen die Beispiele 5 bis 8 wie folgt aus:

 5
/* with background, changes color, underline */
    a.background-change-color-underline {background: #ffdeeb;}
    a.background-change-color-underline:hover {color: #ff0066;}
 61
/* with background, changes color, no underline */
    a.background-change-color-no-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-no-underline:hover {color: #ff0066;}
 71
/* with background, changes color, removes underline */
    a.background-change-color-remove-underline {background: #ffdeeb;}
    a.background-change-color-remove-underline:hover {color: #ff0066;
    text-decoration: none;}
 8
/* with background, changes color, adds underline */
    a.background-change-color-add-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-add-underline:hover {color: #ff0066;
    text-decoration: underline;}

Nummer 9 – 10

Wechsel Hintergrundfarbe, keine Unterstreichung

linkstyle2_3

Fahren Sie mit der Maus über die beiden Links und Sie sehen folgendes Ergebnis:

 9
/* changes background, no underline */
    a.change-background-no-underline {padding: 2px; background: #ffe300;
    color: #000;  text-decoration: none;}
    a.change-background-no-underline:hover {background: #ff0066;}
 101
 /* changes background, no underline */
    a.change-background-no-underline-bold {padding: 2px; background: #ffe300;
    color: #000; font-weight: 700; text-decoration: none;}
    a.change-background-no-underline-bold:hover {background: #ff0066;}
   Fertige Beispiele ansehen
       demo2

Originalartikel:

gradient11

Ausführliche Informationen zum Thema:

http://de.selfhtml.org/html/verweise/definieren.htm#gestalten
http://de.selfhtml.org/html/verweise/anzeige/a_href_css.htm
http://www.css4you.de/hover.html
http://www.css4you.de/example/hover.html

Ähnliche Artikel: 
Link Styles Teil 1 - Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatiern
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
Abgerundete Ecken, Balkendiagramm mittels CSS
Bilder im Fließtext
Bildunterschriften in XHTML
XHTML/CSS-Übungen: Formulare
Lesehilfe gestalten mit CSS
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

Posted in CSS | Verschlagwortet mit: , , , , , , , , , , , , , | 1 Comment »

Link Styles – Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatieren

Posted by sura1 - 24. Februar 2009

februar_24
Bookmark and Share

Link Styles mit CSS – Teil 1

Sie surfen auf einer Webseite mit sehr viel Text und mehreren Links und haben dabei das Problem, dass diese nur sehr schlecht oder aber überhaupt nicht vom Text zu unterscheiden sind.

Ich stoße immer wieder auf Blogbetreiber, welche zum Beispiel die Hyperlinks überhaupt nicht farblich anders darstellen. Was folgt daraus? Ist der Inhalt auch noch so interessant – so eine Webseite wird auf der Stelle wieder verlassen..

Ich möchte Ihnen hier in einer 3-teiligen Serie zeigen, wie Sie ganz einfach und ohne Einsatz von Grafiken Ihre Links so formatieren, dass diese bereits auf den ersten Blick vom übrigen Text unterschieden werden können.

link_styles_1

[Fertige Beispiele ansehen:  Grafik anklicken!]

Sehen Sie dazu auch folgendes Video:

linkstyles1_video

Ich setze in meinen Beispielen so genannte Hover-Links ein. Das sind Links, die beim Drüberfahren mit der Maus ihre Farbe verändern. Von dieser Möglichkeit wird im Web rege Gebrauch gemacht. Ein Link kann bei Mausberührung die Unterstreichung verlieren oder bei nicht unterstrichenen Links sie annehmen, die Schrift kann vergrößert werden, fette oder kursive Buchstaben erscheinen und so weiter…..

Farbe der Links in den 6 Beispielen:

Grundfarbe: a {color: #0c7fce;}

a) Unterstreichung entfernen:

 removes_underline
/* removes underline */
    a.remove-underline:hover {text-decoration: none;}

b) Unterstreichung hinzufügen:

 adds_underlinde
/* add underline */
    a.add-underline {text-decoration: none;}
    a.add-underline:hover {text-decoration: underline;}

c) Wechsel der Schriftfarbe, Unterstreichung:

 changes_color_underline
/* changes color, underline */
    a.change-color-underline:hover {color: #ff0066;}

d) Wechsel der Schriftfarbe, keine Unterstreichung:

 changes_color_no-underline
/* changes color, no underline */
    a.change-color-no-underline {text-decoration: none;}
    a.change-color-no-underline:hover {color: #ff0066;}

e) Wechsel der Schriftfarbe, Entfernung der Unterstreichung:

 changes_color_removes_underline
/* changes color, removes underline */
    a.change-color-remove-underline:hover {color: #ff0066; text-decoration: none;}

f) Wechsel der Schriftfarbe, Unterstreichung hinzufügen:

 changes_color_adds_underline
/* changes color, adds underline */
    a.change-color-add-underline {text-decoration: none;}
    a.change-color-add-underline:hover {color: #ff0066; text-decoration: underline;}
 Fertige Beispiele ansehen:
demo2
gradient11

Ausführliche Informationen zum Thema:

http://de.selfhtml.org/html/verweise/definieren.htm#gestalten
http://de.selfhtml.org/html/verweise/anzeige/a_href_css.htm
http://www.css4you.de/hover.html
http://www.css4you.de/example/hover.html

Ähnliche Artikel: 
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
Abgerundete Ecken, Balkendiagramm mittels CSS
Bilder im Fließtext
Bildunterschriften in XHTML
XHTML/CSS-Übungen: Formulare
Lesehilfe gestalten mit CSS
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

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

Mit einer Grafik und einigen CSS-Befehlen eine Datums-Anzeige gestalten

Posted by sura1 - 9. Februar 2009

februar_09

Bookmark and Share

Wie Sie mit einer Grafik und einigen wenigen CSS-Befehlen eine Datums-Anzeige gestalten können

Auf der Webseite www.templamatic.com habe ich in der Rubrik CSS Bits – Vol 2 – Date Stamps einige interessante Beispiele gefunden, wie Sie mit ein wenig CSS schöne Datums-Stempel (Date Stamps) formatieren können.

Alle Beispiele sind frei skalierbar. Wenn Sie die Schriftgröße verändern, ändert sich dadurch auch die Größe der Datums-Stempel.

Ich habe die Beispiele ein wenig umgestaltet und bearbeitet und möchte Ihnen hier das fertige Ergebnis vorstellen:

   Fertiges Beispiel: Zip_Datei (34,3KB)
demo2 button1

Sie sehen in der Demo insgesamt 6 verschiedene Date-Stamps, welche ich nun einzeln näher erläutern möchte. Ich stelle Ihnen jeweils den HTML-Code und die CSS-Befehle vor und ergänze diese einleitend mit der entsprechenden fertigen Datums- Grafik:

Beispiel 1:

 calendar1
HTML-Quellcode:
<div class="date1">
<div class="month">JUN</div>
<div class="day">24</div>
</div>
CSS:
.date1{ width:60px;
           height:70px;
           background:url(images/date1bg.gif) no-repeat;
           color:#fff;
           font-weight:700;
}
.date1 .month{
           width:100%;
           text-align:left;
           position:relative;
           left: 13px;
           top: 10px;
}
.date1 .day{
          width:100%;
          text-align:center;
          position:relative;
          top:12px;
          font-size:28px;
}

Beispiel 2:

 calendar2
HTML-Quellcode:

<div class="date2">
<div class="month">SEP</div>
<div class="day">13</div>
</div>
CSS:
.date2{   width:60px;
	 height:70px;
	 background:url(images/date2bg.gif) no-repeat;
	 color:#363636;
	 font-weight:700;
}
.date2 .month{
             width:60px;
	      padding-left:13px;
	      position:relative;
	      top:10px;
}
.date2 .day{
        width:62px;
	 padding-left: 12px;
	 position:relative;
	 top:10px;
	 font-size:28px;
}

Beispiel 3:

 calendar3
HTML-Quellcode:
<div class="date3">
April 26th, 2008 - Posted at: 7:42pm
</div>
CSS:
.date3{
        width:280px;
	 line-height:28px;
	 padding-left:15px;
	 background:url(images/date3bg.gif) no-repeat;
	 color:#808080;
	 font-weight:700;
	 border-right:1px solid #C8C8C8;
}

Beispiel 4:

 calendar4
HTML-Quellcode:
<div class="date4">
<div>December 14th, 2008 - Posted at: 12:22pm</div>
</div>
CSS:
.date4{
        width:330px;
	 height:25px;
	 padding-left:15px;
	 background:url(images/date4bg.gif) no-repeat;
	 color:#005e20;
	 font-weight:700;
}
.date4 div{
	 line-height:25px;
	 background:url(images/date4bgcap.gif) no-repeat;
	 background-position:top right;
}

Beispiel 5:

 calendar5
HTML-Quellcode:

<div class="date5">
<div class="month">JAN</div>
<div class="day">06</div>
</div>
CSS:
.date5 {
        width:64px;
	 height:73px;
	 background:url(images/date5bg.gif) no-repeat;
	 font-weight:700;
	 padding-left:2px;
}
.date5 .month {
          width:100%;
          text-align:center;
          position:relative;
          top:14px;
          color:#fff;
}
.date5 .day {
          width:100%;
          text-align:center;
          position:relative;
          top:14px;
          font-size:28px;
          color:#e3ddc3;
}

Beispiel 6:

 calendar6
HTML-Quellcode:

<div class="date6">
<div class="month">AUGUST</div>
<div class="day">17</div>
</div>
CSS:
.date6 {
         width:114px;
	  height:67px;
	  background:url(images/date6bg.gif) no-repeat;
	  font-weight:700;
	  color:#fff;
}
.date6 .month {
          width:105px;
          text-align:center;
	   position:relative;
	   top:14px;
}
.date6 .day {
          width:105px;
          text-align:center;
	   position:relative;
	   top:13px;
	   font-size:28px;
}
   Fertiges Beispiel: Zip_Datei (34,3KB)
demo2 button1

Ähnliche Artikel:

Free Daily Calendar Icons – Kostenlose Kalender Icons für den täglichen Gebrauch
29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Free CSS Templates: mehr als 11.000 kostenlose Webseitenvorlagen
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen

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

Pixel in EMs umrechnen mit dem EmChart Converter

Posted by sura1 - 9. Februar 2009

februar_09
Bookmark and Share

Pixel in EMs umrechnen mit dem EmChart Converter

http://aloestudios.com/code/emchart/

picture-1

Andy Ford hat am 8. Feber 2009 auf der Webseite Aloe Studios eine tolle „Pixel in EMs umrechnen – Tabelle“ („EmChart pixels to EMs lookup table“) erstellt.

Demo ansehen: Aloe Studios/EMChart

Sie können die Umrechnungstabelle online ansehen oder aber auf Ihren PC downloaden.

gradient5

Ähnliche Artikel:

www.pxtoem.com – Onlinetool, um Pixel in EMs umzuwandeln
29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Free CSS Templates: mehr als 11.000 kostenlose Webseitenvorlagen
Standard-Buttons in HTML definieren
CSSplay: Inline links – block styling
3D-Wirkung mit CSS: Schatteneffekte für Fotos und Grafiken

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