Maintaining the final state at end of a CSS3 animation
Try adding animation-fill-mode: forwards;. For example like this: -webkit-animation: bubble 1.0s forwards; /* for less modern browsers */ animation: bubble 1.0s forwards;
css
How to increase the gap between text and underlining in CSS
No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px. If you want the same color of the “underline” (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid. For multiline, you can wrap you multiline texts in a span … Read more
Bootstrap align navbar items to the right
Bootstrap 5 (update 2021) In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content. For example, use me-auto… <nav class=”navbar navbar-expand-lg navbar-light bg-light”> <div class=”container-fluid”> <a … Read more
Disable LESS-CSS Overwriting calc() [duplicate]
Using an escaped string (a.k.a. escaped value): width: ~”calc(100% – 200px)”; Also, in case you need to mix Less math with escaped strings: width: calc(~”100% – 15rem +” (10px+5px) ~”+ 2em”); Compiles to: width: calc(100% – 15rem + 15px + 2em); This works as Less concatenates values (the escaped strings and math result) with a … Read more
What does !important mean in CSS?
It means, essentially, what it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’ In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element … Read more
Vertical Align Center in Bootstrap 4 [duplicate]
Important! Vertical center is relative to the height of the parent If the parent of the element you’re trying to center has no defined height, none of the vertical centering solutions will work! Now, onto vertical centering… Bootstrap 5 (Updated 2021) Bootstrap 5 is still flexbox based so vertical centering works the same way as … Read more
I do not want to inherit the child opacity from the parent in CSS
Instead of using opacity, set a background-color with rgba, where ‘a’ is the level of transparency. So instead of: background-color: rgb(0,0,255); opacity: 0.5; use background-color: rgba(0,0,255,0.5);
Offset a background image from the right using CSS
I found this CSS3 feature helpful: /* to position the element 10px from the right */ background-position: right 10px top; As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine. See Can I use for details on the supported browsers. Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/ Update: This feature is now … Read more
Dynamically change color to lighter or darker by percentage CSS
You can do this with CSS filters in all modern browsers (see the caniuse compatibility table). .button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); } <button class=”button”>Foo lorem ipsum</button> Here’s more reading from CSS Tricks about the various … Read more
Is embedding background image data into CSS as Base64 good or bad practice?
It’s not a good idea when you want your images and style information to be cached separately. Also if you encode a large image or a significant number of images in to your css file it will take the browser longer to download the file leaving your site without any of the style information until … Read more