CSShrome

Developer
Adem Ilter
Size
7,087 Kb
Views
76,912
  1. CSShrome Previews
  2. CSShrome HTML Codes
  3. CSShrome CSS Codes
  4. CSShrome JS Codes

How do I make an csshrome?

★ chrome with css. What is a csshrome? How do you make a csshrome? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.

CSShrome Previews
IQ Test

CSShrome - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSShrome</title> <link rel='stylesheet prefetch' href='http://ademilter.com/lab/avatar/font-awesome.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* reset */
* { margin: 0; padding: 0;
}
.clear:before,
.clear:after { content: " "; display: table;
}
.clear:after { clear: both; }
.clear { *zoom: 1;}
.none { display: none;}
:focus,
:active { outline: 0 }
a { text-decoration: none }
li { list-style: none }
/* main */
html{ background: #f9c2c9;
background: -moz-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%, hsla(198,42%,67%,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(352,82%,87%,1)), color-stop(100%,hsla(198,42%,67%,1)));
background: -webkit-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: -o-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: -ms-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: linear-gradient(135deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c2c9', endColorstr='#88bacf',GradientType=1 );
}
body { font: normal 12px/1.3 Arial, sans-serif; color: #333;
}
/* frame */
#browser { width: 90%; min-width: 900px; margin: 40px 5%; background: #ccc; border: 1px solid #666; border-radius: 5px; overfloww: hidde; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 60px rgba(0,0,0,.6);
}
/* tabs */
.tabs { float: left; margin-left: 20px; height: 40px;
}
.tabs li,
.tabs li:before { cursor: default; z-index: 1; position: relative; border: 1px solid #aaa; border-bottom: 0; transform: skewX(25deg); float: left; height: 29px; margin: 10px 0 0 12px; padding: 0 15px; width: 160px; border-radius: 5px 5px 0 0; box-shadow: inset -1px 1px 0 rgba(255,255,255,.5); background: #ddd;
}
.tabs li:nth-child(1) { z-index: 7 }
.tabs li:nth-child(2) { z-index: 6 }
.tabs li:nth-child(3) { z-index: 5 }
.tabs li:nth-child(4) { z-index: 4 }
.tabs li:nth-child(5) { z-index: 3 }
.tabs li:nth-child(6) { z-index: 2 }
.tabs li:nth-child(7) { z-index: 1 }
.tabs li.active,
.tabs li.active:before { z-index: 9 !important; background: #eee; height: 30px; margin-bottom: -1px; border-color: #888;
}
.tabs li:before { content: ''; position: absolute; left: -18px; top: -1px; transform: skewX(140deg); border-right: 0; margin: 0; padding: 0; width: 30px; border-radius: 5px 0 0 0; box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
}
.tabs li img { z-index: 9; position: absolute; left: -6px; top: 6px; width: 16px; height: 16px; transform: skewX(-25deg); border-radius: 3px;
}
.tabs li a { z-index: 3; position: absolute; right: 10px; top: 7px; font-size: 18px; color: #777; width: 15px; height: 15px; line-height: 16px; text-align: center; transform: skewX(-25deg); border-radius: 100%;
}
.tabs li a:hover { color: #fff; background-color: #e05d68; box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.tabs li a:active { background-color: #d83240 }
.tabs li span { display: block; width: 98%; line-height: 30px; transform: skewX(-25deg); white-space: nowrap; overflow: hidden;
}
.tabs li span:after { content: ''; width: 25px; height: 28px; position: absolute; right: 0; top: 1px; background: -webkit-linear-gradient(left, hsla(0,0%,87%,0) 0%,hsla(0,0%,87%,1) 77%,hsla(0,0%,87%,1) 100%);
}
.tabs li.active span:after { background: -webkit-linear-gradient(left, hsla(0,0%,93%,0) 0%,hsla(0,0%,93%,1) 77%,hsla(0,0%,93%,1) 100%) }
/* tab add */
.add { text-align: center; font-weight: bold; color: #ccc; line-height: 17px; font-size: 15px; float: left; margin: 16px 8px 0; width: 23px; height: 16px; background: #ddd; border-radius: 5px; border: 1px solid #aaa; transform: skewX(25deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.add:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1); background: #f8f8f8;
}
.add:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.2); background: #ccc; color: #555;
}
/* bar */
.bar { z-index: 3; position: relative; clear: both; padding: 6px; background: #eee; border-top: 1px solid #aaa;
}
.bar ul { float: left;}
.bar > ul > li { position: relative; float: left; margin: 0 2px;
}
.bar > ul > li > a,
.bar ul li label{ display: block; width: 26px; height: 26px; color: #444; text-align: center; line-height: 26px; font-size: 20px; border-radius: 4px; border: 1px solid #eee;
}
.bar > ul > li > a:hover,
.bar ul li label:hover { border: 1px solid #ccc; background: #eee; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.1);
}
.bar > ul > li > a:active ,
.bar ul li label:active,
.bar ul.drop li input:checked ~ label { border: 1px solid #bbb; background: #ccc; box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.bar .favorite { z-index: 5; position: absolute; right:48px; top: 8px; width: 26px; height: 26px; color: #888; text-align: center; line-height: 26px; font-size: 24px;
}
.bar input:checked ~ .favorite { color: #e8bc02; text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.bar input:checked ~ .icon-star-empty:before { content: "\f005"; }
/* addres bar */
.bar input { display:block; float:left; left: 130px; right: 45px; position: absolute; margin-left: 10px; border: 1px solid #bbb; height: 26px; font-size: 13px; line-height: 26px; border-radius: 5px; padding: 0 10px; box-shadow: inset 0 1px 0 rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,1);
}
/* menu .drop */
.bar ul.drop { float: right;
}
.bar ul.drop li input { display: none;
}
.bar ul.drop li ul { display: none; position: absolute; right: 0; top: 30px; width: 230px; padding: 5px 0; background-color: rgba(255,255,255,.94); box-shadow: 0 1px 7px rgba(0,0,0,.4); border-radius: 5px; border-top: 1px solid #ddd;
}
.bar ul.drop li input:checked ~ ul { display: block;
}
.bar ul.drop li ul li.slice { margin: 6px 0; height: 2px; border-top: 1px solid #ddd;
}
.bar ul.drop li ul li a { display: block; height: 20px; line-height: 20px; padding-left: 10px; font-size: 13px; color: #222;
}
.bar ul.drop li ul li a:hover,
.bar ul.drop li ul li a:hover span{ background: -webkit-linear-gradient(top, #5da4ea 0%,#4096ee 100%); color: #fff;
}
.bar ul.drop li ul li a span { float: right; margin-right: 10px; color: #999;
}
/* bookmarks */
.bookmark { position: relative; z-index: 2; clear: both; background: #eee; border-bottom: 1px solid #bbb;
}
.bookmark ul { overflow: hidden; margin: 0 5px; height: 32px;
}
.bookmark ul li { float: left; margin: 0 0 5px;
}
.bookmark ul li a { position: relative; display: block; max-width: 130px; padding: 0 8px 0 28px; height: 25px; line-height: 25px; background: #eee; border-radius: 5px; border: 1px solid #eee; color: #444; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .2s ease;
}
.bookmark ul li a:hover { border: 1px solid #ccc; background: #eee; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.1);
}
.bookmark ul li a:active { border: 1px solid #bbb; background: #ddd; box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
}
.bookmark ul li a img { width: 16px; position: absolute; left: 7px; top: 4px; border-radius: 3px;
}
.bookmark ul li a span { }
/* page - iframe */
.page { clear: both; height: 550px; background: #c5c5c5; border-radius: 0 0 5px 5px; overflow: hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="browser" class="clear"> <!-- tabs --> <ul class="tabs"> <li> <img src="http://cdn.flaticon.com/png/64/51767.png"> <span>CodePen - A Pen by Adem ilter</span> <a class="close" href="http://codepen.io/ademilter">×</a> </li> <li class="active"> <img src="http://ademilter.com/wp-content/themes/ademilter/img/logo.png"> <span>Adem ilter - Master of Pixels</span> <a class="close" href="http://ademilter.com">×</a> </li> <li> <img src="http://dribbble.com/apple-touch-icon-precomposed.png"> <span>Dribbble - Adem ilter</span> <a class="close" href="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-192-c5b6848418ab3bd5b2a6b335f6f977a6.png">×</a> </li> </ul> <!-- add tab --> <a href="#" class="add"></a> <!-- bar --> <div class="bar clear"> <ul> <li><a class="icon-arrow-left" href="#"></a></li> <li><a class="icon-arrow-right" href="#"></a></li> <li><a class="icon-refresh" href="#"></a></li> <li><a class="icon-home" href="#"></a></li> </ul> <input id="favorite" type="checkbox" class="none"> <label for="favorite" class="favorite icon-star-empty"></label> <input placeholder="Search" value="http://ademilter.com/" type="text"> <ul class="drop"> <li> <input id="panel" type="checkbox"> <label for="panel" class="icon-reorder"></label> <ul> <li><a href="#">New Tab <span>⌘T</span></a></li> <li><a href="#">New Window <span>⌘N</span></a></li> <li><a href="#">New Incognita Window <span>⇧⌘N</span></a></li> <li><a href="#">Bookmarks <span>▶</span></a></li> <li class="slice"></li> <li><a href="#">Edit</a></li> <li class="slice"></li> <li><a href="#">Zoom</a></li> <li class="slice"></li> <li><a href="#">Save Page As.. <span>⌘S</span></a></li> <li><a href="#">Find.. <span>⌘F</span></a></li> <li><a href="#">Print.. <span>⌘P</span></a></li> <li><a href="#">Tools <span>▶</span></a></li> <li class="slice"></li> <li><a href="#">History <span>⌘Y</span></a></li> <li><a href="#">Donwloads <span>⇧⌘J</span></a></li> <li class="slice"></li> <li><a href="#">Signed in as [email protected]</a></li> <li class="slice"></li> <li><a href="#">Settings <span>⌘,</span></a></li> <li><a href="#">About Google Chrome</a></li> <li><a href="#">View Background Pages (8)</a></li> <li><a href="#">Help</a></li> </ul> </li> </ul> </div> <!-- bookmark --> <div class="bookmark"> <ul> <li> <a href="http://ademilter.com"> <img src="http://ademilter.com/wp-content/themes/ademilter/img/logo.png"> <span>http://ademilter.com</span></a></li> <li> <a href="http://codepen.io/ademilter"> <img src="http://cdn.flaticon.com/png/64/51767.png"> <span>Adem ilter on CodePen</span></a></li> <li> <a href="https://twitter.com/ademilter"> <img src="//si0.twimg.com/favicons/favicon.ico"> <span>Twitter</span></a></li> <li> <a href="http://youtube.com"> <img src="http://s.ytimg.com/yts/img/favicon-vfldLzJxy.ico"> <span>Youtube</span></a></li> <li> <a href="http://dribbble.com/ademilter"> <img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-192-c5b6848418ab3bd5b2a6b335f6f977a6.png"> <span>Dribbble</span></a></li> <li> <a href="https://www.facebook.com/WebMagazinCo"> <img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/16/facebook.png"> <span>Web Magazin on Facebook</span></a></li> <li> <a href="http://vimeo.com/29017795"> <img src="http://a.vimeocdn.com/images_v6/apple-touch-icon-72.png"> <span>Experience Zero Gravity on Vimeo</span></a></li> </ul> </div> <div class="page"> <iframe width="100%" height="100%" src="http://codepen.io/ademilter" frameborder="0"></iframe> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSShrome - Script Codes CSS Codes

/* reset */
* { margin: 0; padding: 0;
}
.clear:before,
.clear:after { content: " "; display: table;
}
.clear:after { clear: both; }
.clear { *zoom: 1;}
.none { display: none;}
:focus,
:active { outline: 0 }
a { text-decoration: none }
li { list-style: none }
/* main */
html{ background: #f9c2c9;
background: -moz-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%, hsla(198,42%,67%,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(352,82%,87%,1)), color-stop(100%,hsla(198,42%,67%,1)));
background: -webkit-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: -o-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: -ms-linear-gradient(-45deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
background: linear-gradient(135deg, hsla(352,82%,87%,1) 0%,hsla(198,42%,67%,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c2c9', endColorstr='#88bacf',GradientType=1 );
}
body { font: normal 12px/1.3 Arial, sans-serif; color: #333;
}
/* frame */
#browser { width: 90%; min-width: 900px; margin: 40px 5%; background: #ccc; border: 1px solid #666; border-radius: 5px; overfloww: hidde; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 60px rgba(0,0,0,.6);
}
/* tabs */
.tabs { float: left; margin-left: 20px; height: 40px;
}
.tabs li,
.tabs li:before { cursor: default; z-index: 1; position: relative; border: 1px solid #aaa; border-bottom: 0; transform: skewX(25deg); float: left; height: 29px; margin: 10px 0 0 12px; padding: 0 15px; width: 160px; border-radius: 5px 5px 0 0; box-shadow: inset -1px 1px 0 rgba(255,255,255,.5); background: #ddd;
}
.tabs li:nth-child(1) { z-index: 7 }
.tabs li:nth-child(2) { z-index: 6 }
.tabs li:nth-child(3) { z-index: 5 }
.tabs li:nth-child(4) { z-index: 4 }
.tabs li:nth-child(5) { z-index: 3 }
.tabs li:nth-child(6) { z-index: 2 }
.tabs li:nth-child(7) { z-index: 1 }
.tabs li.active,
.tabs li.active:before { z-index: 9 !important; background: #eee; height: 30px; margin-bottom: -1px; border-color: #888;
}
.tabs li:before { content: ''; position: absolute; left: -18px; top: -1px; transform: skewX(140deg); border-right: 0; margin: 0; padding: 0; width: 30px; border-radius: 5px 0 0 0; box-shadow: inset 1px 1px 0 rgba(255,255,255,.5);
}
.tabs li img { z-index: 9; position: absolute; left: -6px; top: 6px; width: 16px; height: 16px; transform: skewX(-25deg); border-radius: 3px;
}
.tabs li a { z-index: 3; position: absolute; right: 10px; top: 7px; font-size: 18px; color: #777; width: 15px; height: 15px; line-height: 16px; text-align: center; transform: skewX(-25deg); border-radius: 100%;
}
.tabs li a:hover { color: #fff; background-color: #e05d68; box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.tabs li a:active { background-color: #d83240 }
.tabs li span { display: block; width: 98%; line-height: 30px; transform: skewX(-25deg); white-space: nowrap; overflow: hidden;
}
.tabs li span:after { content: ''; width: 25px; height: 28px; position: absolute; right: 0; top: 1px; background: -webkit-linear-gradient(left, hsla(0,0%,87%,0) 0%,hsla(0,0%,87%,1) 77%,hsla(0,0%,87%,1) 100%);
}
.tabs li.active span:after { background: -webkit-linear-gradient(left, hsla(0,0%,93%,0) 0%,hsla(0,0%,93%,1) 77%,hsla(0,0%,93%,1) 100%) }
/* tab add */
.add { text-align: center; font-weight: bold; color: #ccc; line-height: 17px; font-size: 15px; float: left; margin: 16px 8px 0; width: 23px; height: 16px; background: #ddd; border-radius: 5px; border: 1px solid #aaa; transform: skewX(25deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.add:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,1); background: #f8f8f8;
}
.add:active { box-shadow: inset 0 1px 2px rgba(0,0,0,.2); background: #ccc; color: #555;
}
/* bar */
.bar { z-index: 3; position: relative; clear: both; padding: 6px; background: #eee; border-top: 1px solid #aaa;
}
.bar ul { float: left;}
.bar > ul > li { position: relative; float: left; margin: 0 2px;
}
.bar > ul > li > a,
.bar ul li label{ display: block; width: 26px; height: 26px; color: #444; text-align: center; line-height: 26px; font-size: 20px; border-radius: 4px; border: 1px solid #eee;
}
.bar > ul > li > a:hover,
.bar ul li label:hover { border: 1px solid #ccc; background: #eee; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.1);
}
.bar > ul > li > a:active ,
.bar ul li label:active,
.bar ul.drop li input:checked ~ label { border: 1px solid #bbb; background: #ccc; box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.bar .favorite { z-index: 5; position: absolute; right:48px; top: 8px; width: 26px; height: 26px; color: #888; text-align: center; line-height: 26px; font-size: 24px;
}
.bar input:checked ~ .favorite { color: #e8bc02; text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.bar input:checked ~ .icon-star-empty:before { content: "\f005"; }
/* addres bar */
.bar input { display:block; float:left; left: 130px; right: 45px; position: absolute; margin-left: 10px; border: 1px solid #bbb; height: 26px; font-size: 13px; line-height: 26px; border-radius: 5px; padding: 0 10px; box-shadow: inset 0 1px 0 rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,1);
}
/* menu .drop */
.bar ul.drop { float: right;
}
.bar ul.drop li input { display: none;
}
.bar ul.drop li ul { display: none; position: absolute; right: 0; top: 30px; width: 230px; padding: 5px 0; background-color: rgba(255,255,255,.94); box-shadow: 0 1px 7px rgba(0,0,0,.4); border-radius: 5px; border-top: 1px solid #ddd;
}
.bar ul.drop li input:checked ~ ul { display: block;
}
.bar ul.drop li ul li.slice { margin: 6px 0; height: 2px; border-top: 1px solid #ddd;
}
.bar ul.drop li ul li a { display: block; height: 20px; line-height: 20px; padding-left: 10px; font-size: 13px; color: #222;
}
.bar ul.drop li ul li a:hover,
.bar ul.drop li ul li a:hover span{ background: -webkit-linear-gradient(top, #5da4ea 0%,#4096ee 100%); color: #fff;
}
.bar ul.drop li ul li a span { float: right; margin-right: 10px; color: #999;
}
/* bookmarks */
.bookmark { position: relative; z-index: 2; clear: both; background: #eee; border-bottom: 1px solid #bbb;
}
.bookmark ul { overflow: hidden; margin: 0 5px; height: 32px;
}
.bookmark ul li { float: left; margin: 0 0 5px;
}
.bookmark ul li a { position: relative; display: block; max-width: 130px; padding: 0 8px 0 28px; height: 25px; line-height: 25px; background: #eee; border-radius: 5px; border: 1px solid #eee; color: #444; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; transition: all .2s ease;
}
.bookmark ul li a:hover { border: 1px solid #ccc; background: #eee; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 1px rgba(0,0,0,.1);
}
.bookmark ul li a:active { border: 1px solid #bbb; background: #ddd; box-shadow: inset 0 1px 0 rgba(0,0,0,.1);
}
.bookmark ul li a img { width: 16px; position: absolute; left: 7px; top: 4px; border-radius: 3px;
}
.bookmark ul li a span { }
/* page - iframe */
.page { clear: both; height: 550px; background: #c5c5c5; border-radius: 0 0 5px 5px; overflow: hidden;
}

CSShrome - Script Codes JS Codes

/* * @ademilter
*/
// empty link
$("a[href^='#']").on("click", function(e){ e.preventDefault(); //return false;
});
// tab New
$(".add").on("click", function(e){ if($(".tabs li").size() < 4){ $(".tabs li.active").removeClass("active"); $(".tabs").append('<li class="active"><span>New Tab</span><a class="close" href="#">×</a></li>'); $(".page iframe").attr("src", " "); }
});
// tab Click.active
$(".tabs li").on("click", function(e){ //önce active olan class'ı silelim $(".tabs li.active").removeClass("active"); $(this).addClass("active"); //tab'ın sayfasını yükleyelim -ok $(".page iframe").attr("src", $(this).find("a").attr("href")); e.preventDefault();
});
// tab Close
$(".tabs li a.close").on("click", function(e){ $(this).closest("li").remove(); // eğer son tab kapatılıyorsa, yeni boş bir tab açalım if($(".tabs li").size() == 0){ $(".tabs").append('<li><span>New Tab</span><a class="close" href="#">×</a></li>'); } //bir önceki tab'a geçelim $(".tabs li:last-child").addClass("active"); e.preventDefault();
});
// bookmark link
$(".bookmark ul li a").on("click", function(e){ $(".page iframe").attr("src", $(this).attr("href")); e.preventDefault();
});
CSShrome - Script Codes
CSShrome - Script Codes
Home Page Home
Developer Adem Ilter
Username ademilter
Uploaded June 11, 2022
Rating 3
Size 7,087 Kb
Views 76,912
Do you need developer help for CSShrome?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adem Ilter (ademilter) Script Codes
Name
Responsive table
Filter range slider
Fake loading
Timeline with css
Circle loading
Interacthings logo animation
Loading svg
Lunar eclipse
Test-tube
404 No signal
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!