(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. Reshaping Elements Using CSS3 For Any Bootstrap Based Theme
Jun 16

Reshaping Elements Using CSS3 For Any Bootstrap Based Theme

  • 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);}
  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (492)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (57)
  • Implementation Notes (148)
  • Learn More (158)
  • LMS (8)
  • Look Inside (10)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • Ultimate Django: Become a Skilled Developer in 5 minutes
  • Create your 1st workflow with GitHub Actions within 5 Minutes
  • GitHub Actions- Automate your software workflows with excellence
  • Yii Framework – Accomplish Repetitive & Iterative Projects with Ease
  • A Recipe for CRM Software Development

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com