make labels or badges look better [ css ] - KruXoR

css

make labels or badges look better

Posted in css

5

6:09 am, December 31, 2020

make labels or badges look better

How to make these look better.

The labels are used in the list items to show a small version of the category or sometimes the view count for a list item.

How they look currently

Dark Mode

Light Mode

I was thinking that as the text flows down to the next line they kinda look a bit odd, so some changes are needed.

As always when you re-use elements, if i change it in one spot it changes in a bunch of other spots whitch i discovered later.

Here is how it looks after a few changes.

Dark Mode

Light Mode

I think this change makes it look a bit neater, maybe still need to tweak the border a bit to make it stand out slightly less.

The css and html changes are below as well.

I had to make the outer elements relative, so i could set the badges out a bit of the elements, then they dont take up as much of the real estate inside the main text area.

HTML

<h2 class='mb20'>List Group Demo</h2>
<div class="list-group">
    <a href="/view/code/9YAe4/make-labels-or-badges-look-better/" class="list-group-item list-group-item-action text-truncate" title="make labels or badges look better" data-toggle="tooltip"><span class="badge badge-info">css</span> make labels or badges look better</a>  
<a href="/view/code/06BMq/include-tinymce-only-if-a-user-is-logged-into-the-site/" class="list-group-item list-group-item-action text-truncate" title="include tinymce only if a user is logged into the site" data-toggle="tooltip"><span class="badge badge-info">php</span> include tinymce only if a user is logged into the site</a>  
<a href="/view/code/UXcP1/test-page-for-the-custom-css-12-grid-used-on-this-site/" class="list-group-item list-group-item-action text-truncate" title="test page for the custom css 12 grid used on this site" data-toggle="tooltip"><span class="badge badge-info">html</span> test page for the custom css 12 grid used on this site</a>  
<a href="/view/code/hVfXg/easy-twitter-embed-code/" class="list-group-item list-group-item-action text-truncate" title="easy twitter embed code" data-toggle="tooltip"><span class="badge badge-info">html</span> easy twitter embed code</a>  
<a href="/view/code/kWRvb/how-to-add-jquery-to-squarespace-site/" class="list-group-item list-group-item-action text-truncate" title="How to add jquery to squarespace site" data-toggle="tooltip"><span class="badge badge-info">javascript</span> How to add jquery to squarespace site</a>  
<a href="/view/code/SHZ3z/make-an-image-white-with-css-using-filter-brightness-and-invert/" class="list-group-item list-group-item-action text-truncate" title="make an image white with css using filter brightness and invert" data-toggle="tooltip"><span class="badge badge-info">css</span> make an image white with css using filter brightness and invert</a>  
<a href="/view/code/ZDkzL/add-a-jquery-date-picker-to-your-text-box/" class="list-group-item list-group-item-action text-truncate" title="add a jquery date picker to your text box" data-toggle="tooltip"><span class="badge badge-info">jquery</span> add a jquery date picker to your text box</a>  
<a href="/view/code/Dy3Nq/foundation-old-grid-format/" class="list-group-item list-group-item-action text-truncate" title="foundation old grid format" data-toggle="tooltip"><span class="badge badge-info">css</span> foundation old grid format</a>  

    </div>

CSS

/* Make List Group Relative */
.list-group a, .core-link a {
    display: block;
    padding: 10px 25px 10px 8px;
    /* text-transform: capitalize; */
    background-image: url(data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    position: relative;
}

/* Base Badge */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 2px solid;
    border-radius: 30px;
    text-shadow: 0px 1px 2px #000;
    box-shadow: 0px 1px 2px #111827;
}

/* Light Mode */
.light-mode .badge-info {
    color: #fff;
    background-color: #38b2ac;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

/* Dark Mode */
.dark-mode .badge-info {
    color: #fff;
    background-color: #2e3c50;
    border: 2px solid;
    border-color: rgb(17 24 39);
}

List Group Demo

css make labels or badges look better php include tinymce only if a user is logged into the site html test page for the custom css 12 grid used on this site html easy twitter embed code javascript How to add jquery to squarespace site css make an image white with css using filter brightness and invert jquery add a jquery date picker to your text box css foundation old grid format

Posted in css

5

6:09 am, December 31, 2020

View Statistics

This Week

108

This Month

611

This Year

0

No Items Found.

Add Comment

Other Items in css

add an outline to everything! hide the first h3 tag on the page with css center align vertical 2 items in a container flex simple javascript no library accordion button zoom effect with expanding background scroll left animation using css counter-increment to add numbering to elements hidden scroll anchor for custom scroll position ken burns slow image zoom using a radial gradient for background overlay change selected color on input elements css animated duck on footer using filter grayscale to make an image dark bootstrap dark mode twitter icon font awesome how to bundle css files together using windows or mac button with separated chevron vertically align text within a fixed height div using flex how to view a web page in its printer format white space break word css roboto and poppins fonts include quick code CSS Drawing - Beach Scene 404 Error Page Codepen right align something in its element hide the third row in a table with css how to make a transparent logo white with css target last item css with :last-of-type target first item css with :first-of-type responsive menu research full screen multi level make your images look non squished when not using image backgrounds v2 target 1st td in a table with css backdrop-filter: blur(10px); add chevrons to a ul list foundation responsive tables allow a title to be in the foreground while still having a before overlay for the background css responsive max and min targets @media pre-line white space settings pre-wrap preserve line spacing but also wrap where needed css double page document preview with shadow adding a background image to the titles of the dark mode card on this page blur the background image while keeping the foreground normal background image greyscale filter while foreground is still in colour zoom background of element when active rounded click me button with icon logo tickers marquee slow scrolling add a moving chevron to your href link inline form field padding using text-stroke to add a border to your text adding background blur to an image using css fill screen using the nth-of-type selector to target a class with the same name

Related Search Terms

css category 27

css Javascript 21

css transition 53

css JavaScript 55

css thinking 45

css foundation 52

css discovered 40

css dark mode 53

css custom css 12 grid 64

css javascript 63

Code Articles Forster Links Tools