Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    Hello everyone,

    can anyone tell me how to achieve this design/effect -
    like a bright 1-pix line outlined by a dark 1-pix line around a column, which creates that subtle 3D bevel-effect.
    here's an example (the box "theme instructions").

    (i want to create that same effect on the "boxes" of their catch-box theme)

    And - is this a gradient in the column-background or is it my monitor ?
    I guess it's done just with css and is probably very simple, but i'm not sure how to describe it...so nothing via google (plus i'm not native speaker ).

    Thanks in advance !

  2.  

  3. #2
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Quote Originally Posted by soundguy123, post: 248097
    Hello everyone,

    can anyone tell me how to achieve this design/effect -
    like a bright 1-pix line outlined by a dark 1-pix line around a column, which creates that subtle 3D bevel-effect.
    here's an example (the box "theme instructions").
    This particular example is using an image to achieve the effect, but it is possible to do this in CSS.

    It would be something like this:
    HTML Code:
    #wrapper
    {
            outline: 1px solid #000 /* dark color */
            border: 1px solid #fff; /* light color */
    }
    Quote Originally Posted by soundguy123, post: 248097
    (i want to create that same effect on the "boxes" of their catch-box theme)

    And - is this a gradient in the column-background or is it my monitor ?
    I guess it's done just with css and is probably very simple, but i'm not sure how to describe it...so nothing via google (plus i'm not native speaker ).
    To get this effect you just add a thick border to the bottom of the box, then round the corners.

    Like this:
    HTML Code:
    #wrapper
    {
    
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc; /* notice the thicker border */
    
    /* round corners by 5px (the three lines of code below are used to support all browsers) */
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    soundguy123 likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  4. #3
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    thanks blackhawk for the quick reply !
    I'm trying this for about an hour but it doesn't seem to work (i'm certainly doing it wrong that is )

    this is the original code, it defines the "boxes":
    Code:
    .hentry,
    .no-results,
    #author-info,
    #disqus_thread,
    #content .error404 {
        background-color: #fff;
        border-bottom: 2px solid #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0 0 2em;
        padding: 0.5em 5% 2em;
        position: relative;
        width: auto;
    ...but whether replacing nor appending does have an effect. What does the wrapper do/mean ?

    Btw - how do you know they've used an image on their site ? And is maybe copying/modifying that image the easier way ? Sorry for all the silly questions :8

  5. #4
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Quote Originally Posted by soundguy123, post: 248100
    thanks blackhawk for the quick reply !
    I'm trying this for about an hour but it doesn't seem to work (i'm certainly doing it wrong that is )

    this is the original code, it defines the "boxes":
    Code:
    .hentry,
    .no-results,
    #author-info,
    #disqus_thread,
    #content .error404 {
        background-color: #fff;
        border-bottom: 2px solid #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0 0 2em;
        padding: 0.5em 5% 2em;
        position: relative;
        width: auto;
    ...but whether replacing nor appending does have an effect. What does the wrapper do/mean ? Sorry for the silly questions :8
    #wrapper, is a common id for the container which holds all of the website content. It "wraps" around everything.

    As for your code, have you put any content inside of the box that you styled? Sometimes a div won't show if it is empty.

    A screenshot and/or your html will help me better determine your problem.
    soundguy123 likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  6. #5
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    you were faster than my edit :
    Btw - how do you know they've used an image on their site ? And is maybe copying/modifying that image the easier way ? Sorry for all the silly questions :8
    thanks a million times for taking the time !
    here's a screenshot of how it looks now...you could also look up the site live - the adress is shown in the image, i don't want to post it here directly

    As for your code, have you put any content inside of the box that you styled? Sometimes a div won't show if it is empty.
    yes, there are test messages and so on..the box is there, but without the outline(s)

  7. #6
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Quote Originally Posted by soundguy123, post: 248103
    yes, there are test messages and so on..the box is there, but without the outline(s)
    I noticed that your code doesn't call for any type of outline or border. That is why it isn't working. Yes, you are using "border-bottom", but that doesn't apply a border anywhere else.

    Change your code to this, and you should get the effect you're looking for:

    HTML Code:
    .hentry,
    .no-results,
    #author-info,
    #disqus_thread,
    #content .error404 {
        background-color: #fff;
    
    /* -------- add the following ---------- */
        outline: 1px solid #fff;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    /* ------------------------------------ */
        border-bottom: 2px solid #ccc;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 0 0 2em;
        padding: 0.5em 5% 2em;
        position: relative;
        width: auto;
    soundguy123 likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  8. #7
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    #wrapper, is a common id for the container which holds all of the website content. It "wraps" around everything.
    so if i get this right, i would place it inside the "global" container in this case - which doesn't have the effect either :/ (?)

  9. #8
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    Great ! It's working !
    The code you saw before was the original one, had to overwrite because it was messed up.
    Right now i'm only struggling to find out how to get the outline with round corners...you posted it above...but again....ahem...i don't get it

  10. #9
    Junior Member
    Join Date
    Feb 2013
    Posts
    11
    Member #
    35115
    got it, just changed it to
    Code:
    -webkit-outline-radius: 5px;
    -moz-outline-radius: 5px;
    outline-radius: 5px;
    thanks a million again, blackhawk! ...thats exactly what i wanted, just need to adjust the colors.
    From curiosity i'd love to know how this can be done with images too ...if it's not too tricky to explain.

  11. #10
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    No problem. To help you out in the future, I would like to give you a few tips.

    When applying CSS to a HTML page, you can use either classes or id's.
    HTML Code:
    <style>
    #wrapper /* this is an id */
    {
    // stuff here
    }
    
    .wrapper /* this is a class */
    {
    // stuff here
    }
    </style>
    
    <body>
    <div id="wrapper">
            <p class="wrapper">text here</p>
            <p class="wrapper">text here</p>
            <p class="wrapper">text here</p>
    </div>
    </body>
    If you notice in the example above, I only used ( #wrapper ) once in the code, and I used ( .wrapper ) multiple times. Well, there are some rules you have to follow when building a page to pass CSS validation.

    Here they are:

    1. Each element can only have one ID
    2. Each page can have only one element with that ID
    3. You can use the same class on multiple elements
    4. You can use multiple classes on the same element

    Long story short, you can only call a specific ID (such as #wrapper) once on any given page, while you can call a specific class as many times as you want on any given page.

    Quote Originally Posted by soundguy123, post: 248106
    so if i get this right, i would place it inside the "global" container in this case - which doesn't have the effect either :/ (?)
    Now, I didn't go on that rant without a purpose. You can name your classes and IDs any way you would like.

    Many website developers call their absolute outer div, the "wrapper". It is also commonly called "container", "global", etc. It is the div that holds the web page together.

    So when I used #wrapper in my example, I was referring to the equivalent of your "global container".
    soundguy123 likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

css bevel border effect
,
css bevel effect
,

css beveled line

,
css bevelled th
,
css code for border 3d effect
,
css cool bevel effect
,
css line emboss effect
,
css subtle 3d
,

css3 bevel effect

,
css3 line bevel
Click on a term to search for related topics.
All times are GMT -6. The time now is 02:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com