Devm
Devendra Maharjan
Profile
Contact
Tutorials
Javascript
Create popup
Linux
Install LAMP
Magento 2 deploy script
PHP
Bash
CSS
Create line with div
Dynamic icon
Mail
Linkedin
Git Hub
Close
Create linkedin css icon with dynamic size
<style> .container { height: var(--container-height,40px); width: var(--container-width,40px); } .linkedin-icon-bg { background: #1565c0; height: var(--height,40px); width: var(--width,40px); border-radius: var(--borderRadius,4px); box-shadow: 0 0 30px rgba(0,0,0,0.3); position: relative; overflow: hidden; } .i { position: absolute; height: var(--height,18px); width: var(--width,6px); background: #fff; bottom: var(--bottom,6px); left: var(--left,6px); } .i:after { content: ""; position: absolute; background: #fff; height: var(--pseudo-after-height,7px); width:var(--pseudo-after-width,7px); border-radius: 50%; bottom: var(--pseudo-after-bottom,21px); left: var(--pseudo-after-left,-1px); } .n { position: absolute; height: var(--height,18px); width: var(--width,6px); background: #fff; bottom: var(--bottom,6px); left: var(--left,16px); } .n:before { content: ""; position: absolute; background: #fff; border-radius: 5000px 5000px 0 0; height: var(--pseudo-before-height,18px); width: var(--pseudo-before-width,14px); bottom: 0; left: var(--pseudo-beforeleft,5px); } .n:after { content: ""; position: absolute; background: #1565c0; border-radius: 5000px 5000px 0 0; height: var(--pseudo-after-height,14px); width: var(--pseudo-after-width,6px); bottom: 0; left: var(--pseudo-after-left,6px); } </style> <script> class Icon { param; constructor(param) { this.param = param; } linked(){ const container = document.querySelector(this.param.selector); const linkedIcon = container.querySelector('.linkedin-icon-bg'); const i = container.querySelector('.i'); const n = container.querySelector('.n'); const radius = Math.floor(this.param.height / 10); container.style.setProperty('--container-height',this.param.height + 'px'); container.style.setProperty('--container-width',this.param.width + 'px'); linkedIcon.style.setProperty('--borderRadius',radius + 'px'); linkedIcon.style.setProperty('--height',this.param.height + 'px'); linkedIcon.style.setProperty('--width',this.param.width + 'px'); i.style.setProperty('--height',Math.floor(45 * this.param.height / 100) + 'px'); i.style.setProperty('--width',Math.floor(15 * this.param.height / 100) + 'px'); i.style.setProperty('--bottom',Math.floor(15 * this.param.height / 100) + 'px'); i.style.setProperty('--left',Math.floor(15 * this.param.height / 100) + 'px'); i.style.setProperty('--pseudo-after-height',Math.floor(17 * this.param.height / 100) + 'px'); i.style.setProperty('--pseudo-after-width',Math.floor(17 * this.param.height / 100) + 'px'); i.style.setProperty('--pseudo-after-bottom',Math.floor(52 * this.param.height / 100) + 'px'); i.style.setProperty('--pseudo-after-left','-'+Math.floor(2 * this.param.height / 100) + 'px'); n.style.setProperty('--height',Math.floor(45 * this.param.height / 100) + 'px'); n.style.setProperty('--width',Math.floor(15 * this.param.height / 100) + 'px'); n.style.setProperty('--bottom',Math.floor(15 * this.param.height / 100) + 'px'); n.style.setProperty('--left',Math.floor(40 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-before-height',Math.floor(45 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-before-width',Math.floor(35 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-before-bottom','0px'); n.style.setProperty('--pseudo-before-left','-'+Math.floor(12 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-after-height',Math.floor(35 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-after-width',Math.floor(15 * this.param.height / 100) + 'px'); n.style.setProperty('--pseudo-after-bottom','0px'); n.style.setProperty('--pseudo-after-left',Math.floor(15 * this.param.height / 100) + 'px'); } } function onload(){ const icon = new Icon({selector:".container",height:"40",width:"40"}); icon.linked(); } </script> <body onload="onload()"> <div class="container"> <div class="linkedin-icon-bg"> <div class="i"></div> <div class="n"></div> </div> </div> </body </div> </div> </div> </div> </div> <div class="footer"> </div> <a href="#" class="close"></a> </div> <div class="loader"></div> </body> </html>