leweb.com.au

Category: CSS

  • Append CSS in Javascript

    /* This is your custom Javascript */ if (document.URL.indexOf(“/quizzes/”)){ console.log(‘dk script start’); var sheet = document.createElement(‘style’); sheet.innerHTML = “/* YOUR CSS CLASSES */”; document.head.appendChild(sheet); console.log(‘dk script done’); }

  • Logo Lettering on Hover Effect

    <!DOCTYPE html> <html> <head> <title></title> <style> .text { position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); list-style: none; border-bottom: 0; } .text.hidden { border-bottom: 1px solid #fff; } .text li { display: inline-block; float: left; font-weight: 700; font-size: 2em; color:#000; opacity: 1; transition: all 0.3s ease-in-out; max-width: 2em; } .text.hidden li.spaced { padding-left: 0;…

  • Radial Gradient – CSS

    background: #fff; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(-90deg, #f1f1f1, #fff, #fafafa); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(-90deg, #f1f1f1, #fff, #fafafa); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(-90deg, #f1f1f1, #fff, #fafafa); /* For Firefox 3.6 to 15 */ background: linear-gradient(-90deg, #f1f1f1, #fff, #fafafa); /* Standard syntax…

  • Custom Default CSS Styling

    .clear{clear:both;} ::-webkit-selection { color: #fff; background: rgba(246, 36, 89, 0.99); } ::-moz-selection { color: #fff; background: rgba(246, 36, 89, 0.99); } ::selection { color: #fff; background: rgba(246, 36, 89, 0.99); } div, section, p, h1, h2, img, .box,.box:hover, .img-responsive, .container, #home-banner, #home-banner:hover{ -moz-transition: width 1s ease-in-out, left 1s ease-in-out; -webkit-transition: width 1s ease-in-out, left 1s…

  • Print Friendly wow.js

    /* print media */ @media print { .wow{animation-name:none!important; visibility:visible!important;} }  

  • Hidden Email Address

    <style type=”text/css”>.email {unicode-bidi:bidi-override; direction: rtl;}</style> <span class=”email”>ua.moc.ooksined&#x40;ofni</span>  

  • CSS Overlay with Textured Hero Section

    Download the texture here: https://www.leweb.com.au/wp-content/uploads/2015/04/overlay-pattern.png HTML CSS #herohome{ clear:both; background:url(‘img/banner.jpg’) no-repeat center center ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: cover; display:block; /* required */ overflow:hidden; position:relative; } #overlay{ position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; background:url(“img/overlay-pattern.png”) repeat; z-index:0; display:block; opacity:0.5; }

  • CSS Transforms

    -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;