https://www.oorkan.dev/blog/tags/css/ Recent content in Css on oorkan Hugo en-us Tue, 19 Jan 2021 18:00:00 +0400 https://www.oorkan.dev/blog/how-to-add-syntax-highlighting-to-your-website/ Tue, 19 Jan 2021 18:00:00 +0400 https://www.oorkan.dev/blog/how-to-add-syntax-highlighting-to-your-website/ <p>If you have a programming blog, like me, or your website contains code examples and explanatory content, you may want to support syntax highlighting on your pages. There are many solutions and workarounds available, but the most flexible, to me, is using Chroma.</p> <p> </p> <p><strong>What&rsquo;s Chroma</strong></p> <p>Chroma is an open-source library written in Go allowing to have syntax highlighting for many different languages. Chroma is based on Pygments which is a generic syntax highlighter, written in Python.</p> https://www.oorkan.dev/blog/w3schools-tryit-editor-features/ Sun, 26 Apr 2020 21:19:00 +0400 https://www.oorkan.dev/blog/w3schools-tryit-editor-features/ <p><a href="https://www.w3schools.com/" target="_blank" rel="noopener noreferrer">W3Schools</a> Tryit Editor is a good built-in tool to quickly review some HTML and CSS, for example. But few of us use the awesome features it has. With these features, it can serve you as a light-weight version of <a href="https://codepen.io/" target="_blank" rel="noopener noreferrer">CodePen</a>.</p> <p><strong>Switch Dark / Light Mode</strong></p> <p><img src="https://res.cloudinary.com/oorkan/image/upload/v1587918116/blog/img/topics/no-category/w3schools/w3schools_dl_switch_nmaxln.jpg" alt="W3Schools Tryit Editor - Switch Dark / Light Mode"></p> <p> </p> <p><strong>Change Orientation</strong></p> <p><img src="https://res.cloudinary.com/oorkan/image/upload/v1587920196/blog/img/topics/no-category/w3schools/w3schools_orient_switch_atbpkv.jpg" alt="W3Schools Tryit Editor - Change Orientation"></p> <p> </p> <p><strong>Share / Save Your Code</strong>   ( This is the coolest one! 🔥)</p> https://www.oorkan.dev/blog/support-css-variables-in-old-browsers-using-scss/ Sun, 19 Apr 2020 17:25:48 +0400 https://www.oorkan.dev/blog/support-css-variables-in-old-browsers-using-scss/ <script src="https://gist.github.com/oorkan/9f71b3264401db58f9ec625d66593bb9.js"></script> <p>You can try to compile this and see the result on <a href="https://www.sassmeister.com/" target="_blank" rel="noopener noreferrer">SassMeister playground</a> or download a simple <a href="https://github.com/oorkan/scss-to-css" target="_blank" rel="noopener noreferrer">SCSS to CSS</a> converter and use with npm.</p>