Articles of css

Scrollen einer Flexbox mit überfülltem Inhalt

Hier ist der Code, den ich verwende, um das obige Layout zu erreichen: .header { height: 50px; } .body { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; display: flex; } .sidebar { width: 140px; } .main { flex: 1; display: flex; flex-direction: column; } .content { flex: 1; display: flex; } .column […]

Rails 4: Wie verwende ich Sass Mappings?

Ich versuche, einige meiner Stile für eine Rails 4.1 App zu bereinigen. Anstatt jede Farbe und ihre Variationen aufzulisten, möchte ich ein Mapping von colors / Werten erstellen und dann das CSS erzeugen, indem ich darüber iteriere. # colors.css.scss $colors: ( “red”: #330000, “blue”: #003300 ); Allerdings erhalte ich folgenden Fehler: Invalid CSS after “$colors: […]

Müssen wir nicht-standard- / browserspezifische CSS-Vendor-Präfixe mehr verwenden?

Angesichts der Tatsache, dass ich mich nicht wirklich mit der Rückwärtskompatibilität behellig mache (ich untersuche CSS3 und HTML5-basiertes Design, anstatt mich auf Grafiken und ähnliches zu verlassen), was sind die Vorteile der Verwendung von CSS wie: -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; Über nur mit: box-shadow: 3px 3px 5px […]

Kann ich einen CSS-Übergang auf die Überlaufeigenschaft anwenden?

Ich versuche eine transition-delay auf die overflow von body wenn ein div angeklickt wird, indem eine class wie folgt zum body hinzugefügt wird: $(“div”).click(function(){ $(“body”).addClass(“no_overflow”); }); div{ background:lime; height:2000px; } .no_overflow{ overflow:hidden; } body{ overflow:auto; transition: overflow 0 2s; } I’m div Dies scheint jedoch nicht zu funktionieren (es gibt keine Verzögerung). Mache ich hier […]

Die Verwendung von PrimeFaces mit Bootstrap verursacht Änderungen in padding / sizing / borders

Nun, ich habe alle Themen von PrimeFaces deaktiviert: primefaces.THEME none Ich mache es, weil ich Bootstrap 3 benutze und ich keine Konflikte in jquery-ui und Bootstrap-Layout will. Das Problem ist, dass PrimeFaces Datatable ohne “Themes” zu einer weißen Tabelle mit schwarzen Rahmen wird, wenn ich den border-style:none benutze border-style:none , der Rahmen verschwindet, aber der […]

Bootstrap Grid System neue Zeile sieht nicht gut aus

Kürzlich habe ich begonnen, eine Admin-Seite auf meiner Site zu erstellen, um mehrere kleine Tabellen (1-5 Einträge) zu bearbeiten. Sie wurden alle auf einer Seite angezeigt und die Tabellen wurden wie folgt in ein Div geschachtelt: … Ich habe das mit sechs Tabellen gemacht, und so sieht es aus, wenn sie die gleiche Anzahl von […]

jQuery .css (“left”) gibt in Chrome “Auto” anstelle des tatsächlichen Werts zurück

Ich habe div Element mit links und oben definiert, ohne absolute Position , und ich möchte die linken und oberen Werte mit jQuery lesen. Using $(“#MyId”).css(“left”) gab das erwartete Ergebnis im IE-Browser (IE8), aber in Chrome gab es stattdessen “auto” zurück, obwohl die Werte explizit im Elementstil geschrieben wurden. Hier ist der Testfall: http://jsfiddle.net/qCDkb/2/ Beachten […]

Gibt es eine Möglichkeit, CSS-Variablen mit URL () zu interpolieren?

Ich möchte meine Hintergrund-URLs in benutzerdefinierten Eigenschaften (CSS-Variablen) speichern und sie mit der Hintergrundeigenschaft verwenden. Ich konnte jedoch keine Möglichkeit finden, die Zeichenfolge zu interpolieren, wenn sie als Parameter in url() . Hier ist mein Beispielcode: :root { –url: “https://download.unsplash.com/photo-1420708392410-3c593b80d416”; } body { background: url(var(–url)); } Ich weiß, dass dies in Sass oder LESS mit […]

CSS-Animation in umgekehrter Richtung wiederverwenden (durch Zurücksetzen des Status?)

Ich habe zwei Keyframe-Animationen in CSS verwendet. Einer bewegt sich von links nach rechts und der andere benutzt genau die gleichen Werte – aber umgekehrt. @keyframes moveLeft { from {transform: translate3d(50px, 0, 0);} to {transform: translate3d(0px, 0, 0);} } @keyframes moveRight { from {transform: translate3d(0px, 0, 0);} to {transform: translate3d(50px, 0, 0);} } Ich frage […]

CSS-Inhalt, Attr und URL im selben Satz

Ich habe das Inhaltsattribut lange benutzt und heute wollte ich etwas Neues ausprobieren. Anstatt JS zu verwenden, um einen Image-Tooltip anzuzeigen, wollte ich wissen, ob es möglich war, es dynamisch mit CSS zu machen. Also habe ich es versucht: .TableLine:hover:after{ content: url(“../Img/Photo/”attr(id)”.jpg”); } wobei attr(id) die ID des Bildes (alphanumerisch) zurückgeben soll, welches auch der […]