BFX

Brutal Effects

Brutalize elements with some CSS and javascript-based effects.

Text Effects

BAFFLE Text

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.

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

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.


Animations

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


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


ROTATE TEXT

Rotate Text allows the rotation of text within an element.

Example 1:

Brutalist Framework uses to Brutalize!
  • HTML5
  • CSS3
  • jQuery

Example 2:

  • Crude and Harsh
  • Ugly, Unrefined, Uncomfortable
  • Cynical and Confrontational
Markup

Rotate Text requires javascript, and the markup uses data attributes to configure the settings. You will need to apply a unique ID to each individual Rotate Text element. The markup is as follows:

<div id="rotate-text-1" class="rotator" data-rotate-interval="3000" data-rotate-animate="fadeIn,rollOut">
<p class="rotate-arena"></p>
<ul>
   <li>First Text Phrase</li>
   <li>Second Phrase of Text</li>
   <li>Last Text Phrase</li>
</ul>
</div>

Rotate Interval = 3000 = 3 seconds until next rotation
Rotate Animate - There are numerous animation styles supported. Consult animations.css.


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


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


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.8