Sharecodepoint App Download Qrcode Sharecodepoint Android App Banner
Now You can search anything in sharecodepoint using your voice. Click on mic button. Sharecodepoint Voice Sharecodepoint Youtube Channel



Sharecodepoint popular queries

Sunday, 24 September 2017

The First Web Windows 10 Style By Sachin Yadav Production

How to make windows 10 start menu bar using Html , CSS , javascript, and bootstrap.

Introducing the new The First Web Windows 10 Demo for custom web HTML, JavaScript , CSS and Bootstrap. 

Include these CSS Files :
<link href="http://fastlearning.in/controller/css/css_files/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

CSS (Internal CSS) :
This css is used to changing the body layout, background-color, .dropdown-menu is use to remove the box-shadow and add the animation when drop-down menus opened with a up-down animation. CSS Tutorials:  CSS Properties Details
<style type="text/css">
         /*!
         *(http://wwww.fastlearning.in)
         * Copyright 2015 Sachin Yadav Production.
         */
         body{ background-color:#ccc;}
         .main-bg{ background-color:#666; padding-right:3px; padding-top:3px; padding-bottom:3px;}
         .open > .dropdown-menu {
         -webkit-transform: scale(1, 1);
         transform: scale(1, 1);  
         opacity:1;
         }
         .dropdown-menu {
         opacity:.3;
         -webkit-transform-origin: bottom;
         transform-origin: bottom;
         -webkit-animation-fill-mode: forwards;  
         animation-fill-mode: forwards; 
         -webkit-transform: scale(1, 0);
         display: block; 
         transition: all 0.2s linear;
         -webkit-transition: all 0.2s linear;
         box-shadow:none !important;
         }
 </style>

.flmenu CSS 
This class is used to changing the background color of menu bar option.

        .flmenu{
         width: 160px!important;
         height: 100px!important;
         margin:5px;
         display:block !important;
         padding-top:23px;
         color:#f5f5f5;
         border:2px solid transparent;
         }
         .span-icon{ font-size:30px;}
         .flmenu:hover{ background-color:#f5f5f5 !important; cursor:pointer; color:#CCCCCC;border-color:rgba(161,161,161,0.5);}
         .flmenu1{
         background-color: #000000;
         }
         .flmenu2{
         background-color: #00B159;
         }
         .flmenu3{
         background-color: #00AEDB;
         }
         .flmenu4{
         background-color: #F37735;
         }
         .flmenu5{
         background-color: #EC098C;
         }
         .flmenu6{
         background-color: #314E6C;
         }
         .flmenu7{
         background-color: #44A5AC;
         }
         .flmenu8{
         background-color: #297E83;
         }
         .flmenu9{
         background-color:#CC3366;
         }
         .flmenu10{
         background-color: #C9312C;
         }
         .flmenu11{
         background-color:#6699CC;
         }
         .flmenu12{
         background-color: #7C4199;
         }

Start Button CSS Code : 

.start-btn{
         padding: 8px 30px;
         border: 0;
         border-radius:1px !important;
         text-transform: uppercase;
         text-decoration: none;
         transition: 0.2s ease;
         box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
         outline: none!important;}
         .start-btn:hover{ box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}
         .start-btn:active{}
         #startmenu{width:1050px !important;background:none; !important;position: absolute; border:none;}

Volume & Time CSS Code :

.time{ font-size:25px; color:#f5f5f5; float:right;}
         .volume {
         transform: rotate(-90deg);
         }
         .volume:before {
         content: " ";
         }
         .volume input[type=range] {
         outline: none;
         -webkit-appearance: none;
         padding: 2px;
         background-color:#fff;
         border:10px solid rgba(0,0,0,0.4);
         position: relative;
         margin: 0;
         cursor: pointer;
         }
         .volume input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         background:#66CCCC;
         height: 15px;
         width: 15px;
         border-radius: 10%;
         }
         .volume input[type=range]::-moz-range-track {
         border: none;
         background:none;
         }
         .volume input[type=range]::-moz-range-thumb {
         background:#66CCCC;
         height: 20px;
         width: 20px;
         border-radius: 10%;
         }
         .volume input[type=range]::-ms-fill-lower, .volume input[type=range]::-ms-fill-upper {
         background: transparent;
         }
         .volume input[type=range]::-ms-track {
         height: 18px;
         border: none;
         background:none;
         margin: 0;
         }
         .volume input[type=range]::-ms-thumb {
         background:#66CCCC;
         height: 20px;
         width: 20px;
         border-radius: 10%;
         }
         .volume-settings{ margin-top:-100px !important; position:fixed;}
         .volume-none{ background:none !important; border:none !important; margin-left:50px;}

HTML Code : Option Menus 

<div id="context_menu" class="right-click-menu">
         <div class="list-group">
            <a href="#" class="list-group-item">View <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <a href="#" class="list-group-item">Sort By <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <a href="#" class="list-group-item">Refresh</a>
            <hr/>
            <a href="#" class="list-group-item">Paste</a>
            <a href="#" class="list-group-item">Paste shortcut</a>
            <a href="#" class="list-group-item">Undo Delete</a>
            <hr/>
            <a href="#" class="list-group-item">Graphics Properties...</a>
            <a href="#" class="list-group-item">Graphics Options <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
            <hr/>
            <a href="#" class="list-group-item">New <span  class="pull-right glyphicon glyphicon-play context-menu-icon"></span></a>
         </div>
      </div>

0 comments:

Post a Comment

 

Version 23.2.3.4 - 2016 - 2019 - © Sharecodepoint | Made in India. | Copyright Content