Reshaping Elements Using CSS3 For Any Bootstrap Based Theme

  • Post published:June 16, 2015

Bootstrap is a highly interesting and productive amalgam of three fundamental technologies i.e. JavaScript, HTML and CSS. An impressively dynamic nature of Bootstrap being an effective open-source framework makes it an ultimate choice for faster and easier front-end web development. The Bootstrap framework is made by the Twitter Team and provides great support for the addition of user-interface components. There are extensive features available to be customized in the Bootstrap based website themes and exploring them effectively can lead to prosperous outcomes. Technically equipped R&D from our UI Engineer has led to extensive innovations and improvisations to current Booststrap based themes. When it was presented to Client of vteam #365, he was delighted to see the improvements and appreciated our UI Engineer’s effort. Following elements were reshaped by using CSS3 for any bootstrap based theme:

Styling Featured Products:

  • Used pseudo selectors to put angle brackets around the block
  • Used transform property to animate the cart button from top to middle of the image
  • Used transition property for smooth animation for cart button
    Examples:
    i-
    . class:after{}
    ii- .class:before{}
    iii- .class{transform:translateX(-50%); }
    iv- .class{transition:all 0.3s ease;}
    featured-image

Styling Menu:

  • Used pseudo selectors to add the borders around the menu item
  • Used transition animation to make the borders into rectangle shape around the menu item on hover effect
    Examples:
    i- . class:after{}
    ii- .class:before{}
    iii- .class{transition:all 0.3s ease;}
    menu-image

Styling Blog:

  • Changed the single vertical listing to grid view
  • Added background gradient using CSS gradient properties
  • Used CSS translate property to align the author image in the middle of the item and positioned it on top
  • Added shadow effect to the author image to make it look like embossed effect
  • Added box shadow to the more button so it should come from the left edge.
    Examples:
    i- . class:after{}
    ii- .class:before{}
    iii- .class{background-image:linear-gradient(color1, color2)}
    iv- .class{transform:translateX(-50%); }
    v- .class{transition:all 0.3s ease;}
    vi- .class{box-shadow:0px 0px 5px rgba(0,0,0.0.5}
    blog-image

Styling Store Products:

  • Used different CSS properties to achieve the expected layout using CSS e.g.
    -Calc Property
    -Pseudo Selectors
    -Box Shadow
    -Gradient Backgrounds
    -Not Selector
    -Transform Rotation
    Examples:
    i- . class:after{}
    ii- .class:before{ }
    iii- .class{width:calc(100% – 30px)}
    iv- .class:not(.specificElement){border-right:solid 1px black;}
    v- .class{background-image:linear-gradient(color1, color2)}
    vi- .class{transition:all 0.3s ease;}
    vii- .class{box-shadow:0px 0px 5px rgba(0,0,0.0.5}
    viii- .class{transform:rotate(45deg)}
    store-product-image

Styling News:

  • Used font awesome to use in content as Unicode to show the symbol in the right corner to the heading.
    Examples:
    i- .class:after{content:”\ f08e”  font-family:FontAwesome;}
    news-icon-image
    club-image

Styling Banner:

  • Used translate property to vertically center the captions text. Also used text shadow to make text blurred as water mark
    Examples:
    i- .class{top:50% transform:translateY(-50%); }
    ii- .class{text-shadow0px 0px 8px rgba(255,255,255,0.70); color:transparent;}
    banner--image
    event-image

The Mobile Menu:

  • Used the following properties to achieve the mobile menu icon to cross icon shape e.g.
    -Transform to rotate the icon bars to 45 degree
    -Transition Animation
    -Removed the center bar
    -Repositioned bars using absolute position
    -Made mobile menu 100% wide to the device width and set overflow hidden property to the body so that use can’t scroll the bottom contents and enabled mobile menu scroll only
    Examples:
    i- .class {transition:all 0.2s ease;transform:rotate(45deg);}
    mobile-menu-image

Pre-loading Images:

  • Used pseudo selector attached to the body to store the device big images path in the contents so that these images should not take too much time to load
    Examples:
    body:after{display:none;ontent: url(../images/view-tablet-h.png) url(../images/view-tablet-v.png) url(../images/view-mobile.png);}