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
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
Blink is back! Apply theses classes to blink any element, even entire areas! Requires brutalist.js and start.brutalizing.js.
.blink
ALERT!
ALERT!
ALERT!
.blink-slow
////////
WARNING!!!!
////////
.blink-fast
Here is a fast-blinking span and image:
.blink-182
Get Your Blinker Fluid NOW!
Throb
Apply a throbbing, pulsing effect. It's CSS-based, so no javascript is needed. Simply apply this class to any element:
.throb
Spin
Spin any element constantly. Apply these classes:
.spin
.spin-reverse
.spin-fast
.spin-reverse-fast
.spin-cycle
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!