Devm
Devendra Maharjan
Profile
Contact
Tutorials
Javascript
Pass method as parameter
Arrow method for calling async method
Create popup
Linux
Hide output in command
Apply command to output of command
Install LAMP
Magento 2 deploy script
PHP
Bash
CSS
Create line with div
Dynamic icon
Mail
Linkedin
Git Hub
Close
Create linkedin icon dynamically in css
<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>