使用HTML5 CSS3构建的Chrome浏览器标题栏仿真界面

Chrome Title Bar in CSS

h5, css3, browser

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3119
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var tab = 0;
var pageData = [{
        url: "#",
        title: "HTML5 on Techbrood",
        special: null,
        info: "https",
        back_btn: true,
        forward_btn: false,
        bookmarked: true,
        address_bar_selected: false,
        extensions: [{
                notifications: 0
            },

{
                notifications: 0
            },

{
                notifications: 1
            },

{
                notifications: 0
            }
        ]
    },

{
        url: "#",
        title: "HTML5 on Techbrood",
        special: "Techbrood, Inc. [China]",
        info: "https",
        back_btn: true,
        forward_btn: true,
        bookmarked: false,
        address_bar_selected: false,
        extensions: [{
                notifications: 0
            },

{
                notifications: 0
            },

{
                notifications: 0
            }
        ]
    },

{
        url: null,
        title: "New Tab",
        special: null,
        back_btn: false,
        forward_btn: false,
        bookmarked: false,
        address_bar_selected: true,
        extensions: [{
                notifications: 0
            },

{
                notifications: 0
            },

{
                notifications: 0
            }
        ]
    }
];

$("#windowed").click(function() {
    $("#tab-bar").toggleClass("windowed");
    $("#chrome-bar").toggleClass("windowed");
    if ($("#windowed").attr("fullscreen") == 0) {
        $("#windowed").attr("fullscreen", 1);
        $("#windowed-fullscreen-button-img").attr(
            "src",
            "/uploads/1811/windows-window.png");

} else {
        $("#windowed").attr("fullscreen", 0);
        $("#windowed-fullscreen-button-img").attr(
            "src",
            "/uploads/1811/windows-full-screen.png");

}
});
$(".tab-container").click(function() {
    $(".tab-container").removeClass("active");
    $(this).addClass("active");
    tab = parseInt($(this).attr("tab-id"));
    var tabInfo = pageData[tab];
    console.log(tabInfo);

if (tabInfo.url != null) {
        var protocol = /[a-z]*:\/\//.exec(tabInfo.url)[0];
        var domain = /[0-9a-z]*\.[a-z]*/.exec(tabInfo.url);
        var extension = tabInfo.url.replace(/[a-z]*:\/\/[a-z]+\.[a-z]+/, "");
        $("#address").html("<span class=\"protocol\">" +
            protocol + "</span><span class=\"domain\">" + domain + "</span><span class=\"extension\">" + extension + "</span>");

$("#info >*:not(." + tabInfo.info + ")").addClass("hide");
        $("#info >." + tabInfo.info).removeClass("hide");
    } else {
        $("#address").html("");
        $("#info >*:not(.favicon)").addClass("hide");
        $("#info >.favicon").removeClass("hide");
    }
    if (tabInfo.special != null) {
        $("#info").addClass("show-special");
        $(".special").
        html(tabInfo.special).
        removeClass("hide");
    } else {
        $("#info").removeClass("show-special");
        $(".special").addClass("hide");
    }
    if (tabInfo.back_btn) {
        $("#back-button").removeAttr('disabled');
    } else {
        $("#back-button").attr('disabled', '');
    }
    if (tabInfo.forward_btn) {
        $("#forward-button").removeAttr('disabled');
    } else {
        $("#forward-button").attr('disabled', '');
    }
    if (tabInfo.bookmarked) {
        $(".not-favourite").addClass('hide');
        $(".favourite").removeClass('hide');
    } else {
        $(".favourite").addClass('hide');
        $(".not-favourite").removeClass('hide');
    }
    if (tabInfo.address_bar_selected) {
        $("#address-bar").addClass('selected');
        $("#info").attr('disabled', '');
    } else {
        $("#address-bar").removeClass('selected');
        $("#info").removeAttr('disabled');
    }
    for (var i = 0; i < tabInfo.extensions.length; i++) {
        if (tabInfo.extensions[i].notifications > 0) {
            $(".button.extension[extension-id=" + i + "]").attr('data-notifications', tabInfo.extensions[i].notifications);
        } else {
            $(".button.extension[extension-id=" + i + "]").removeAttr('data-notifications');
        }
    }
});
$("#bookmark").click(function() {
    pageData[tab].bookmarked = !pageData[tab].bookmarked;
    $(".not-favourite").toggleClass('hide');
    $(".favourite").toggleClass('hide');
});

编译

CSS

@charset "UTF-8";
/* $system-color-blue:#0063B1;
 * $system-color-orange:#FF8C00;
 * $system-color-purple:#B146C2;
 * $system-color-green:#C30052;
 * $system-color-yellow:#FFB900; */

body {
    display: flex;
    flex-direction: column;
    padding: 200px 50px;
    background-color: #EEEEEE;
    /**[data-ripple] {
      position: relative;
      >*:not(.container) {
         &.held, &:active {
            .ripple {
               position: absolute;

background-color:#000;

transform:translate(-50%,-50%);

animation: grow .25s ease-out;
               @keyframes grow {
                  0% {
                     width:0px;
                     height:0px;
                  }
                  100% {
                     width:64px;
                     height:64px;
                  }
               }
            }
         }
      }
   }*/
}
body #chrome-bar {
    position: relative;
    top: 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid #B6B4B6;
    font-family: "Segoe UI", "Roboto", sans-serif;
}
body #chrome-bar.windowed {
    top: -9px;
}
body #chrome-bar #tab-bar {
    display: flex;
    flex-direction: row;
    height: 34px;
    padding-left: 8px;
    background-color: #DEE1E6;
}
body #chrome-bar #tab-bar.windowed {
    height: 43px;
    padding-top: 9px;
}
body #chrome-bar #tab-bar.windowed #window-buttons {
    top: -9px;
}
body #chrome-bar #tab-bar #tabs {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
body #chrome-bar #tab-bar #tabs .tab-frame {
    flex-grow: 1;
    max-width: 256px;
    width: calc(calc(100% - 240px)/3);
    margin-right: -17px;
}
body #chrome-bar #tab-bar #tabs .tab-frame:before {
    position: absolute;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container {
    position: relative;
    left: -8px;
    overflow: hidden;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round {
    z-index: 1;
    position: absolute;
    bottom: 0px;
    width: 32px;
    height: 32px;
    border: 8px solid transparent;
    border-radius: 100%;
    transition: 0.25s;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round.round-left {
    left: -16px;
    bottom: -8px;
    border-right-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .round.round-right {
    right: -16px;
    bottom: -8px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-left-color: transparent;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab {
    z-index: 2;
    position: relative;
    left: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(100% - 16px);
    height: 34px;
    padding: 0px 8px 0px 12px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: 0.25s;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .icon {
    width: 16px;
    height: 16px;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .title {
    position: relative;
    top: -1px;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 8px;
    margin-right: 4px;
    color: #5F6368;
    font-size: 12px;
    pointer-events: none;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .title:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    box-shadow: inset -18px 0 18px -18px #DEE1E6, inset -18px 0 18px -18px #DEE1E6, inset -18px 0 18px -18px #DEE1E6;
    content: '';
    transition: 0.25s;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close {
    position: relative;
    min-width: 16px;
    height: 16px;
    border-radius: 100%;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close svg {
    position: absolute;
    top: 4px;
    left: 4px;
    pointer-events: none;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close svg path {
    fill: #5F6368;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:hover {
    background-color: #E8EAED;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:hover svg path {
    fill: #3B4042;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container .tab .close:active {
    background-color: #DADCE0;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:after {
    position: absolute;
    top: 7px;
    right: 8px;
    -webkit-transform: translateY(0.5px);
    transform: translateY(0.5px);
    width: 1px;
    height: 20px;
    background-color: rgba(45, 48, 50, 0.3359375);
    content: '';
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .round.round-left {
    border-right-color: #EEEFF1;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .round.round-right {
    border-left-color: #EEEFF1;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab {
    background-color: #EEEFF1;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab .title {
    color: #5F6368;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container:hover .tab .title:before {
    box-shadow: inset -18px 0 18px -18px #EEEFF1, inset -18px 0 18px -18px #EEEFF1, inset -18px 0 18px -18px #EEEFF1;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active {
    z-index: 5;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round {
    transition: 0s;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round.round-left {
    border-right-color: #FFFFFF;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .round.round-right {
    border-left-color: #FFFFFF;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab {
    transition: 0s;
    background-color: #FFFFFF;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab .title {
    color: #3C4043;
}
body #chrome-bar #tab-bar #tabs .tab-frame .tab-container.active .tab .title:before {
    transition: 0s;
    box-shadow: inset -18px 0 18px -18px #FFFFFF, inset -18px 0 18px -18px #FFFFFF, inset -18px 0 18px -18px #FFFFFF;
}
body #chrome-bar #tab-bar #tabs #new-tab {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-left: 9px;
    border-radius: 100%;
    transition: .25s;
}
body #chrome-bar #tab-bar #tabs #new-tab svg {
    width: 12px;
    height: 12px;
}
body #chrome-bar #tab-bar #tabs #new-tab svg path {
    fill: #595C62;
}
body #chrome-bar #tab-bar #tabs #new-tab:hover {
    background-color: #CBCED3;
}
body #chrome-bar #tab-bar #tabs #new-tab:active {
    background-color: #BFC1C6;
}
body #chrome-bar #tab-bar #gap {
    width: 64px;
}
body #chrome-bar #tab-bar #window-buttons {
    position: relative;
    display: flex;
    flex-direction: row;
}
body #chrome-bar #tab-bar #window-buttons > div {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 29px;
    margin-bottom: 5px;
    cursor: pointer;
}
body #chrome-bar #tab-bar #window-buttons > div img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
body #chrome-bar #tab-bar #window-buttons > div,
body #chrome-bar #tab-bar #window-buttons > div * {
    transition: .25s;
}
body #chrome-bar #tab-bar #window-buttons > div:not(.close):hover {
    background-color: rgba(0, 0, 0, 0.09765625);
}
body #chrome-bar #tab-bar #window-buttons > div:not(.close):active {
    background-color: rgba(0, 0, 0, 0.1953125);
    transition: 0s;
}
body #chrome-bar #tab-bar #window-buttons > div.close:hover {
    background-color: #E81123;
}
body #chrome-bar #tab-bar #window-buttons > div.close:hover img {
    -webkit-filter: invert(1);
    filter: invert(1);
}
body #chrome-bar #tab-bar #window-buttons > div.close:active {
    background-color: #E36571;
    transition: 0s;
}
body #chrome-bar #main-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 36px;
    padding: 0 6px;
    background-color: #FFFFFF;
}
body #chrome-bar #main-bar .button {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 2px;
    border-radius: 100%;
    transition: .25s;
}
body #chrome-bar #main-bar .button[disabled] svg path {
    fill: #BABCBE;
}
body #chrome-bar #main-bar .button:not([disabled]):hover {
    background-color: #EEEEEE;
}
body #chrome-bar #main-bar .button:not([disabled]):active {
    transition: .05s;
    background-color: #E2E2E2;
}
body #chrome-bar #main-bar .button:not([disabled]) svg path {
    fill: #5F6368;
}
body #chrome-bar #main-bar .button svg {
    width: 14px;
    height: 14px;
}
body #chrome-bar #main-bar .button.extension {
    position: relative;
}
body #chrome-bar #main-bar .button.extension img {
    width: 16px;
}
body #chrome-bar #main-bar .button.extension[data-disabled] {
    -webkit-filter: grayscale(1) opacity(50%);
    filter: grayscale(1) opacity(50%);
}
body #chrome-bar #main-bar .button.extension[data-notifications]:before {
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 12px;
    min-width: 12px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #FFFFFF;
    background-color: #555555;
    color: #FFFFFF;
    font-size: 6px;
    content: attr(data-notifications);
}
body #chrome-bar #main-bar #address-bar {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    height: 28px;
    margin: 0 8px 0 6px;
    border-radius: 20px;
    background-color: #F1F3F4;
    white-space: pre;
}
body #chrome-bar #main-bar #address-bar.selected {
    box-shadow: 0 0 0 1px #B3CEFB, inset 0 0 0 1px #B3CEFB;
    background-color: #FFFFFF;
}
body #chrome-bar #main-bar #address-bar .address-bar-button {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 24px;
    min-width: 32px;
    padding: 0 10px;
    margin: 0 2px;
    border-radius: 20px;
    font-size: 14px;
    transition: background-color .25s;
}
body #chrome-bar #main-bar #address-bar .address-bar-button.show-special {
    margin-right: 9px;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg path {
    fill: #5F6368;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.favourite path {
    fill: #4285F4;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.https,
body #chrome-bar #main-bar #address-bar .address-bar-button img.https,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.https {
    width: 12px;
    height: 12px;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.error,
body #chrome-bar #main-bar #address-bar .address-bar-button img.error,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.error {
    width: 14px;
    height: 14px;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.favicon,
body #chrome-bar #main-bar #address-bar .address-bar-button svg.not-favourite,
body #chrome-bar #main-bar #address-bar .address-bar-button svg.favourite,
body #chrome-bar #main-bar #address-bar .address-bar-button img.favicon,
body #chrome-bar #main-bar #address-bar .address-bar-button img.not-favourite,
body #chrome-bar #main-bar #address-bar .address-bar-button img.favourite,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.favicon,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.not-favourite,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.favourite {
    width: 16px;
    height: 16px;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.special,
body #chrome-bar #main-bar #address-bar .address-bar-button img.special,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.special {
    position: relative;
    margin-left: 10px;
    color: #5F6368;
    white-space: pre;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.special:before,
body #chrome-bar #main-bar #address-bar .address-bar-button img.special:before,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.special:before {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: -10px;
    width: 1px;
    background-color: #9D9E9F;
    content: '';
    transition: .25s;
}
body #chrome-bar #main-bar #address-bar .address-bar-button svg.hide,
body #chrome-bar #main-bar #address-bar .address-bar-button img.hide,
body #chrome-bar #main-bar #address-bar .address-bar-button .special.hide {
    display: none;
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):hover {
    background-color: #D6D8DA;
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):hover .special:before {
    opacity: 0;
}
body #chrome-bar #main-bar #address-bar .address-bar-button:not([disabled]):active {
    transition: .05s;
    background-color: #C9CBCD;
}
body #chrome-bar #main-bar #address-bar #address {
    flex-grow: 1;
    font-size: 14px;
}
body #chrome-bar #main-bar #address-bar #address .protocol {
    color: #5F6368;
}
body #chrome-bar #main-bar #address-bar #address .domain {
    color: #202124;
}
body #chrome-bar #main-bar #address-bar #address .extension {
    color: #80868B;
}
body #chrome-bar #main-bar .seperator {
    width: 1px;
    height: 16px;
    margin: 0 6px 0 8px;
    background-color: #CED0D1;
}

HTML

<div id="chrome-bar">
    <div id="tab-bar">
        <div id="tabs">
            <div class="tab-frame">
                <div class="tab-container active" title="HTML5 on Techbrood" tab-id="0">
                    <div class="tab">
                        <img src="https://techbrood.com/themes/techbrood/image/logo.png" class="icon">
                        <div class="title">
                            HTML5 on Techbrood
                        </div>
                        <div class="close">
                            <svg xmlns="https://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                                <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z" />
                            </svg>
                        </div>
                    </div>
                    <div class="round round-left"></div>
                    <div class="round round-right"></div>
                </div>
            </div>
            <div class="tab-frame">
                <div class="tab-container" title="CSS3 on Techbrood" tab-id="1">
                    <div class="tab">
                        <img src="https://techbrood.com/themes/techbrood/image/logo.png" class="icon">
                        <div class="title">
                            CSS3 on Techbrood
                        </div>
                        <div class="close">
                            <svg xmlns="https://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                                <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z" />
                            </svg>
                        </div>
                    </div>
                    <div class="round round-left"></div>
                    <div class="round round-right"></div>
                </div>
            </div>
            <div class="tab-frame">
                <div class="tab-container" title="New Tab" tab-id="2">
                    <div class="tab">
                        <div class="title">
                            New Tab
                        </div>
                        <div class="close">
                            <svg xmlns="https://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 16 16">
                                <path d="M16,1.6L14.4,0L8,6.4L1.6,0L0,1.6L6.4,8L0,14.4L1.6,16L8,9.6l6.4,6.4l1.6-1.6L9.6,8L16,1.6z" />
                            </svg>
                        </div>
                    </div>
                    <div class="round round-left"></div>
                    <div class="round round-right"></div>
                </div>
            </div>
            <div id="new-tab" class="new-tab-ripple" title="New tab" data-ripple="BFC1C6">
                <svg viewBox="0 0 16 16">
                    <path d="M16 9.1H9.1V16H6.9V9.1H0V6.9h6.9V0h2.3v6.9H16V9.1z" />
                </svg>
            </div>
        </div>
        <div id="gap"></div>
        <div id="window-buttons">
            <div class="minimise">
                <img src="/uploads/1811/windows-minimise.png" alt="">
            </div>
            <div id="windowed" fullscreen="1">
                <img id="windowed-fullscreen-button-img" src="/uploads/1811/windows-window.png" alt="">
            </div>
            <div class="close">
                <img src="/uploads/1811/windows-close.png" alt="">
            </div>
        </div>
    </div>
    <div id="main-bar">
        <div class="button" id="back-button" title="Click to go back, don't hold for history" data-ripple>
            <svg viewBox="0 0 16 16">
                <path d="M16,7H3.8l5.6-5.6L8,0L0,8l8,8l1.4-1.4L3.8,9H16V7z" />
            </svg>
        </div>
        <div class="button" id="forward-button" title="Click to go forward, don't hold for history" disabled data-ripple>
            <svg viewBox="0 0 16 16">
                <path d="M8,0L6.6,1.4L12.2,7H0v2h12.2l-5.6,5.6L8,16l8-8L8,0z" />
            </svg>
        </div>
        <div class="button" id="refresh" title="Reload page" data-ripple>
            <svg viewBox="0 0 16 16">
                <path d="M13.6,2.3C12.2,0.9,10.2,0,8,0C3.6,0,0,3.6,0,8s3.6,8,8,8c3.7,0,6.8-2.5,7.7-6h-2.1c-0.8,2.3-3,4-5.6,4c-3.3,0-6-2.7-6-6
	s2.7-6,6-6c1.7,0,3.1,0.7,4.2,1.8L9,7h7V0L13.6,2.3z" />
            </svg>
        </div>
        <div id="address-bar" class="-selected">
            <div id="info" class="address-bar-button -show-special" data-ripple>
                <svg viewBox="0 0 16 16" class="https">
                    <path d="M12.6,5.3h-0.8V3.8C11.8,1.7,10.1,0,8,0S4.2,1.7,4.2,3.8v1.5H3.4C2.6,5.3,1.9,6,1.9,6.9v7.6c0,0.8,0.7,1.5,1.5,1.5h9.1
	c0.8,0,1.5-0.7,1.5-1.5V6.9C14.1,6,13.4,5.3,12.6,5.3z M10.4,5.3H5.6V3.8c0-1.3,1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4V5.3z" />
                </svg>
                <svg viewBox="0 0 16 16" class="error hide">
                    <path d="M7.2,10.4h1.6V12H7.2V10.4z M7.2,4h1.6v4.8H7.2V4z M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8c4.4,0,8-3.6,8-8S12.4,0,8,0z M8,14.4
	c-3.5,0-6.4-2.9-6.4-6.4S4.5,1.6,8,1.6s6.4,2.9,6.4,6.4S11.5,14.4,8,14.4z" />
                </svg>
                <img src="https://techbrood.com/themes/techbrood/image/logo.png" alt="" class="favicon hide">
                <div class="special hide">Duck Duck Go, Inc. [US]</div>
            </div>
            <div id="address"><span class="protocol">https://</span><span class="domain">techbrood.com</span><span class="extension">/</span>
            </div>
            <div id="bookmark" class="address-bar-button" data-ripple>
                <svg viewBox="0 0 16 16" class="not-favourite hide">
                    <path d="M16,5.8l-5.8-0.5L8,0L5.8,5.3L0,5.8l4.4,3.8l-1.3,5.6l4.9-3l4.9,3l-1.3-5.6L16,5.8z M8,10.7l-3,1.8l0.8-3.4L3.1,6.8l3.5-0.3
	L8,3.3l1.4,3.2l3.5,0.3l-2.7,2.3l0.8,3.4L8,10.7z" />
                </svg>
                <svg viewBox="0 0 16 16" class="favourite">
                    <path d="M8,12.2l4.9,3l-1.3-5.6L16,5.8l-5.8-0.5L8,0L5.8,5.3L0,5.8l4.4,3.8l-1.3,5.6L8,12.2z" />
                </svg>
            </div>
        </div>
        <div class="button extension" extension-id="0" title="Reddit Notifier" data-disabled data-ripple>
            <img src="/uploads/1811/extension-reddit-notifier.png" alt="">
        </div>
        <div class="button extension" extension-id="1" title="Styler" data-ripple>
            <img src="/uploads/1811/extension-styler.png" alt="">
        </div>
        <div class="button extension" extension-id="2" title="Emoji Keyboard by EmojiOne™" data-ripple>
            <img src="/uploads/1811/extension-emoji-keyboard.png" alt="">
        </div>
        <div class="button extension" extension-id="3" title="LastPass" data-notifications="1" data-ripple>
            <img src="/uploads/1811/extension-lastpass.png" alt="">
        </div>
        <div class="button extension" extension-id="4" title="Honey" data-disabled data-ripple>
            <img src="/uploads/1811/extension-honey.png" alt="">
        </div>
        <div class="seperator"></div>
        <div class="button" id="refresh" title="Customise and Control Google Chrome" data-ripple>
            <svg viewBox="0 0 16 16">
                <path d="M8,4c1.1,0,2-0.9,2-2S9.1,0,8,0S6,0.9,6,2S6.9,4,8,4z M8,6C6.9,6,6,6.9,6,8s0.9,2,2,2s2-0.9,2-2S9.1,6,8,6z M8,12
	c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S9.1,12,8,12z" />
            </svg>
        </div>
    </div>
</div>

Chrome Title Bar in CSS

h5, css3, browser

编辑器支持Emmet

快捷键

Chrome Title Bar in CSS

h5, css3, browser

使用VueJS和ThreeJS构建的SomaFM电台音乐播放器

使用纯HTML5 CSS3实现任天堂城市赛车游戏模仿

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：