Bootstrap CSS3 Effects with Code Examples & Beer

In this post

Tips with Bootstrap CSS3 code samples for a better running, better looking blog. Make your site not only run faster but look better with CSS3.

  • 1-5 Stars

Your Opinion Matters

Did you enjoy this article? Let us know what you thought of it here. Help us write posts that better appeal to you. Give us a quick star rating and let us know what you thought here.

User Review
5 (1 vote)

bootstrap css3Using the Bootstrap CSS3 framework is a great backbone to build your site on for a number of reasons. Aside from the fact that it’s built for scalability it’s also great for speed, performance and a host of design options that previously were pretty clunky to create.

Snowball IIThe advantage of the code below is lower load times and extreme scalability. The idea behind CSS is fewer parts with more features. Creating elements of your site or blog with code makes global changes very easy and fast.

Decreasing your page load times will help retain visitors and in turn build a stronger online community.

If your site is slow people tend to bounce. If they bounce there goes your click through rate. This is all the more reason to implement modern day CSS3 and HTML5 compliant code. Not only will it ensure your site will work on all mobile browsers, phones, and tablets, but it will be more search engine friendly and quicker loading.

Enough of the code preaching. For starters you’ll need to download a copy of bootstrap.css and link it to your site. Download Bootstrap here to get started.

Bootstrap CSS3 Gradients

CSS Gradients are a great way to style your site without having to use imagery. By taking advantage of these CSS elements to create elements of your site means they only need to be loaded once. This is advantageous for anyone who bounces around your site as most of your content will be cached providing a faster/ more pleasant browsing experience.

Rounded Transparent Buttons with CSS3

These are great for creating navigation for your entire site. Your buttons can have gradients, background colors or obviously images set to the back ground if you choose.

The beauty of creating buttons in this manner is once you’ve created your set they can be updated in one area with just a couple lines of CSS. Also, it’s light code, not imagery so load if load times are a concern this is a good option.

Bootstrap CSS3 Scale-able Text

Resize this page to see how scale-able text works. It’s set to a scale-able viewport size so no matter how big or small the page gets it will always fit a designated area.

Scale Me

She sells sea shells by the sea shore.

Custom Radius Boxes

This code is great for creating irregularly shaped containers for what ever your heart desires. The code is pretty straight forward. Simply adjust each of the individually labelled corner radius lines to create your custom shaped container.

The quick brown fox jumped over the lazy dogs.

Bootstrap CSS3 Reflected Image

This is a neat option if you want mirrored images. This also reduces load times as you’re using the same image twice. Hence it’s only loaded once.

bootstrap css3

bootstrap css3

Rotate an image with Bootstrap CSS

For my last tip I wanted to show how you can rotate 1 image and have it appear in a number of different ways. The images below are actually just 1 image adjusted by CSS. Again doing more with less.

Bootstrap CSS3 EffectsBootstrap CSS3Bootstrap CSS3 Effects

Where’s the any key?



Bootstrap CSS3 Effects with Code Examples & Beer Click To Tweet