Notices/Alerts

Discussion in 'Web Design' started by Buny, Feb 6, 2016.

  1. Buny

    Buny Registered User Member

    Messages:
    7
    Likes:
    3
    Local Time:
    1:43 AM
    Boon:
  2. Fugitive
  3. Hello. I got bored, and decided to make some alerts/notices for web use. Although, I'm not going to use them, as they aren't what I was going for, but I thought they might benefit some other people. You may modify it in any way you want.

    View them below:

    EPdbXG



    Preview image:
    [​IMG]
     
  4. Mauvros

    Mauvros PhD in dumbfuckery Member

    Messages:
    662
    Likes:
    374
    Local Time:
    9:43 AM
    Boon:
  5. Matheos
  6. Not too special, but nice and simple.

    Personally I'd give the bottom and left borders a darker 2px color. Maybe add in a glyphicon to make the alert's more interesting? Also, the code is pretty long for such a simple box.
     
    Last edited: Feb 6, 2016
  7. Buny

    Buny Registered User Member

    Messages:
    7
    Likes:
    3
    Local Time:
    1:43 AM
    Boon:
  8. Fugitive
  9. I was going to add a glyph, but, I stopped short in my tracks and decided the ones I have are already good enough. Also, the code for one of them is only 25 lines, the code shown is all 3 of them.
     
  10. Mauvros

    Mauvros PhD in dumbfuckery Member

    Messages:
    662
    Likes:
    374
    Local Time:
    9:43 AM
    Boon:
  11. Matheos
  12. Didn't see that, fair enough though. Personally if I was you I'd go for Bootstraps <div class="alert alert-###"> style and go around with that, since the default BS alert's are modern and sleek n shit. Just add a few Habbo glyphs and vio la. Maybe add a JS script in there with an X marker to hide the alert when its been seen.
     
  13. Ralph

    Ralph KING Member

    Messages:
    1,237
    Likes:
    376
    Local Time:
    3:43 AM
    Boon:
  14. ralph
  15. The code is really messy. There's no need for 3 classes, one for each color, just make one .box class
     
  16. HymenBurster

    HymenBurster Registered User Member

    Messages:
    6
    Likes:
    3
    Local Time:
    7:43 AM
    Boon:
  17. HymenBurster
  18. Far too much unnecessary code in here man, I've tidied it up for you and also made a Pen.

    Your code needs to be a lot more semantic, look into using h1's for the headers, and p's for the paragraph text.

    Code below,

    HTML:
    HTML:
    <div class="alert-box green">
        MOD Notice
        <hr />
        Information Here
    </div>
    
    <div class="alert-box red">
        MOD Notice
        <hr />
        Information Here
    </div>
    
    <div class="alert-box blue">
        MOD Notice
        <hr />
        Information Here
    </div>
    Code:
    .alert-box {
        padding: 15px 15px 15px 20px;
        border: 1px solid transparent;
        font-family: Tahoma;
        width: 900px;
        margin: 0 auto;
        border-radius: 4px;
        color: #fff;
    }
    
        .alert-box a {
            text-decoration: none;
            color: #b8b8b8;
        }
    
        .alert-box a:hover {
            text-decoration: underline;
            color: #fff;
        }
    
        .alert-box.green {
            background-color: #19b33d;
            text-shadow: 1px 1px 0 1px #178530;
        }
        .alert-box.red {
            background-color: #991c1c;
            text-shadow: 1px 1px 0 1px #701616;
        }
    
        .alert-box.blue {
            background-color: #1c5299;
            text-shadow: 1px 1px 0 1px #162d70;
        }