How can this be written in a shorter amount of CSS code?

Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code?

Below is the current code:

#nav .badges { float:left; height: 173px; width: 173px; background-color: #fff; display: block; margin-left: 21px; margin-bottom: 20px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
   /* Additional styles for bronze badge */
   #slidingDoors-bronze-badge { background-image: url('../images/menu-badge-bronse_01.png'), url('../images/menu-badge-bronse_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-bronze-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }

   /* Additional styles for silver badge */
   #slidingDoors-silver-badge { background-image: url('../images/menu-badge-solv_01.png'), url('../images/menu-badge-solv_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-silver-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }
   
   /* More styles for gold, sapphire, and agat badges... */
css

Answer №1

Instead of having separate classes for each badge image/color, why not create a few classes to handle the differences?

.coreclass {
   background-repeat: no-repeat !important;
   background-position: 0px 0px, 87px 0px, 0px 180px !important;
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;
   -o-transition: all 500ms ease-in-out;
   -ms-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
}
.gold { gold styling here}
.gold:hover { hover effect for gold }
.silver and so on...

Then use it like this:

<div class="coreclass gold">...</div>

Answer №2

When it comes to browser engines, webkit is the last one that still requires a vendor prefix while all others support it unprefixed.

Check out caniuse.com for more information on transitions

.coreclass {
    background-repeat: no-repeat !important;
    background-position: 0px 0px, 87px 0px, 0px 180px !important;
   -webkit-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
}

(Apologies for adding this as another answer; I don't have enough points to leave comments yet...)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

jquerycssjqgrid

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

javascripthtmlcss

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

Switching the root directory for the Next.js application caused a meltdown on the production server, while the development server and local build remained unaffected

TL;DR I modified my base path from "/" to "custom-subpath" and encountered CSS missing on the production server despite it working well on my local server. Please forgive me, as explaining this issue may be challenging due to my limite ...

cssdockernginxnext.js

Applying flexbox to create a visually appealing design

Is there a way to achieve this layout using flexbox without relying on grid due to limited support in IE11? I want to be able to easily add or remove small divs without adding more containers. To see the desired layout, check out this image: Desired Layou ...

css

Fade-In Effect for CSS Background Image

I'm currently learning CSS and I am trying to create an effect where, on hover over some text, the text disappears and an image fades in. I have been experimenting with different methods but haven't quite achieved the desired outcome. The text i ...

htmlcsshover

Getting an array of all visible text on a page using the same locator in Selenium

Within different sections of the webpage, I have utilized the following locator (excerpt from HTML): <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <p class="title"> ABC </p> <p class="title"> DEF </p> ...

cssseleniumselenium-rc

Obtaining HTML data with ajax within a WordPress post

Greetings! I've been putting together a website and I'm eager to include a unique timeline in each of my posts. I'm utilizing WordPress for this project. However, since the timeline I want to insert will vary from post to post, I am unable t ...

javascriptphphtmlcssajax

Clicking on a link does not place the focus on the corresponding input field

My project involves creating a One Pager website with a navigation menu. I am looking to implement radio inputs that are associated with the clicked link (a) so that I can apply CSS styles to the active radio button. Currently, the CSS is applied when the ...

htmlcss

Using SVG and CSS to color multiple paths with individual colors

I am working with an svg that contains various paths, ellipses, and shapes each with different fill colors such as red and blue. When I combine them into a sprite, I want to be able to change the fill color on hover using CSS. Typically, I would remove the ...

htmlcsssvgfill

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

I am looking to create an animation that continues infinitely without returning to its original state after completion, similar to a sun moving animation. Below is a sample project: .animator3{ -webkit-animation-name:j3; -webkit-animation-delay:0s; -web ...

htmlcssanimation

Data displayed in a table-like format

Is there a way to achieve this layout view image here (currently done using tables) while maintaining semantic markup? I believe the best tag for this would be dl. Each cell should have the height of its corresponding row. EDIT: The left column contains d ...

htmlcssxhtmlsemantic-markup

Apply a border to the navbar when it hovers over a selected element

export const NavBar = () => { return <div className="navbar">this is navbar</div>; }; const Content = () => { return ( <div className="main"> <div className="background"> some content </div> ...

javascripthtmlcssreactjs

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

javascripthtmljquerycsstwitter-bootstrap

Create a row in React JS that includes both a selection option and a button without using any CSS

My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element https://i.sstatic.net/3gfkO.png Below is the code snippet that I ha ...

javascriptcssreactjsfrontend

having difficulties in separating the mat-table header

It may seem like a basic question, but I'm having trouble figuring it out. I'm not sure if this requires a CSS change or something else. I'm looking to add a divider between my table header similar to the one highlighted in the screenshot be ...

cssangularangular-material

Use JavaScript to load and set a background image for a div

When it comes to loading different images onto an "img" tag by printing their URLs using JavaScript and then letting CSS manipulate the content in the tag, I have a code snippet that does just that. $(window).load(function() { var randomImages = [&apo ...

javascriptjquerycssbackgroundonload

Ways to rotate SVG images exclusively upon clicking

After experimenting with rotating SVG images on my navbar buttons, I encountered an issue. Whenever I click one button, all the images rotate simultaneously. Additionally, clicking elsewhere does not reset the images to their original positions. This is t ...

javascripthtmljquerycss

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

htmlcsscss-selectorscustom-element

Ways to differentiate between buttons in a button cluster?

I have created a set of 3 buttons using the code from this resource. However, the buttons are currently positioned vertically close to each other as shown in the source code. I would like to adjust the spacing between them. Is there a way to achieve this ...

htmlcss