Don't miss to get latest question paper and articles direct in facebook news feed.



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

X

Don't miss to get latest question paper and articles direct in facebook news feed.

 

ShareCodePoint : Version 17.0.8 - 2016 - 2018 - © Sachin Yadav Production Made in India.