Skip to main content

Contact Us

Popular posts from this blog

Organizing Data In Table: A Quick Guide

  Organizing Data In Table: A Quick Guide We can use tables to structure data in columns and rows. The table is the HTML way to lay out the data. The CSS way to create the layout on the web page is  CSS float ,  flexbox , and  CSS grid . We cover an example to understand how to create a table on the web page. You can view the HTML table example at the below codepen link: https://codepen.io/taimoorsattar/pen/NWpdwbp For example, we can create a table in HTML for customer’s grocery item bill as below: < table border = "3" cellpadding = "10" cellspacing = "0" > < caption > Grocery Items Bill </ caption > < thead > < colgroup > < col width = "60%" > < col width = "20%" > < col width = "20%" span = "1" style = "background-color:#f1f1f1;" > </ colgroup > < tr > < th align = ...
Post a Comment
Read more

Detecting The User's Color Scheme Preference With CSS

Detecting The User's Color Scheme Preference With CSS If you’re a developer, chances are that you use dark mode on your machine and code editor. If not, what are you waiting for? Join the dark side! Jokes apart, it is common nowadays to allow users to select a different theme when visiting a website. Now you can do this with CSS only, not the theme selection itself, for that you still need JS but with CSS you can now detect the user’s machine color scheme (light or dark) and display the correct colors on your website immediately. To do this we need to use the CSS variables. According to the website  Can I use , the “CSS variables” feature is available on 95% of the currently used browsers around the world. We also need to use the  prefers-color-scheme  media query, which according to  Can I use  is supported by about 90% of the currently used browsers. In this article, I will show you how to use the CSS variables and the  prefers-color-scheme  to setup...
Post a Comment
Read more

5 CSS Tips and Tricks to Try in Your Next Project

  5 CSS Tips and Tricks to Try in Your Next Project Looking for inspiration on how to add a twist to your project design? Take a look at these 5 CSS techniques and have fun experimenting with some bold ideas! 1. Bring back the 90’s with the background-clip Have you ever wondered how to apply a gradient or a texture to the text in CSS? The good news is you can easily achieve that with the background-clip property! First, we need to apply the background color to our  <h1> , then use the value text for the  background-clip  property and set the text color to transparent. < h1 class = "wordart" > The background is clipped to this text </ h1 > h1 { background-color: #ff1493; background-image: linear-gradient(319deg, #ff1493 0%, #0000ff 37%, #ff8c00 100%); } .wordart { -webkit-background-clip: text; color: transparent; } And voilà, the 90’ style WordArt is ready! 2. Crazy shapes with clip-path If you like to experiment with your ...
Post a Comment
Read more