How to create this in CSS?

[PS65]

Hi guys, I am new and found this forum because I am stuck!

I have created a JQuery dialogue box and want to style it like the one attached.

Can anyone help me with creating a rounded corner with a 1px solid boarder and then a further 3px semi-transparent boarder?

Many thanks!
PS65

 

[ibclare]

Use the shape tool. There is a rounded rectangle. You can choose options to constrain it as you draw it out or not. You will see the shape icon; if you hover over it, you'll see geometry options which is where you control this.

Use the layer effects, fx>stroke to add your 1px stroke. There is always more than one way to do things in PS. The easiest way to make the transparent border, at least as I would do it, is to then ctl/cmd click on the layer icon. This will give you a selection. Go to select>modify>expand and increase by the number of pixels you want. Make a layer below your first box and fill the selection with the color you want. Then decrease the opacity of that layer for transparency.

That's what I would do. Quick and easy.

 

[DoTTGaMMa]

CSS or CS5? I think your posting this to the wrong support forum...
Anyways
The one you show has a gradient- I'm just going to assume you do not want that, because if you do that is an image embed, not coding (although you could its just more difficult)

Found a tutorial for it
Border-radius: create rounded corners with CSS! - CSS3 . Info

First you will create the larger background rounded rectangle, set the opacity in the CSS to about 35%, then add another rectangle that will be on-top of the background rectangle (the foreground) make this rectangle smaller, with an opacity of 100%

And if you need some more help with CSS you can visit
W3schools.com
Thats where I learned a lot of my basic codings

 

[RdG]

this is a css code

    <style type="text/css">
    /*<![CDATA[*/
    
    body, p, div, form, label, input{
    /* some reset */
        margin:0;
        padding:0;
        font-family:Verdana, Geneva, sans-serif;
        font-size:small;
        color:#666;
        }
    .wrapper{
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;    
        background-color:#dbdbdb;    
        width:400px;
        margin:0 auto;
        padding:10px;
        }
     .box{
        width:auto;
        height:200px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        background-color:#FFF;    
        border-radius: 8px;    
        border:solid 1px #CCC;
        /*margin:10px;*/
    }
    .label p.first{
        width:auto;
        text-align:center;
        padding:20px;
        background: #ffffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #ffffff 0%, #ececec 99%, #f8f8f8 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(99%,#ececec), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* IE10+ */
        background: linear-gradient(top,  #ffffff 0%,#ececec 99%,#f8f8f8 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
        -webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        -moz-border-radius-topleft: 8px;
        -moz-border-radius-topright: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;        
        border-bottom:solid 1px #FFF;
        }
    .label p.second{
        text-align:center;
        width:auto;
        padding:20px;
        border-top:solid 1px #999;
    }
    p.agree{
        float:left;
        width:50%;
        }
    p.notagree{
        float:right;
        width:50%;
        }
    p input{
        display:block;
        margin:0 auto;
        width:145px;
        height:40px;
    }
.buttonRed{
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ef4949), color-stop(1, #b44040) );
        background:-moz-linear-gradient( center top, #ef4949 5%, #b44040 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef4949', endColorstr='#b44040');
        background-color:#ef4949;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        color:#ffffff;
        font-family:arial;
        font-size:13px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 2px 0px #9e3434;
        border:1px solid #b44040;
}
    .buttonGreen {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a4d04d), color-stop(1, #7bbd34) );
        background:-moz-linear-gradient( center top, #a4d04d 5%, #7bbd34 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a4d04d', endColorstr='#7bbd34');
        background-color:#a4d04d;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid #669831;
        color:#e8f3d2;
        font-family:arial;
        font-size:13px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:1px 2px 0px #67942d;
}
.buttonGreen:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7bbd34), color-stop(1, #a4d04d) );
        background:-moz-linear-gradient( center top, #7bbd34 5%, #a4d04d 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bbd34', endColorstr='#a4d04d');
        background-color:#7bbd34;
}
.buttonGreen:active {
        position:relative;
        top:1px;
}
.buttonRed:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b44040), color-stop(1, #ef4949) );
        background:-moz-linear-gradient( center top, #b44040 5%, #ef4949 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b44040', endColorstr='#ef4949');
        background-color:#b44040;
}
.buttonRed:active {
        position:relative;
        top:1px;
}        
    /*]]>*/
    </style>

this is html code within body

<div class="wrapper">
    <div class="box">
    <form class="formBox" >
    <div class="label">
        <p class="first">
        Are you sure about this?
        </p>
        <p class="second">
    Clicking yes, Battlefield 3 will be deleted on you
    computer. Do you really want to do this?</p>
    </div>
    <div class="buttonForm">
        <p class="agree">
            <input class="buttonGreen" type="submit" value="Yes, I'm sure!" />
        </p>
        <p class="notagree">
            <input class="buttonRed" type="submit" value="Don't do it!" />
        </p>
    </div>
    </form>
    </div>
</div>

here some link can help you to generate a css3 code:
Ultimate CSS Gradient Generator - ColorZilla.com
CSS Border Radius Generator
CSS Button Generator - Imageless css buttons simplified

This is the result:

it's not exactly the same but nearly.
About opacity have not been able to do something, sorry.
Bye Bye

 

[Paul]

Yeah what he just said

 

[RdG]

So I think you have some idea, it would be useful.

 

[ChrisHPZ]

A word of caution PS65, RdG's post is right on the money from the border-radius property to the box-shadow property. However, if standards compliant code is important to you as the W3C Consortium dictates, these properties are not considered valid code despite the fact that they work. If you must use standards compliant code, then use images as ibClare suggested.

 

[ChrisHPZ]

RdG, I've used to opacity property myself and honestly, it's only usefulness lies in adding it to a :hover psuedoclass such as a:hover, img:hover or any other whatever:hover. I'm working on a website where the images are initially displayed at .5 or 50% opacity. when the user hovers over the image, it animates to full opacity. Although it still is not considered a valid css property it does work and saves a lot of time coding an image or anything else using say Flash and Actionscript.

 

[RdG]

RdG, I've used to opacity property myself and honestly, it's only usefulness lies in adding it to a :hover psuedoclass such as a:hover, img:hover or any other whatever:hover. I'm working on a website where the images are initially displayed at .5 or 50% opacity. when the user hovers over the image, it animates to full opacity. Although it still is not considered a valid css property it does work and saves a lot of time coding an image or anything else using say Flash and Actionscript.

You are right about the standards compliant.

Could you explain me better this effect with some code please?
Sorry but I'm not really good with english language .
Thanks so much.

 

[ChrisHPZ]

It's better if you see if in action. Go to this site, CRD Designs - Ancient Architecture
Now on the right hand side, you'll see a group of images that appear to be faded. This was done by applying the opacity property to all img tags.

img {
opacity: .5;
}

Now hover your mouse over any one of the images. This effect was done by applying a transition and opacity property to animate the image your hovering over into view over a period of 2 seconds. Compare the opacity property between both css styles. Notice how in the img tag, the opacity is set to .5? What this means is that any element with the tag of img is going to be displayed at 50% of its normal brightness. In the second rule I've posted here, the opacity property is set to 1. This means that all elements with the tag img are going to be displayed at full brightness when the user hovers their mouse over them. That's about as clear as I can make it, but it is better that you see it in action on my website. P.S. don't bother with clicking on the links as I haven't actually made those pages yet.

img:hover {
opacity: 1;
-webkit-transition:all 2.0s ease-in-out;
-moz-transition:all 2.0s ease-in-out;
-o-transition:all 2.0s ease-in-out;
-ms-transition:all 2.0s ease-in-out;
transition:all 2.0s ease-in-out;
}