Kategorie: CSS

CSS Pseudo-Class :before und :after mit jQuery manipulieren

Das Problem

Frontend-Entwickler nutzen gerne die Pseudo-Klassen :before und :after, um zum Beispiel eine Form mit CSS zu erstellen ohne, dass man dazu ein Hintergrundbild benutzen muss. Beispiel:

.top-header:before {
background: #00589d none repeat scroll 0 0;
height: 61px;
position: absolute;
right: 64px;
top: 0;
transform: skewX(-25deg);
width: 31px;
z-index: 9;
}

Mit diesem Code habe ich ein schräges Rechteck erzeugt. Aufgabe war es, falls sich die Fenstergröße verändert, dann soll sich auch die Position ‚right‘ verschieben. Der neue Wert wird durch jQuery berechnet und in eine Variable gespeichert. Jetzt hatte ich ein Problem, weil man in jQuery keine Pseudoklassen manipulieren kann. Folgendes funktioniert NICHT:

Love your :first-child

Integrating block elements with TYPO3 content elements and CSS frameworks the headache-free way.

In this article I want to point out a mistake or two that I’ve been guilty of myself, which tend to lead to a style maintenance nightmare further down the road.

In TYPO3 basic content consists of a paragraph of text with an optional header. This  integrates very nicely with Bootstrap or Foundation, but of course every solution and every customer is special, so there is always something to tweak:

“Please move the header flush to the top of the container”

Anfrage