3 appealing CSS tricks for Web Development

-

 


I just love to visit many websites on Google. I daily see very cool designs of website and see their source code (ctrl+shit+i). After seeing the source code of many websites I saw they use CSS differently for styling, not like others. So here in this post, I'll be illustrating you 3 CSS tricks you can also try for your website/portfolio.

1. CSS Centering Elements

Web developers who are learning currently have a lot of problem at the start in centering elements. After seeing many tutorials they learn to center by the FlexBox Model. This is not a trick. Just understanding or using it better. Below is an example of centering and aligning element's child right in the parent's center.

<div style="display:flex;justify-content:center;align-items:center;">
  <div></div>
</div>

Check out howtocenterincss.com You will learn more in-depth there for centering different elements.

2. CSS support checks

feature-checks on the JS side aren't really that complex, things become slightly complex when it comes to CSS. Here is the @supports CSS rule - The best solution for this.

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    display: block;
  }
}

Check out caniuse.com/#feat=css-featurequeries to see @supports is supported or not.

3. Zoom on hover

When you create an image gallery, you want to mark somehow the hovered image very often. The great idea is to add zoom on hover to accentuate the hovered photo.

.images {
  display: flex;
  width: 100vw;
  juftify-content: center;
  align-items: center;
}

img {
  width: 400px;
}

img:hover {
  transform: scale(1.3);
}
// This is the code you can add this code with your uses.

I'm done writing for CSS tricks hope you liked it. Thanks for reading. 😁

Comments

Post a Comment

Popular posts from this blog

8 Best tools for remote workers

-
Image
  Are you a company that has employed remote workers and are in need of some of the best remote working tools? There are many benefits to running a remote team, so long as you’re equipped with the right tools to succeed. In this article, i'll share with you some of the best tools for working remotely so you and your team members can maximize productivity and secure more sales than ever before, no matter where in the world you are. 1. Skype For Business -> Skype for Business is free to use with up to 25 members, and the service produces about 3 billion minutes of calls a day, so it’s clearly a popular choice. Price - $5.50 a month, or $5 a month as part of the Office 365 business essentials package. Link ->  Skype For Business 2. GoToMeeting -> GoToMeeting is a web-hosted service created and marketed by LogMeIn. It is an online meeting, desktop sharing, and video conferencing software package that enables the user to meet with other computer users, customers, clients o...
Read more

5 Common and Big mistakes freelancer make and can avoid it

-
Image
  A freelancer is a person works for themselves, rather than for a company. While freelancers do take on contract work for companies and organizations, they are ultimately self-employed. There are some mistake freelancer make but never bothered about it. Starting with it.. 1. Charging on an hourly rate The basic and worst mistake that freelancers make is to charge for time instead of charging for value. Working supported some time hurts your growth, too: as you become more efficient, you're ready to work better and faster, which means…you will earn less for a far better quality result. Your goal is to make a scale where you become as efficient as possible and not affect your bottom line. 2. Taking the Wrong Clients In general, a good client is  one who offers work you want to do and are equipped to do and who works with you to achieve a positive result.  It should be relatively easy to communicate with your client, and  they should pay you on time and in full accordi...
Read more

This one line CSS can center object easily : Putting end to your Google search

-
Image
  It's hard to center thing in CSS. Most of the newbie web dev students face problem and often search every time when on any project. Here is the last and final solution to it. That is centering the object with just one line of CSS code. The  place-items  property. ->The  place-items  property in CSS is shorthand for the  align-items and   justify-items  properties, combining them into a single declaration. These properties have gained use with the introduction of Flexbox and Grid layouts First, make sure to set the  display  property to  grid  and then, set the  place-items  property to  center . div { display : grid; place-items : center; } Ta Da DONE✨🎉🎉🎊 !!! Thanks For Reading. I mostly do my project using this only. I hope you will find this helpful as i did. Sorry if it doesn't work with you.(it will work chill ✨🎉)
Read more