SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Help with making glowing triangle is css

    Hi guys,
    I was drawing something in pure css and one thing that I could not manage to draw was a triangle that glowed.
    Here is the CSS I was using:
    Code CSS:
    #glowTriangle{
    				width:0;
    				height:0;
    				margin-left:10px;
    				background:transparent
    				border-color:#ff0000 transparent transparent transparent ;
    				border-style:solid;
    				border-width:27px;
    				box-shadow:0 0 5px #fff;
    			}
    and the html was just a div tag with the id #glowTriangle.

    But what the above code does is sets a glow / white box shadow around the box that the triangle is a part of.

    Can anyone help me add the glow inside the box so that it looks like its coming off the triangle or if possible add the glow to the triangle itself ?

    Thanks in Advance, I really appreciate it.

    Best Regards,
    Team 1504.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Unfortunately, triangle-shadow won't be coming out until CSS4.

    box-shadow has its limitations. I suspect you are better off doing this as an image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could do something like this for modern browsers only.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        background:#000
    }
    #glowTriangle{
        height:18px;
        overflow:hidden;
        width:40px;
    }
    #glowTriangle:after {
        content:" ";
        width:27px;
        height:27px;
        background:red;
        -moz-transform: rotate(45deg) scale(1.0);
        -webkit-transform: rotate(45deg) scale(1.0);
        transform: rotate(45deg) scale(1.0);
        box-shadow:0 0 15px #fff;
        display:block;
        margin:-17px auto 0;
    }
    </style>
    </head>
    <body>
    <div id="glowTriangle"></div>
    </body>
    </html>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ha ha, too clever! (That's called "thinking outside the box-shadow" )
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    haha i love the humor ralph.

    And thank you Paul, that solution is extremely clever, but im not a fan of code that doesn't validate. So i think ill have to stick with a bgimage.

    or do you guys think i could do this is svg?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by team1504 View Post
    haha i love the humor ralph.

    And thank you Paul, that solution is extremely clever, but im not a fan of code that doesn't validate. So i think ill have to stick with a bgimage.

    or do you guys think i could do this is svg?
    It's alright to have code that doesn't validate, as long as you know why it doesn't validate, and there isn't really another easy option.

    If you have a problem with code in general that invalidates, it's kind of stupid to be nitpicky like that. Sorry to be so blunt.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by team1504 View Post
    And thank you Paul, that solution is extremely clever, but im not a fan of code that doesn't validate. ?
    Then why did you supply us with invalid code to start with (try validating and see).

    As you were using box-shadow anyway which only very modern browsers support I assumed you wouldn't mind the transform properties either but if you want to support older browsers then just use an image. I thought you were just playing around and trying things out

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    As you were using box-shadow anyway which only very modern browsers support I assumed you wouldn't mind the transform properties either but if you want to support older browsers then just use an image. I thought you were just playing around and trying things out
    I was just playing around with things. As I often do in web design, just to see what I can accomplish without a real goal set in mind. I guess thats why some of my creations are innovative and some are just stupid

    Hmm, i didn't know how little support it had. For some reason, I always assumed that box-shadow and border-radius have the biggest support of the new css properties. Also because they were some of he most requested features.
    Err oh wait, isn't that text-shadow and border-radius?

    And, i had no clue that it didn't validate because in my mind i was using valid code. lol.
    Maybe i'll go with Paul's solution and remove the shadow and triangle styles and serve an image for ie8 and below-- does that sound good?


    Also idk if i want to use a header request just for the triangle. Maybe i'll include it in another image and do background-position. Or if i can come up with a small gif nor svg that may work. too.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •