Tag: CSS

New CSS to style underlines

Mozilla’s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, “text-underline-offset,” “text-decoration-thickness,” and “text-decoration-skip-ink.” The video I am referring to is embedded below and I added a few simple code examples down below as well.

I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.

Video: New CSS for Styling Underlines on the Web

Continue reading New CSS to style underlines

How to add a circle border around a Font Awesome icon

I was recently working on building a webpage and I ran into an issue where I wanted to add a circular border around an icon. I was using Bootstrap 4 for the page’s layout and Font Awesome for the icons. I tried a few things with Bootstrap’s border utilities but it couldn’t do what I wanted, so I searched online.

I was able to find this CodePen solution to my problem. I made some edits to the code for my webpage, which I have provided below.

HTML Code

<div class="icon-flex">
  <div class="icon-wrapper"><i class="far fa-user"></i></div>
</div>

CSS Code

.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid blue;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}
.icon-wrapper i {
    color: blue;
}

Few notes about my CSS code

  • If you increase or decrease the “font-size” value in the “icon-wrapper” class, it will make the icon larger or smaller.
  • If you increase or decrease the “width” and “height” values in the “icon-wrapper” class, it will make the circular border larger or smaller.

Let me know your thoughts about this solution. If you know of a better way to do this, please leave a comment and share your knowledge.

Media query max-width and min-width

I wanted to write a quick blog post explaining in plain English what max-width and min-width mean when setting up media queries in your CSS, so here we go first with an example of media query code in your CSS.

Code examples of min-width and max-width

<style>
@media (min-width: 480px) { /*add your css in here*/ }

@media (max-width: 1280px) { /*add your css in here*/ }
</style>

Using the code example above, “min-width: 480px”, means that when your web browser’s viewport width is equal to or more than 480px, then the web browser will apply the CSS in the brackets that follow.

Again, using the code example above, “max-width: 1280px”, means that when your web browser’s viewport width is equal to or lesser than 1280px, then the web browser will apply the CSS in the brackets that follow.

Parallax scrolling effect, the new web thing to do on your site

As the web changes, new designs and effects become popular and you see them across many sites. One new effect I’ve been seeing more and more is the “parallax scrolling effect” where you have backgrounds stay in place as the user scrolls down the page.

If you somehow haven’t seen this cool effect yet, check out the w3schools.com links below to see the effect and also the code to do this yourself.

No more CSS conditional comments for IE10+

I was working on an older site this past week and an issue came up where the IE10 web browser was showing different spacing compared to the Google Chrome web browser. My initial thoughts were to use CSS conditional comments to make a specific class have different padding for IE web browsers.

Well I didn’t know that Microsoft deprecated conditional comments for IE10 and above, so I did some searching online and found a blog post, “Targeting IE10 & IE11 Browsers with CSS” on paper-leaf.com, that gave me the solution I needed.

So if you use the below code inside a “style” tag and add your CSS specifically for IE10+ in there, it will solve this problem I ran into.