LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

User Agent to CSS

Using user agent for a design purpose.

for more: visit here

CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat);



html {
    font: 100% / 1.2em Helvetica, Arial, Sans-serif;
    color: #444;
}


body {
    background-color: #fff;
    text-align: center;
}


html, body {
    margin: 0;
    padding: 0;
}


p {
    margin: .5em auto;  
}


a {
    color: #444;
    text-decoration: none;
    border-bottom: thin dotted #444;
}


a:hover {
    color: #34d;
    border-bottom-color: #34d;
}


h1, h2, h3, h4, h5, h6 {
    font-family: Montserrat, Sans-serif;
    font-weight: 400;
}


hr {
    width: 100%;
    margin: 20px 0;
    border-top: thin solid #ccc;
}


.header {
    margin: 0;
    padding: 2em 0;
}


.header-title,
.wrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}


.header-title,
.header-title > a {
    color: #777;
}

.header-title > a {
    border-bottom: thin dotted transparent;
    text-decoration: none;
}

.header-title > a:hover {
    border-bottom-color: #777;
}


.window-container {
    max-width: 100%;

    margin: 0;
    padding: 60px 0;

    overflow: hidden;

    background-color: white;

    background-image: -webkit-linear-gradient(90deg, #fff, #eee);
    background-image: linear-gradient(0deg, #fff, #eee);

    border-top    : thin solid #ccc;
    border-bottom : thin solid #ccc;
}


.wrapper-container {
    margin: 30px 0;
}


/* window look */

.window,
.window-frame {
    width: 400px;

    margin: 0 auto;
}


.window {
    height: 300px;

    background-position : center center;
    background-position : center -webkit-calc(50% - 10px);
    background-position : center -moz-calc(50% - 10px);
    background-position : center calc(50% - 10px);
    background-repeat   : no-repeat;
    background-size     : 128px 128px;
}

/* browser */

.ua-browser-android .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/android-browser.png);
}

.ua-browser-chrome .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/chrome.png);
}

.ua-browser-firefox .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/firefox.png);
}

.ua-browser-ie .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/ie.png);
}

.ua-browser-safari .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/safari.png);
}

.ua-browser-safari.ua-mobile .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/safari-mobile.png);
}

.ua-browser-opera .window {
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/opera.png);
}


/* os */
/* os - android */

.ua-os-android .window,
.ua-os-android .window-frame {
    /* 1195 x 1994 */

    width  : 399px;
    height : 665px;
}


.ua-os-android .window-frame {
    background-image  : url(http://www.orisomething.com/e/uacss.js/imgs/android-by_google.png);
    background-size   : 100%;
    background-repeat : no-repeat;
}


.ua-os-android .window {
    margin-top : -665px;
}



/* os - ios */

.ua-os-ios .window,
.ua-os-ios .window-frame {
    /* 762 x 1607 */

    width: 254px;
    height: 536px;
}


.ua-os-ios .window-frame {
    background-image  : url(http://www.orisomething.com/e/uacss.js/imgs/iphone5-black-by_teehanlax.png);
    background-size   : 100%;
    background-repeat : no-repeat;
}


.ua-os-ios .window {
    margin-top: -536px;
}



/* os - osx */

.ua-os-osx .window-frame {
    height: 324px;

    background-color: #ccc;

    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/osx.png); /* old browsers */
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/osx.png), -webkit-linear-gradient(90deg, #b0b0b0, #e3e3e3 95%, #fff); /* android 2.3 */
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/osx.svg), -webkit-linear-gradient(90deg, #b0b0b0, #e3e3e3 95%, #fff); /* safari 6.0 */
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/osx.svg), linear-gradient(0deg, #b0b0b0, #e3e3e3 95%, #fff);

    /* IE 8 */
    background-position : left top;
    background-size     : auto;
    background-repeat   : no-repeat;
    /* modern */
    background-position : left top, left top;
    background-size     : auto, 1px 24px;
    background-repeat   : no-repeat, repeat-x;

    border: thin solid #bbb;

    border-top-left-radius  : 5px;
    border-top-right-radius : 5px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.ua-os-osx .window {
    margin-top: -301px;
    border-top: thin solid #676767;
}



/* os - windows */

.ua-os-windows .window,
.ua-os-windows .window-frame {
    border: thin solid #5085bd;
}

.ua-os-windows .window-frame {
    width  : 412px;
    height : 337px;

    background-color    : #6badf6;
    background-image    : url(http://www.orisomething.com/e/uacss.js/imgs/windows.png);
    background-position : right top;
    background-repeat   : no-repeat;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.ua-os-windows .window {
    margin-top: -308px;
    background-color: #fff;
}



/* os - chromeos */

.ua-os-chromeos .window-frame {
    width: 400px;
    height: 372px;

    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/chromeos.svg);
    background-repeat: no-repeat;

    border-top-left-radius  : 8px;
    border-top-right-radius : 8px;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}


.ua-os-chromeos .window {
    background-color: white;

    width: 398px;
    height: 300px;

    margin-top: -301px;

    border: 1px solid #dcdcdc;
    border-top-width: 0px;
}

/* os - linux */

.ua-os-linux .window-frame {
    background-color: #2d2d2d;
}

.ua-os-linux .window-frame {
    height: 328px;

    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/linux.png); /* IE 8 */
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/linux.png), linear-gradient(0deg, #2e2d29, #4a4a4a 95%, #777);
    background-image: url(http://www.orisomething.com/e/uacss.js/imgs/linux.svg), linear-gradient(0deg, #2e2d29, #4a4a4a 95%, #777);

    /* IE 8 */
    background-position : left top;
    background-size     : 100% 28px;
    background-repeat   : no-repeat;


    background-size     : 100% 28px, 1px 28px;
    background-position : left top, left top;
    background-repeat   : no-repeat, repeat-x;


    border: thin solid #3c3b37;

    border-top-left-radius  : 10px;
    border-top-right-radius : 10px;

}

.ua-os-linux .window {
    margin-top: -301px;

    border-top: thin solid #3c3b37;
}
JS
/*! User Agent to CSS - v0.1.1 - 2013-08-27
* https://github.com/oriSomething/uacss.js
* Copyright (c) 2013 ori Something; License: MIT */
!function(a,b,c,d){"use strict";function e(a,b){var c,d,e,f;for(e in a){f="length"in a[e]?a[e]:[a[e]],d=f.length;for(c=0;d>c;c++)if(f[c].test(b))return e}return r}function f(a,b){var c,d=[];for(c in a)c!==b&&d.push(c);return d}function g(a,b){var c,d=a.length;for(c=0;d>c;c++)if(a[c].test(b))return!0;return!1}function h(a){if(!("language"in c))return d;var b,e=c.language;e=e.toLocaleLowerCase(),b=e.split("-"),b.length>0&&(a.language=b[0]),b.length>1&&(a.region=b[1])}function i(a,b){var c,d,e,f,g,h=[],i="";for(c in b)if(f=b[c],null!==f)if("string"==typeof f)h.push(o+c+"-"+f);else if(c===p)f&&h.push(o+p);else if("length"in f)for(e=f.length,d=0;e>d;d++)g=c.replace("_","-"),h.push(o+g+"-"+f[d]);i=h.join(" "),a.className+=a.className.length>0?" "+i:i}function j(){var d={},j=c.userAgent;for(var l in s)d[l]=e(s[l],j),d[q+l]=f(s[l],d[l]);d[p]=g(n,j),i(b.documentElement,d),h(d),"userAgentInfo"in a&&(k=a.userAgentInfo),a.userAgentInfo=d}var k,l={android:/\bAndroid\b/,ios:[/\bMobile\b.+\bSafari\b/,/\blike Mac OS X\b/],windows:/\bWindows\b/,osx:/\bMac OS X\b/,chromeos:/\bCrOS\b/,linux:[/\bUbuntu\b/,/\bFreeBSD\b/,/\bLinux\b/],blackberryos:/\bBlackBerry\b/,firefoxos:/\bMobile\b.+\bFirefox\b/},m={opera:[/\bOpera\b/,/\bOPR\b/],chrome:[/\bChrome\b/,/\bCriOS\b/],firefox:/\bFirefox\b/,android:/\bAndroid\b/,blackberry:/\bBlackBerry\b/,nokia:/\bNokiaBrowser\b/,safari:/\bSafari\b/,ie:[/\bMSIE\b/,/\bTrident\b/,/\bIE\b/,/\bIEMobile\b/]},n=[/Mobile\b/i,/\bWindows Phone\b/,/\bIEMobile\b/,/\bWindows\b.+\bARM\b/],o="ua-",p="mobile",q="not_",r="undefined",s={os:l,browser:m};j()}(window,window.document,window.navigator);

Description

Javascript library that helps to find user agent for styling purposes
Term
Mon, 11/27/2017 - 21:23

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv