BFX

Brutal Effects

Brutalize elements with some CSS and javascript-based effects.

BAFFLE

Baffle adds an animated obfuscation effect to any text. Reload page to see effect. Apply these baffling classes!

.baffle - Baffles once upon page load.

.baffle-longer - Baffles once, but for a longer duration (3 seconds).

.baffle-prolonged - Baffles for a prolonged period.

.baffle-forever - .baffle-forever - Baffles endlessly.


FITTEXT

Fittext makes any text aggressively responsive. Re-size your browser window to see them scale!

.fittext - Best scales text to fit within container.

Brutalist Framework

.fittext-compress - Increases compression.

Brutalist Framework

.fittext-uncompress - Decreases compression.

Brutalist Framework

Below are fittext classes that are ideal for H1 - H6 tags.

.fittext-h1

.fittext-h2

.fittext-h3

.fittext-h4

.fittext-h5
.fittext-h6


CURVED TEXT

Warp your text into curves, spirals, circles, and waves! Works best on paragraphs. All are fully responsive.

.arc-text

Arc Text allows you to create a responsive arch of text!

.bezier-text

Bezier Text allows you to create curvy responsive text!

.circle-text

Circle Text allows you to create a responsive circle of text!

.wave-text

Wave Text allows you to create a responsive wave of text!

.spiral-text

Spiral Text allows you to become sucked into another dimension! It is fully responsive, too!


Equal Heights

Equal heights makes boxes the same height within a multi-column layout. In the example below, notice how all 3 column boxes have the same height.

.equal-height

Column One
This box has 2 lines of text

Column Two
This box has several lines of text.
Some small text.
Another small text line.

Column Three
This box has 2 lines of text


Brutal Text Effect

Apply these classes to any text for a brutal text effect!

.brutal-text

Default brutal (black) text

.brutal-text-mono

Brutal monochrome (blue) text

.brutal-text-neon

Brutal neon (lime) text


Glitch

Add a glitch effect to any element! Works on images and text, or even entire areas! It is entirely CSS-based. Apply .glitch class to any element.

Glitched Circle Image

Original

Glitched Paragraph

This is a rather glitchy paragraph. You could even baffle all your firking enemies!

This paragraph has just one glitched word, using the span tag.


Blink is back! Apply theses classes to blink any element, even entire areas! Requires brutalist.js and start.brutalizing.js.

.blink

.blink-slow

.blink-fast

Here is a fast-blinking span and image:
Fast-blinking Image

.blink-182

Get Your Blinker Fluid NOW!
Blinker Fluid


Throb

Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply the class .throb to an element.

Image Example

Original

ALERT!

Content Block Example
See how I throb!


Clip-Box

Clip-Box allows you to apply a custom background image to any text!

.clip-box - Outer wrapper for area to contain text with background image.
.clip-box-cover - Makes the background image fluid

Apply Background Image: Create a custom class in the theme CSS file, and specify the background-image url.

DEMO 1: Clip-Box text in a vanilla-cherry-gradient container.

Clip-Box

DEMO 2: Clip-Box text inside a custom cover image area (stacks are needed for this).

Clip-Box


Chop Text

Truncate a paragraph of text to a preset number of characters. Requires start.brutalizing.js. Apply any of these classes to any text to truncate.

.chop-64

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.

.chop-128

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.

.chop-256

Lorem ipsum no facer prompta vim, movet ubique qui ei. Per no regione aliquid, ea mei nulla scribentur liberavisse. Vim cu tale ludus possit, discere suavitate nam ad. No verterem reprimique vix, phaedrum hendrerit an quo. Qui feugait apeirian ut, ne virtute numquam mandamus mea. Eos et enim dicant deterruisset.


Animated Gradient Backgrounds

Apply these classes to add an animated gradient background to any element!

.anim-bg-plain

.anim-bg-vampire

.anim-bg-hot

.anim-bg-pastel

.anim-bg-shine

Download

Version 1.6