Bostonian Adam

Tag: CSS

  • How to add a circle border around a Bootstrap icon

    I previously blogged about how to add a circle border around a Font Awesome icon back in 2019, but since then things have changed and Bootstrap now has their own icons, Bootstrap Icons. Can that same code be used today for Bootstrap 5 and their icons?

    The answer is pretty much, yes! The HTML and CSS code is identical with a few small edits. I made a few notes further down below about some changes to the CSS you can make. Please note that the below code is using Bootstrap 5.2.3 and Bootstrap Icons 1.10.3, and it displays a blue building icon with a red circle around it. Obviously, you can change the colors to your liking.

    CSS Code

    <!--Copy and paste inside the <head> tag-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">

<style>
.icon-flex, .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid red;
    font-size: 5rem;
    width: 8rem;
    height: 8rem;
}
.icon-wrapper .bi {
    color: blue;
}
</style>

    HTML Code

    <!--Copy and paste inside the <body> tag-->
<div class="icon-flex">
  <div class="icon-wrapper"><i class="bi bi-building"></i></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    A few notes about my CSS code

    • In the “.icon-wrapper” class…
      • You can change the color and thickness of the border by editing the “border”
      • You can change the size of the icon by editing the “font-size”
      • You can change the size of the circle by editing the “width” and “height”
    • In the “.icon-wrapper .bi” class…
      • You can change the color of the icon by editing the “color”

    Please let me know your thoughts about this code and if you have a better or more efficient way to do this. Always feel free to share your knowledge and thank you for reading this blog post.

  • How to zoom in using CSS transitions

    Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect.

    Below is some CSS and HTML code to use to make that effect. Yes, that is all the code you need. Check out the transition and transform pages on Mozilla’s MDN Web Docs for more information.

    CSS Code

    <style>
.img{
  transition: all 1.1s ease;
}
.img:hover{
  transform: scale(1.1);
}
</style>

    HTML Code

    <img src="path to your image file" class="img">

  • Sharing resources and tech news – June 2022

    This will be a quick blog post where I wanted to share a few online resources and also discuss a few interesting articles with a brief summary and get your thoughts.

    Resources

    • AnimatiSS – A collection of CSS animations for your web projects. If you visit the website, click the “STYLES” button to see the different CSS animations you can choose from. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)
    • Avataaars Generator – A free online avatar generator
    • Tabler Icons – A free open-source collection of icons to use for your website or app. (Credit goes to Ray Villalobos for sharing this link on LinkedIn)

    Adobe Photoshop

    Adobe is currently testing a free web version of its popular Photoshop software in Canada, where users can use its core functions. According to the article I read there is no timeline when the free web version will be available to other locations. This info was found in the article, Adobe plans to make Photoshop on the web free to everyone, on TheVerge.com.

    I personally think this is great, especially for those who have never used Adobe Photoshop before. I remember before my wife and I started paying for the Adobe Creative Cloud subscription, which includes Photoshop, we had to use free image editing software and I could never get use to the user interfaces, and they were missing features (or I couldn’t find them LOL) that Photoshop had. Also, the high price tag that Photoshop once had (before Creative Cloud) kept us away from it. Are you going to try out the free version of Photoshop or are you already paying for it with Adobe Creative Cloud?

    Google News

    Do you use Google News on your desktop? Well if you do, you most likely have seen an option to switch to the new look. The biggest change was moving the main categories from the left side of the page to across the top which I like. If you want to read more about this, check out the article, Google News gets more personal with desktop redesign, on TheVerge.com.

    Amazon Alexa

    Amazon is working on something creepy… they are developing a feature for Alexa which can emulate anyone’s voice. The article I read even suggests it could emulate a dead person’s voice. This info was found in the article, Amazon demonstrates Alexa mimicking the voice of a deceased relative, on CNBC.com.

    To me, this screams security concerns and ethically just wrong, but that’s just me. My wife and I don’t even have Amazon Alexa. What do you think of this? What benefits does this bring?

    If you made it all the way down here, thanks for checking out my blog post, I appreciate it. Stay safe and try to do everything in love, the world really needs it.

  • CSS: REMs vs EMs

    So you’ve been using pixels (px) for your font sizes since you first learned CSS, but you’ve been hearing about REM and EM units and how they should be used for today’s websites instead of pixels. Before I try to explain how they work, what exactly are they? An EM is a CSS unit mainly used today for font sizes. A REM is a root EM (this is explained more later).

    The first thing to note is that the default font size in most web browsers today is 16px. EMs and REMs lets developers scale elements up and down, which is very useful for responsive design (mobile and small screens vs large screens) and accessibility. The web browser converts the EMs/REMs into pixel values.

    How do REMs work?

    REM units look at the font size of the root element of the page, which is the html element (remember it’s 16px by default usually), and they take that size and multiply it by the REM value you set.

    So in the below REMs example, the “text-1” class is set to use 1.5rem and that will be multiplied by 16, which equals 24, so the font size will be 24px. Make sense?

    REMs example

    /*CSS*/
.text-1 {
  font-size: 1.5rem;
}

/*HTML*/
<html>
  <body>
    <p class="text-1">Testing text 1.</p>
  </body>
</html>

    How do EMs work?

    EM units look at the font size of its parent and they take that size and multiply it by the EM value you set.

    So in the below EMs example, the “text-2” class is set to use 1.5em and that will be multiplied by the font size of its parent (“text-2″‘s parent is the body element and the body’s font size is 12), so it will be 1.5 x 12, which equals 18, so the font size will be 18px. Make sense?

    EMs example

    /*CSS*/
body {
  font-size: 12px;
}
.text-2 {
  font-size: 1.5em;
}

/*HTML*/
<html>
  <body>
    <p class="text-2">Testing text 2.</p>
  </body>
</html>

    If you have any questions feel free to leave a comment and ask. Also, if you found my explanation confusing or if you learn better with video, I recommend checking out the below helpful video by YouTuber Coder Coder where she goes over using REMs instead of pixels.

    px vs rem: what to use for font-size in your 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

    (more…)

  • 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.

  • Standard responsive media query breakpoints

    Below are responsive media query breakpoints that are used most often on websites.

    Source: w3schools.com

  • 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.