Tag: CSS
-
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.…
-
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…
-
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…
-
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 Using the code example above, “min-width: 480px”, means that…
-
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…
-
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…