Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Posts Tagged ‘überschriften’

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 »

34 kostenlose Schriften für große und fettgedruckte Überschriften

Posted by sura1 - 7. April 2009

april72
Bookmark and Share

34 kostenlose Schriften für große und fettgedruckte Überschriften – 34 Free Fonts for Big, Bold Headlines

Auf der Webseite von DESIGNM.AG habe ich einen Artikel über 50+ Fonts For Big, Bold Headlines entdeckt.
Steven Snell stellt in seinem Bericht vom 21. Juli 2008 mehr als 50 verschiedene Schriften vor, mit welchen Sie schöne, große und fettgedruckte Überschriften in Webseiten gestalten können.

designmag_screenshot

Nachdem eine große Anzahl der vorgestellten Schriften nur gegen Bezahlung zu haben sind, habe ich mich dazu entschlossen, Ihnen nur jene Fonts/Schriften vorzustellen, welche Sie kostenlos downloaden können. Die genauen Lizenzbedingungen/Terms Of Use entnehmen Sie bitte den einzelnen Schriften.

34 Free Fonts for Big, Bold Headlines

Nevis

nevis

Gnuolane

gnuolane

Bebas

bebas

Museo

museo

Sling Bold

sling

Delicious Heavy

delicious

Mido

mido

Fontin

fontin

Liberation Serif

liberationserif

Liberation Sans

liberationsans

Coolvetica

coolvetica

Tuffy Bold

tuffybold1

Alte Haas Grotesk

altehaas1

Steelfish

steelfish

Headline

headline1

Old Sans Black

oldsansblack1

Hit the Road

hittheroad

Kenyan Coffee

kenyancoffee1

Tall Dark and Handsome

talldarkandhandsome

Engebrechtre

engebrechtre

Portishead Dummy

portisheaddummy

Optimus Princeps

optimus

Episode 1

episode1

Mashburn

mashburn

Boris Black Bloxx

borisblack

Long Tall Sally

longtallsally

Media Gothic

mediagothic1

Phrixus

phrixus

Old Republic

oldrepublic

Angleterre Book

angleterrebook

Imperator

imperator

River Avenue

riveravenue

Walkway Black

walkwayblack

Telegrafico

telegrafico

Posted in Fonts&Schriften | Verschlagwortet mit: , , , , , , , , | 1 Comment »