asabie | PHP-JavaScript-MySQL-htaccess-CSS Code-Snippets http://asabie.de PHP-JavaScript-MySQL-htaccess-CSS Code-Snippets Sun, 15 Apr 2012 09:28:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Verschwommener Text mit CSS3 http://asabie.de/verschwommener-text-mit-css3/ http://asabie.de/verschwommener-text-mit-css3/#comments Thu, 12 Apr 2012 14:35:22 +0000 Roland Köster http://asabie.de/?p=313 Mit CSS3 können Sie Texte verschwommen darstellen. Nutzen Sie den netten Effekt um Texte hervor zu heben und somit die Aufmerksamkeit darauf zu lenken.

<style type="text/css">
.verschwommen {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>

ein verschwommener Text

]]> http://asabie.de/verschwommener-text-mit-css3/feed/ 0 Netter CSS3 Farbband Effekt http://asabie.de/netter-css3-farbband-effekt/ http://asabie.de/netter-css3-farbband-effekt/#comments Thu, 23 Feb 2012 18:11:00 +0000 Roland Köster http://asabie.de/?p=308 Weiterlesen →]]> Ein netter Effekt, wenn man etwas neues ankündigen möchte. Das Farbband ist ein schöner hingucker und das alles ohne eine Grafikprogramm zu benutzen. Ein schnell einzubindender CSS-Code wertet die Seite gleich auf.

<style type="text/css">
.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}
</style>

hier der HTML-Code:

<div class="wrapper">
       <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

Demo:

NEWS

Quelle: http://jsfiddle.net

]]> http://asabie.de/netter-css3-farbband-effekt/feed/ 0 Aufbau einer HTML5 Seite http://asabie.de/aufbau-einer-html5-seite/ http://asabie.de/aufbau-einer-html5-seite/#comments Sun, 29 Jan 2012 12:36:44 +0000 Roland Köster http://asabie.de/?p=302 Weiterlesen →]]> Für alle die es noch nicht im Internet irgendwo gefunden haben. Deswegen habe ich auch nochmal aufgeführt wie aktuell der Aufbau einer HTML5 Seite ist. Der Quelltext darf gerne als Vorlage dienen um die Arbeit zu erleichtern. Als schaut es euch einfach mal an!

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Aufbau einer HTML5 Seite</title>
    <meta charset="UTF-8" />
  </head>
  <body>
      <header>
        <h1 class="beitrag-title">Es wird dich gl&uuml;cklich machen?</h1>
        <time class="date-update" datetime="2011-12-07 11:11:03-0400" pubdate>
          08-07-2010
        </time>
        <p class="author vcard">
            von <span class="aut">Asabie</span>
        </p>
      </header>
 
      <div class="beitrag-content">
          <p>...artikel text...</p>
          <p>...artikel text...</p>
       
          <figure>
            <img src="company.jpg" alt="Bild von der Firma" />
            <figcaption>Bild von der Firma unten, 400sq-ft apt.</figcaption>
          </figure>
 
          <p>...artikel text...</p>
          <p>...artikel text...</p>
 
          <aside>
            <h2>Bewerte den Artikel</h2>
            <ul>
              <li>Facebook</li>
              <li>Twitter</li>
              <li>Google+</li>
            </ul>
          </aside>
       
          <div class="b-content">
            <a href="foto-all.png">
              <img src="foto.png" alt="musterbild" />
            </a>
          </div>
 
          <p>...artikel text...</p>
          <p>...artikel text...</p>
       
          <a class="beitrag" href="http://unbekannt.de/">weiter</a>
      </div>
 
      <footer>
        <p>
          hier ein kleiner footer Text
        </p>
        <div class="source-org vcard copyright">
            Copyright 2010 <span class="cop">asabie.de</span>
        </div>
      </footer>
  </body>
</html>

]]> http://asabie.de/aufbau-einer-html5-seite/feed/ 0 Vergleich der Browser, wer kann was? http://asabie.de/vergleich-der-browser/ http://asabie.de/vergleich-der-browser/#comments Sun, 29 Jan 2012 12:12:05 +0000 Roland Köster http://asabie.de/?p=299 Wer wissen möchte ob sein Browser den aktuellen Anforderungen stand hält, der kann dies über die Seite “www.findmebyip.com” nachsehen. Hier findet Ihr einen kompletten Überblick über die Aktuellen Browser und was sie können!
Vergleich der Browser
Quelle: http://www.findmebyip.com

]]> http://asabie.de/vergleich-der-browser/feed/ 0 CSS3 dreht durch http://asabie.de/css3-dreht-durch/ http://asabie.de/css3-dreht-durch/#comments Sat, 28 Jan 2012 21:04:56 +0000 Roland Köster http://asabie.de/?p=278 Weiterlesen →]]> Mit CSS3 lassen sich nun fantastische Illusionen zaubern. Das wird in Zukunft viel Arbeit ersparen, denn man braucht nicht extra ein Bild zu erstellen wenn man einen schrägen Text anzeigen lassen möchte. Mit der Funktionen rotate von CSS3 lassen sich Objekte ruck zuck drehen. Schauen sie selbst!

<style type="text/css">
.drehen {
/*für  Safari */
-webkit-transform: rotate(-30deg);
/*für Firefox */
-moz-transform: rotate(-30deg);
/*für IE */
-ms-transform: rotate(-30deg);
/*für Opera */
-o-transform: rotate(-30deg);
/*für Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

ich drehe durch

]]> http://asabie.de/css3-dreht-durch/feed/ 0 Welcher Browser unterstützt CSS3 und HTML5 http://asabie.de/welcher-browser-unterstuetzt-css3-html5/ http://asabie.de/welcher-browser-unterstuetzt-css3-html5/#comments Sat, 28 Jan 2012 10:57:18 +0000 Roland Köster http://asabie.de/?p=269 Weiterlesen →]]> Welchen Browser muss ich nehmen um die Funktionen von CSS3 und HTML5 zu genießen? Die Frage lässt sich schnell beantworten. Auch wenn man mit seiner alten Version von Browser zufrieden ist weil er so stabil läuft, empfiehlt sich dennoch ein Umstieg auf eine aktuellere Version seines Browsers. Es bietet einen mehrere Vorteile zumal sind sie meistens schneller im Seitenaufbau, zum anderen sind meistens alte Bugs beseitigt und der größte Vorteil ist es das man die neuen Funktionen von CSS3 und HTML5 genießen kann.

Also einfach mal darüber nachdenken aufzurüsten! Dabei muss jeder selber entscheiden welchen Browser er nimmt ob nun Firefox, Chrome, Opera, Safari, Avant, IE Explorer…usw.

]]> http://asabie.de/welcher-browser-unterstuetzt-css3-html5/feed/ 0 HTML5 was ist neu und was alt http://asabie.de/html5-was-ist-neu-und-was-alt/ http://asabie.de/html5-was-ist-neu-und-was-alt/#comments Fri, 27 Jan 2012 19:37:19 +0000 Roland Köster http://asabie.de/?p=252 Weiterlesen →]]> Jeder kennt den Begriff HTML5. Doch welche “tags”sind neu und welche werden gar nicht mehr benutzt. Die Tabelle dich ich gefunden habe Listet einige neue und auch nicht mehr benutzte auf.

Tag Beschreibung
<!–…–> Definiert einen Kommentar
<!DOCTYPE> Definiert den Dokumenttyp
<a> Definiert ein Link
<abbr> Definiert eine Abkürzung
<acronym> Nicht unterstützt in HTML5
<address> Definiert Kontaktinformationen des Autors/Eigentümer vom Dokument/Artikel
<applet> Nicht unterstützt in HTML5
<area> Definiert ein Bereich von image-map
<article>New Definiert einen Artikel
<aside>New Definiert Inhalte neben den Inhalt dieser Seite
<audio>New Definiert Soundinhalte
<b> Definiert Fett formatierten Text
<base> Gibt den Basis-URL / Ziele für alle relativen URLs in einem Dokument
<basefont> Nicht unterstützt in HTML5
<bdi>New Isoliert Einen Teil des Textes, die anders formatiert werden kann
<bdo> Überschreibt die aktuelle Text-Richtung
<big> Nicht unterstützt in HTML5
<blockquote> Definiert das einrücken des Textes
<body> Definiert den body des Dokumentes
<br> Definiert einen einzelnen Umbruch
<button> Definiert eine Anklickbaren Button
<canvas>New Um Grafiken zu Zeichnen, on the fly, via scripting (JavaScript)
<caption> Definiert eine Tabellenbeschriftung
<center> Nicht unterstützt in HTML5
<cite> Definiert den Titel eines Werkes
<code> Definiert ein Stück von Computer-code
<col> Gibt Eigenschaften der Spalte <colgroup> Element wieder
<colgroup> Gibt eine Gruppe von einer oder mehreren Spalten in einer Tabelle für die Formatierung
<command>New Defines a command button that a user can invoke
<datalist>New Gibt eine Liste von vordefinierten Optionen für Benutzereingabe-Steuerelemente
<dd> Definiert eine Beschreibung eines Elements in einer Definitionsliste
<del> Definiert einen Text, der aus einem Dokument gelöscht wurde
<details>New Definiert zusätzliche Details, die der Benutzer anzeigen oder ausblenden können
<dfn> Definiert eine Defination von einen Begriff
<dir> Nicht unterstützt in HTML5
<div> Definiert einen Bereich in einem Dokument
<dl> Definiert eine Definitionsliste
<dt> Definiert eine Amtszeit in eine Definitionsliste
<em> Definiert hervorgehobenen text
<embed>New Definiert einen Container für eine externe Anwendung oder interaktive Inhalte (plug-in)
<fieldset> Groups related elements in a form
<figcaption>New Definiert eine Beschriftung für ein <figure> Element
<figure>New Gibt eigenständige Inhalt
<font> Nicht unterstützt in HTML5
<footer>New Definiert eine Fußzeile für ein Dokument oder Abschnitt
<form> Definiert eine HTML-Formular für die Benutzereingabe
<frame> Nicht unterstützt in HTML5
<frameset> Nicht unterstützt in HTML5
<h1> to <h6> Definiert HTML headings(Überschriften)
<head> Definiert Informationen über das Dokument
<header>New Gibt eine Einführung oder eine Gruppe von Navigationselementen für ein Dokument
<hgroup>New Gruppiert eine Reihe von <h1> to <h6> Elementen wenn eine Überschrift mehrere Ebenen hat
<hr> Definiert eine thematische Änderung im Inhal
<html> Definiert den Stamm eines HTML-Dokuments
<i> Definiert einen Teil des Textes in eine andere Stimme oder Stimmung
<iframe> Definiert einen Inline-frame
<img> Definiert ein Bild
<input> Definiert ein Eingabesteuerelement
<ins> Definiert einen Text, der in ein Dokument eingefügt wurde
<keygen>New Definiert ein Schlüssel-Paar Generator-Feld(for forms)
<kbd> Tastatur-Eingaben definiert
<label> Definiert eine Kennung für ein input-element
<legend> Definiert eine Beschriftung für ein <fieldset>,
<figure>, oder <details> Element
<li> Definiert ein Listenelement
<link> Definiert die Beziehung zwischen einem Dokument und einer externen Ressource
<map> Definiert eine Client-seitige image-map
<mark>New Definiert markierten /hervorgehoben Text
<menu> Definiert eine Liste/Menü-Befehle
<meta> Definiert Metadaten über ein HTML-Dokument
<meter>New Definiert eine skalare Messung in einem bekannten Bereich (ein Messgerät)
<nav>New Definiert Navigations-links
<noframes> Nicht unterstützt in HTML5
<noscript> Definiert einen alternativen Inhalt für Benutzer, die keine clientseitigen Skripts unterstützen
<object> Definiert ein eingebettetes Objekt
<ol> Definiert eine geordnete Liste
<optgroup> Definiert eine Gruppe von Optionen in einer Dropdown-Liste
<option> Definiert eine Option in einem Dropdown-Listenfeld
<output>New Definiert das Ergebnis einer Berechnung
<p> Definiert einen Absatz
<param> Definiert einen Parameter für ein Objekt
<pre> Definiert vorformatierten text
<progress>New Der Fortschritt eines Vorgangs
<q> Definiert ein kurzes Zitat
<rp>New Definiert, was zum Anzeigen in Browsern, die keine Ruby unterstützen
<rt>New Definiert beine Aussprache von Zeichen (for East Asian
typography)
<ruby>New Definiert eine Anmerkung für ruby (for East Asian typography)
<s> Definiert Text, der nicht mehr korrekt ist
<samp> Defines sample output from a computer program
<script> Definiert ein Client-seitiges script
<section>New Definiert einen Bereich in einem Dokument
<select> Definiert eine Dropdown-Liste
<small> Definiert kleineren text
<source>New Definiert mehrere Medienressourcen für Medienelemente (<video> and <audio>)
<span> Definiert einen Bereich in einem Dokument
<strike> Nicht unterstützt in HTML5
<strong> Wichtigen Text definiert
<style> Informationen zum Schriftschnitt für ein Dokument definiert
<sub> Definiert tiefgestellten text
<summary>New Definiert eine sichtbare Überschrift für eine <details> Element
<sup> Definiert einen Hochgestellten Text
<table> Definiert eine Tabelle
<tbody> Gruppiert den Körper vom Tabelleninhalt
<td> Definiert eine Zelle in einer Tabelle
<textarea> Definiert ein mehrzeiliges Eingabesteuerelement (text area)
<tfoot> Gruppen des Fußzeileninhalts in einer Tabelle
<th> Definiert eine Headerzelle in einer Tabelle
<thead> Gruppiert den Header-Inhalt in einer Tabelle
<time>New Definiert ein Datum/Uhrzeit
<title> Definiert einen Titel für das Dokument
<tr> Definiert eine Zeile in einer Tabelle
<track>New Definiert Textspuren für Media-Element (<video> and <audio>)
<tt> Nicht unterstützt in HTML5
<u> Nicht unterstützt in HTML5
<ul> Definiert eine ungeordnete Liste
<var> Definiert eine variable
<video>New Definiert ein Video oder einen Film
<wbr>New Definiert einen möglichen Zeilenumbruch

Quelle: www.w3schools.com

]]> http://asabie.de/html5-was-ist-neu-und-was-alt/feed/ 0 CSS Meyer Reset http://asabie.de/css-meyer-reset/ http://asabie.de/css-meyer-reset/#comments Thu, 22 Dec 2011 16:45:33 +0000 Roland Köster http://asabie.de/?p=243 Mit den Meyer Reset, könnt Ihr alle vordefinierten Positionen zurücksetzen um eure Seite komplett neu zu gestallten. Die meisten von euch wissen wie sie es einsetzen müssen.

<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}
</style>

]]> http://asabie.de/css-meyer-reset/feed/ 0 Diese Formen kann CSS3 http://asabie.de/diese-formen-kann-css3/ http://asabie.de/diese-formen-kann-css3/#comments Mon, 12 Dec 2011 19:27:02 +0000 Roland Köster http://asabie.de/?p=153 Weiterlesen →]]> Diese Formen könnt Ihr mit CSS3 erreichen, Voraussetzung das euer Browser es auch unterstützt. Also einfach mal reinziehen was alles so möglich ist.

Quadrat:

<style type="text/css">
#square {
	width: 100px;
	height: 100px;
	background: red;
}
</style>

Rechteck:

<style type="text/css">
#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}
</style>

Kreis:

<style type="text/css">
#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
</style>

Oval:

<style type="text/css">
#oval {
	width: 200px;
	height: 100px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}
</style>

Dreieck nach oben:

<style type="text/css">
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}
</style>

Dreieck nach unten:

<style type="text/css">
#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}
</style>

Dreieck nach links:

<style type="text/css">
#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid red;
	border-bottom: 50px solid transparent;
}
</style>

Dreieck nach rechts:

<style type="text/css">
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid red;
	border-bottom: 50px solid transparent;
}	
</style>

Dreieck oben links:

<style type="text/css">
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-right: 100px solid transparent;			
}
</style>

Dreieck oben rechten:

<style type="text/css">
#triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-left: 100px solid transparent;
	
}
</style>

Dreieck unten links:

<style type="text/css">
#triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-right: 100px solid transparent;	
}	
</style>

Dreieck unten rechts:

<style type="text/css">
#triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid red; 
	border-left: 100px solid transparent;
}
</style>

Parallelogramm:

<style type="text/css">
#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}
</style>

Trapez:

<style type="text/css">
#trapezoid {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}
</style>

Stern (6-Punkte):

<style type="text/css">
#star-six {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
	position: relative;
}
#star-six:after {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
	position: absolute;
	content: "";
	top: 30px;
	left: -50px;
}
</style>

5-Punkte-Stern:

<style type="text/css">
#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
   
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}
</style>

Pentagon:

<style type="text/css">
#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}
</style>

Hexagon:

<style type="text/css">
#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}
</style>

Achteck:

<style type="text/css">
#octagon {
	width: 100px;
	height: 100px;
	background: red;
	position: relative;
}

#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;    
	border-bottom: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}

#octagon:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;    
	border-top: 29px solid red;
	border-left: 29px solid #eee;
	border-right: 29px solid #eee;
	width: 42px;
	height: 0;
}				
</style>

Herz:

<style type="text/css">
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}
</style>

Unendlich:

<style type="text/css">
#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
</style>

Diamant:

<style type="text/css">
#diamond {
   width: 80px; 
   height: 80px; 
   background: red;
   margin: 25px 0 15px 35px;
   -webkit-transform: rotate(-45deg);
   -moz-transform:    rotate(-45deg);
   -ms-transform:     rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
</style>

Ei:

<style type="text/css">
#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;
}
</style>

Pac-Man:

<style type="text/css">
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
</style>

Sprechblase:

<style type="text/css">
#talkbubble {
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
</style>

12-Punkte-Stern:

<style type="text/css">
#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
</style>

8-Punkte-Stern:

<style type="text/css">
#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}
</style>

Diamand:

<style type="text/css">
#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
</style>

Yin Yang:

<style type="text/css">
#yin-yang {
	width: 96px;
	height: 48px;
	background: #eee;
	border-color: red;
	border-style: solid;
	border-width: 2px 2px 50px 2px;
	border-radius: 100%;
	position: relative;
}

#yin-yang:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	background: #eee;
	border: 18px solid red;
	border-radius: 100%;
	width: 12px;
	height: 12px;
}

#yin-yang:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: red;
	border: 18px solid #eee;
	border-radius:100%;
	width: 12px;
	height: 12px;
} 
</style>

DEMO und QUELLE

]]> http://asabie.de/diese-formen-kann-css3/feed/ 0 Bei PHP REGISTER_GLOBALS umgehen http://asabie.de/bei-php-register_globals-umgehen/ http://asabie.de/bei-php-register_globals-umgehen/#comments Sat, 10 Dec 2011 11:24:35 +0000 Roland Köster http://asabie.de/?p=148 Weiterlesen →]]> Manche Scripte funktionieren nur wenn in der PHP .ini REGISTER_GLOBALS=on stehen. SOllte es der Fall sein das Sie off steht, liegt es meist am Provider, der aus Sicherheitsgründen es off geschaltet hat. Mit einen kleinen PHP-Code könnt Ihr alles wieder zu laufen bekommen.

<?php

       /*  Register_Globals umgehen  */
      
       if (isset($HTTP_GET_VARS)) {
            extract($HTTP_GET_VARS);
       }
       if(isset($HTTP_POST_VARS)) {
	    extract($HTTP_POST_VARS); 
       }
?>

Aber um es auf jeden Fall sauberer zu machen programmiert lieber gleich
richtig, in dem ihr mit $_POST['variable'] oder $_GET['variable'] arbeitet!

]]> http://asabie.de/bei-php-register_globals-umgehen/feed/ 0