Articles of css

CSS3 Marquee-Effekt

Ich erstelle einen Laufschrift-Effekt mit CSS3-Animation. Hier sind meine Codes. HTML-Tag: The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. CSS: #caption { position: fixed; bottom: 0; left: 0; font-size: 20px; line-height: 30px; height:30px; width: 100%; white-space: […]

CSS-Eigenschaften: Anzeige und Sichtbarkeit

Was ist der Unterschied zwischen den Eigenschaften “Anzeige” und “Sichtbarkeit”?

Wie wird Internet Explorer 8 zur Unterstützung des nten child () CSS-Elements verwendet?

Ich möchte meinen Tischreihen einen Zebra-Streifen-Effekt geben. In allen anderen Browsern kann es mit CSS nth child Element gemacht werden. Aber ich will es IE 8 auch tun. SO wie kann ich es tun?

Gedreht Elemente in CSS, die die Höhe ihrer Eltern korrekt beeinflussen

Nehmen wir an, ich habe ein paar Spalten, von denen ich einige Werte rotieren möchte: http://jsfiddle.net/MTyFP/1/ Normal Normal Rotated Normal Mit diesem CSS: .statusColumn b { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } Es sieht so aus: Ist es möglich, ein beliebiges CSS zu schreiben, das dazu führt, […]

FontAwesome – Auswahl der richtigen Schriftfamilie in CSS-Pseudoelementen

Ich verwende font-awesome Version “Font Awesome Free 5.0.6”. Ich bin derzeit verwirrt, wenn ich das Symbol in CSS-Pseudo-Elementen verwende. Es gibt 4 Arten von Schrift-Familie für fontawesome: Font Awesome 5 Free , Font Awesome 5 Solid , Font Awesome 5 Brands , Font Awesome 5 Regular Hier ist der HTML: Hello Fall 1 Ich benutze […]

FontAwesome Ersetzung auf -Tag zeigt leeres Quadrat

Versucht, den Aufzählungszeichen-Typ auf einem Listenelement-Tag durch ein Font Awesome-Symbol zu ersetzen, aber ich erhalte ein leeres Quadrat: HTML List Item 1 List Item 2 List Item 3 List Item 4 List Item 5 CSS ul { list-style: none; } .testitems { line-height: 2em; } .testitems:before { font-family: “FontAwesome”; content: “\f058”; margin: 0 5px 0 […]

Wie man Knopf wie einen Link aussehen lässt?

Ich muss eine Schaltfläche wie einen Link mit CSS aussehen lassen. Die Änderungen sind abgeschlossen, aber wenn ich darauf klicke, wird es so angezeigt, als ob es wie in einer Taste gedrückt wird. Irgendeine Idee, wie man das entfernt, so dass der Button auch als Link funktioniert, wenn er angeklickt wird?

React.js Best Practices für Inline-Stile

Mir ist bewusst, dass Sie Stile in React-classn wie folgt angeben können: var MyDiv = React.createClass({ render: function() { var style = { color: ‘white’, fontSize: 200 }; return Have a good and productive day! ; } }); Soll ich auf diese Weise alles gestalten und habe überhaupt keine Stile in meiner CSS-Datei? Oder sollte […]

Bootstrap 3 Reduzieren Sie den Show-Status mit dem Chevron-Symbol

Unter Verwendung des corebeispiels aus der Bootstrap 3-Javascript- Beispielseite für Ausblenden konnte ich den Status des Kollapses mithilfe von Chevron-Symbolen anzeigen. Ich arbeite mit: $(‘#accordion .accordion-toggle’).click(function (e) { var chevState = $(e.target).siblings(“i.indicator”).toggleClass(‘glyphicon-chevron-down glyphicon-chevron-up’); $(“i.indicator”).not(chevState).removeClass(“glyphicon-chevron-down”).addClass(“glyphicon-chevron-up”); }); Das funktioniert (nicht vollständig in allen Browsern getestet), aber ich frage mich, ob es eine elegantere Lösung dafür gibt? Idealerweise […]

Der Unterschied zwischen Prozent- und Fr-Einheiten im CSS-Rasterlayout

Ich spiele mit CSS Grid Layout herum und stoße auf eine Frage, auf die ich keine Antwort finden kann. Betrachten Sie das folgende Beispiel: :root { –grid-columns: 12; –column-gap: 10px; –row-gap: 10px; } .grid { display: grid; grid-template-columns: repeat(var(–grid-columns), calc(100% / var(–grid-columns))); grid-column-gap: var(–column-gap); grid-row-gap: var(–row-gap); justify-content: center; } [class*=l-] { border: 1px solid red; […]