Webdesign mit CSS

Forum - Webdesign mit CSS
30 Lernkarten sind in diesem Bereich vorhanden

Blinkender Text mit CSS
15.03.2014 - Lernkarte von MWT
Eine Möglichkeit mit CSS um einen Text "blinken" zu lassen. Mit animation-duration: (hier 1s, eine Sekunde) lässt sich die Zeit des "blinkens" einstellen. Über animation-iteration-count: (hier infinite, unendlich) ist die Anzahl des "blinkens" angeben. Z.B. animation-iteration-count: 5 für 5 mal "blinken". <span class="blink">Ich blinke</span>   .blink {     -webkit-animation-name: blinken;     -webkit-animation-duration: 1s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: infinite;     -moz-animation-name: blinken;     - ... mehr

Lernkarte ergänzen
Textbereich per CSS "hineindrehen" (Flip)
05.01.2014 - Lernkarte von MWT
Ein ganz netter Effekt: Der Textbereich (hier <h1>) wird bei der Anzeige animiert "hineingedreht". <h1>Das ist ein Bereich, der bei der Anzeige "hineingedreht" wird</h1> <p>    Laber ..... </p> h1 {     animation: turn 0.5s 0.5s linear both;    -webkit-animation: turn 0.5s 0.5s linear both;    -moz-animation: turn 0.5s 0.5s linear both; } @-webkit-keyframes turn {     0%   { -webkit-transform: rotateX(90deg); }     100% { -webkit-transform: rotateX(0deg); } } @-moz-keyframes turn {     0%   { -moz-transform: rotateX(90deg); }     1 ... mehr

Lernkarte ergänzen
Placeholder mit CSS anpassen
05.01.2014 - Lernkarte von MWT
Das Format für den placeholder kann per CSS geändert werden. Im Beispiel wird der Placeholder-Text kursiv und hellgrau angezeigt die Eingabe erscheint in rot. <input type="text" placeholder="Placeholder-Text" /> input { color: red } ::-webkit-input-placeholder {    color: #ccc;    font-style: italic; } :-moz-placeholder {    /* Firefox 18- */    color: #ccc;    font-style: italic; } ::-moz-placeholder {  /* Firefox 19+ */   color: #ccc;   font-style: italic; } :-ms-input-placeholder { /* IE */    color: #ccc;   font-style: italic;  } 

Lernkarte ergänzen
Container nebeneinander mit gleicher "Höhe"
30.07.2013 - Lernkarte von MWT
 Wenn zwei DIV-Container mit float nebeneinander gesetzt werden <div style="float: left; width: 50%">.....</div> <div style="float: left; width: 50%">.....</div> besitzen beide Container  entsprechend ihres Inhalt eine (unterschiedliche) Höhe. Das bedeutet, dass der eine Container "höher" sein kann als der anderen. Mit dem nachfolgenden workaround lässt sich das "Problem" leicht umgehen: <div style="display: table; width: 100%; ">   <div style="display: table-cell; width: 50%;">     linker Container<br /><br /><br />mehr Text ...   </div>      <div style="d ... mehr

Lernkarte ergänzen
calc() - Rechnen in CSS3
16.06.2013 - Lernkarte von MWT
CSS bis einschließlich Version 2.1 erlaubt die Zuweisung relativer oder absoluter Werte, beispielsweise mittels width einer Breite von 100%, 30em oder 200px. Problematisch ist dies vor allem dann, wenn Einheiten gemischt notiert werden müssen, da eine Umrechnung nicht zuverlässig möglich ist. Das am weitesten verbreitete Problem dürfte die Kombination aus width:100% und padding/margin/border darstellen. Da deren Werte gemäß CSS-Boxmodell addiert werden, ergibt sich eine Breite von über 100 Prozent. Zwar soll es künftig möglich sein, W3C-konformen Browsern mittels box-sizing das Box-Modell des Internet Explorer aufzuzwingen, doch wäre ... mehr
  1. box-sizing - Breite eine Elements erzwingen (Boxmodell)
    16.06.2013 - Ergänzung von MWT
    Das am weitesten verbreitete Problem dürfte die Kombination aus width:100% und padding/margin/border darstellen. Da deren Werte gemäß CSS-Boxmodell addiert werden, ergibt sich eine Breite von über 100 Prozent. Zwar soll es künftig möglich sein, W3C-konformen Browsern mittels box-sizing das Box-Modell des Internet Expl ... mehr
Lernkarte ergänzen

Facebook-Logo.GooglePlus-Logo.
Bei der Nutzung der sozialen Netzwerke Facebook ("Gefällt mir") und Google ("Google+") werden Bewegung-, Inhaltsdaten
und die IP-Adresse an die Anbieter dieser Dienste übermittelt. Für die Nutzung dieser Plugins ist daher Ihre aus­drückliche Zustimmung notwendig. Ich stimme diesen Nutzungsbedingungen zu. Beachten Sie auch unsere Datenschutzerklärung.

© 2007-2024 by www.bugbomb.de0,00454 Sek.