I use CodePen a lot for testing little things or getting to the bottom of a problem. Often I just need to color some divs or the like and I always fall back to using red or blue or green or simple hex codes like #000 or #ccc.

Recently I couldn’t take it anymore. Even though these are often only temporary pens I want them to please my eye at least a little bit. I remembered that there were some more predefined color names that one could use. What I found out was that there are actually 147 color keywords defined in the CSS3 Color Module. Pretty impressive.

I created a CodePen showing them off so I can go there and grab a nice color next time I need one.

See the Pen 147 CSS3 Color Module color keywords by Martin Wolf (@martinwolf) on CodePen.

Did you know that there is a difference between pseudo elements and pseudo classes and that they actually should be written differently?

Pseudo classes refer to the state of the selected element, like :hover, :focus or :last-child.

For example:

p:last-child {
    margin-bottom: 0;
}

Pseudo elements on the other hand are actual elements, that get somehow created by CSS. The newest Chrome Dev Tools are making a good job in demonstrating that with actually showing them in the code. To make the difference clear pseudo elements are since CSS3 notated with two colons.

blockqoute::before {
    content: '“';
}

blockqoute::after {
    content: '”';
}

(Be aware, if you need to support IE8 you have to write it in the wrong single-colon CSS 2.1 syntax with only one colon.)

You can read more on pseudo elements at the W3.

Tab Atkins:

THERE IS NO SUCH THING AS CSS4. There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.
The term „CSS3“ refers to everything published after CSS 2.1.

Read that and spread the word.

I am able to code CSS arrows by hand, but this is so much easier and faster. Thanks Simon Højberg.

Es ist einfach so cool was man mit CSS3 und ganz wenig Javascript anstellen kann.

Bei QUOTE.fm nutze ich für kleine Dreiecke, wie zum Beispiel die Zipfel an Tooltips mittlerweile keine Grafiken mehr, sondern setze CSS ein. Das spart Arbeit, ist flexibler und verringert Daten, die geladen werden müssen.

Das Problem an dieser Technik ist allerdings, dass nur relativ kleine Dreiecke gut aussehen. Ab einer gewissen Größe, werden die Kanten zunehmend unansehnlich. Gleiches passiert auch bei Dreiecken, die entweder sehr flach oder sehr spitz sind.

Generell kann dem Problem zumindest in webkit Browsern (Safari, Chrome) mit einem kleinen Trick entgegen gewirkt werden: Das ganze Element einfach ein mal um 360° drehen. Ich verstehe nicht wieso es so ist, aber es ist so. Und dann frage ich auch einfach nicht länger nach.

Hier ein einfacher Vergleich. Oben ohne 360° Drehung, unten mit.

Und hier der passende Code:

<style type="text/css">
.triangle {
    display: block;
    margin: 0 0 20px 0;
    width: 0;
    height: 0;
    border-top: 20px solid #008dcd;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
}

.reloaded {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>

<span class="triangle"></span>
<span class="triangle reloaded"></span>​

Ich habe euch das auch noch mal als jsfiddle angelegt, damit ihr ein bisschen rumtesten könnt.

Demo eines Admininterface für ein CMS oder ähnliches. Haufenweise cooler CSS3-Kram. Am besten finde ich allerdings die 404-Seite.

Im letzten Eintrag ging es um den Einsatz von HTML5 Placeholdern und eine jQuery Fallbackmöglichkeit. Heute will ich euch kurz und kann zeigen, wie ihr den Placeholdertext anders aussehen lassen könnt als den normalen Input-Text.

Soweit mir bekannt ist, gibt es die Möglichkeit nur für webkit-basierte Browser wie Chrome und Safari und für Firefox.

Die ersten beiden können ganz einfach über folgenden Selektor angesprochen werden.

input::-webkit-input-placeholder {
    color: #bbb;
}

Firefox hat einen ähnlichen Selektor, der wie folgt aussieht.

input:-moz-placeholder {
    color: #bbb;
}

Es ist noch wichtig zu sagen, dass ihr folgendes nicht machen dürft, da ein Browser aufhört den Code zu interpretieren, wenn er eine der beiden Anweisung nicht versteht, die ihr in eine Reihe schreibt.

input::-webkit-input-placeholder,
input:-moz-placeholder {
    color: #bbb;
}

Wusste ich auch nicht und suchte den Fehler irgendwann mal ewig, bis ich dann zu dieser Erkenntnis kam.

John Nack:

Adobe’s contributing technology & expertise to enable CSS shaders. CSS shaders “define a filter effects extensibility mechanism and provide rich, easily animated visual effects to all HTML5 content.” They work particularly well with CSS animations and CSS transitions, but they even work on video & SVG animations.

Die Zukunft der Webentwicklung wird sooo gut! Weiter machen, Adobe. (via)

Klar, ich weiß im Grunde auch wie das geht. Aber die Zeit und Planung die für so was benötigt wird, ist enorm. Ich bin jedes mal wieder beeindruckt. Dieses mal sind es die sich bewegenden Innenteile einer Uhr. (via)