Bootstrap Style Gradient Button Set

Coded bootstrap style gradient buttons. May help somebody
https://codepen.io/anon/pen/dWVwVE

Making a fullscreen image slider

We already know videos in webpage offers a button to make the video view-able in full-screen mode. It will be really nice if we can make our high quality image slider to be presented in full-screen.

In this small tutorial we will see making the slider full-screen.

To make my demo easy, I took basic image slider from bootstrap.

Making a responsive navigation without any additional css framework

This small tutorial will show you how to create a simple responsive navigation that works for any device.

Making a hamburger icon with pure css

Hamburger icon is used across all platforms, initially people were using it for mobile devices but now it is used on regular websites as well for indicating menu.

Since this hamburger icon spread ed across all devices and everybody knows what that icons means -- something hidden in there (i.e menu) or some options, So, I spent few minutes to code that with css.

Few interesting arts with sketch.js

I just found these interesting arts with sketch.js. This minimal footprint javascript library lets you to code fun things in your web designs.

You can do unlimited things with sketch javascript library.

Below are few examples done with sketch.js

Pulling your data attributes using CSS pseudo property

I learned this recently and have been using it frequently, getting the html data attributes to content using css pseudo properties.

In this article, we will actually see how to control position of an element using css and also getting the data attribute using css content property.

Amazing Javascript work done by this website

Google has released an amazing tool to look top costume searches happening for this Halloween. The CSS effects with javascript are interesting. Thought of sharing this.

This kind of presentation would be possible with javascript library Threejs .

How to Remove browser default css styles

Removing default browser styles is very important in our web design or development.

Many of the beginners wonder why there is a little bit of margin on the left side or styling the navigation list will not result as expected. The reason is each browser will have some set of predefined styles applied to our html web page.

Control elements visibility with bootstrap css

There is no doubt that bootstrap is one of the best css frameworks that are available today. It has lot useful css classes that make our web development easy.

In this small article I am explaining about hide elements with bootstrap css classes

 Hide on screens less than 768px width

.hidden-xs

 Hide on screens width between 768px(include) and 992px(exclude)

.hidden-sm

 Hide on screens width between 992px (include) and 1200px(exclude)

.hidden-md

 Hide on screens width anything above or equal 1200px

.hidden-lg

Simple demo for this is available here http://jsfiddle.net/mannemvamsi/x7dy3mcf/

Floating your sidebox between two points, Inspired by Google

I have seen google pagespeed insights floating the mobile or desktop screenshot on the sidebar between only certain points.
I just figured it out how to do it. And here is the tutorial explaning to make your website sidebar widget float between two limits.

Offer something when user is moving out of your page

What most of the publishers are doing to convert their new visitors as returining visitors? They offer something when users visit the site.
Now, when do they offer discount or free stuff, it depends from business to business, either when user spends some time on a page or
user visiting couple of pages or when he/she is leaving the website.

Sidebar Navigation of smashing magazine style

I thought it will be hard to implement such beautiful navigation. I was wrong about that. This smashing magazine style left navigation is implemented with just HTML and CSS.

How to create a simple login form of paypal style

I am a paypal user and I login to my account at least once in a week. The new login interface is very modern and attractive. Hence decided to share the code to create one such login interface for websites.

Creating twitter desktop style header navigation

Twitter navigation is one of my favorite navigation styles. So I have tried replicating the same navigation, which seems good and tested with the browsers Chrome, firefox and Microsoft Edge.

Google apps style navigation

I have seen different types of navigation menu styles for websites and apps. But the most user friendly menu style I have come across is google apps style navigation.

An example app that I can refer is gmail app and an example website I can give is google store

Making a full page navigation for all devices

Having responsive site navigation is important for a website and also it is necessary to have good user experience on all the platforms

A Simple Mobile Menu

I have created a simple mobile menu using html, javascript(jquery) and css. I have used similar mobile menu for couple of websites.

Below is how I created the menu. You can also edit and play with the code here https://jsfiddle.net/mannemvamsi/j9m571ve/

1. HTML for the menu(Navigation)

<div class="mobile-menu-wrapper">
    <div class="mobile-menu-control">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
<div class="mobile-menu">
    <ul>
        <li ><a href="#"><div class="header item-height" ><strong>The Main 1</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
        <li ><a href="#"><div class="header" ><strong>The Main 2</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

2. Add CSS to the html document( basically adding css only to above navigation part)

.mobile-menu-wrapper{
    position:fixed;
    left:-220px;
    width:260px;
    cursor:pointer;
}

div.mobile-menu {
    width:210px;
   
    float:left;
    background-color:#222;
}
.mobile-menu ul {
    list-style:none;
    margin:0;
    padding:0px;
   
}
.mobile-menu ul ul li {
    padding-left:8px;
   
}
.mobile-menu li {
    margin:0;
    padding:0;
}
.mobile-menu li, .mobile-menu li a {
    color:#fff;
    font-family:calibri, sans-serif;
    text-decoration:none;
}
.mobile-menu li li:hover {
    background-color:#111;
}
.mobile-menu .item-height{
    padding:10px 2px;
}

.mobile-menu-control {
    float:right;
    //border:1px solid green;
    cursor:pointer;
    background-color:#222;
    padding:5px;
}
.mobile-menu-control .bar {
    width:25px;
    margin:4px 0;
    border:2px solid #fdbd12;
}
.mobile-menu .header {
    color:#fdbd12;
    padding-left:4px;
    width:100%;
}

3. Use Jquery for actions

$(function() {
    var wrapper = $(".mobile-menu-wrapper");
    var mobileMenu = $(".mobile-menu");
    var mobileMenuWidth = mobileMenu.width();
    $(".mobile-menu-control").bind("click",function() {
       
        if(mobileMenu.hasClass("opened-menu")) {
           
           $(".mobile-menu-wrapper").animate({
               left:-(220)
              
           });
            mobileMenu.removeClass('opened-menu');
        }
        else
        {
           $(".mobile-menu-wrapper").animate({
               left:0
           });
            mobileMenu.addClass('opened-menu');
        }
    });
})

Fiddle is available for the same here : https://jsfiddle.net/mannemvamsi/j9m571ve/

Testing HTML on Real Devices - No wires required

Testing on Real devices

Making html pages or templates should be easy. If you are beginner w3schools.com might be the right place to start with. It is not just only developing things, testing is another important aspect of any our work.

Say if you have developed a simple html layout or a page, and you tested it using chrome browser and it looks so good and when you test it on other browsers like firefox and IE, there could few things that you would correct and make it works well on these browsers.

Best CSS for buttons

Some of the best CSS buttons collection with browser compatibility.

CSS Buttons play vital role for the website. Here is some css buttons examples like download buttons and social buttons. These nice css buttons will definitely help web developers and web designers.

Top CSS frameworks for web developers

I know the web developers like to code and also they would love things like readily made css frameworks that will ease their development process.

So, I collected some of the most popular CSS frameworks which can help beginners and web designers.