Categories
CSS Webkit

Webkit Transitions and Effects Examples

Transition Effect on Resizing Fonts

Elements that have -webkit-transition on them (using “all” or specifying font-size) will utilize that transition when bumping up and down size in the browser.

From testing (on Chrome atleast) the quicker the transition the smoother it is, you’d expect a 4second transition to be smoother, but it isn’t* (this maybe a chrome only issue?).

-webkit-transition: all 1s ease;
-webkit-transition: all 0.5s ease-in-out;

via Forrst: http://forrst.com/posts/WebKit_Transition_on_Resizing_Text-Xvf

Nicer Looking Type

html, body {
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
text-rendering: optimizeLegibility;
}

via Forrst: http://forrst.com/posts/Nicer_looking_type-XPZ

CSS Pinstripe Background (No IMAGE)

@pinstripe-color: #323232;

html {
background-color: #646464;
background-image:
-webkit-gradient(linear, 100% 0%, 0% 100%,
from(transparent),
color-stop(0.15, transparent),
color-stop(0.15, @pinstripe-color),
color-stop(0.50, @pinstripe-color),
color-stop(0.50, transparent),
color-stop(0.65, transparent),
color-stop(0.65, @pinstripe-color),
to(@pinstripe-color));
background-image:
-moz-linear-gradient(100% 0%,
transparent 0.15,
@pinstripe-color 0.15,
@pinstripe-color 0.50,
transparent 0.50,
transparent 0.65,
@pinstripe-color 0.65);
.background-size(60px, 60px);
background-attachment: fixed;
overflow-y: scroll;
}

.background-size(@x, @y) {
-webkit-background-size: @x @y;
-moz-background-size: @x @y;
-o-background-size: @x @y;
background-size: @x @y;
}

Apparently very bad for performance when using a Background, however buttons, header BG’s? Maybe!

via Forrst: http://forrst.com/posts/Pinstripes_with_only_CSS-X6X

Fading Text Transition Effect – Belief – Lie

See Link

via Forrst: http://forrst.com/posts/Belie_and_Lief-XPl