nischalinn Posted April 25, 2011 Report Share Posted April 25, 2011 I am trying to code for the design, but not getting the proper design while codding. Can any one help me, can anyone write me the html and css code for the design? I can not code for the rounded corners. I do not want to load all them like images.I want to code for the background and for the texts, how can I do that???? Quote Link to comment Share on other sites More sharing options...
ɹəuəllıʍ ʇɐb Posted April 26, 2011 Report Share Posted April 26, 2011 I only see an image; are you saying you found this somewhere, created with HTML & CSS?If so, where? Quote Link to comment Share on other sites More sharing options...
Scythe Posted April 26, 2011 Report Share Posted April 26, 2011 CSS borders:GECKO/FIREFOX:important bit:<div style="-moz-border-radius:10px;"></div>individual corners:<div style="-moz-border-radius-topleft:10px;"></div>WEBKIT/GOOGLE CHROME/SAFARI:important bit:<div style="-webkit-border-radius:10px;"></div>individual corners:? I do not know if this is possible in pre-css3 webkit CSS3/ONLY SUPPORT WITH SOME NEW BROWSER RELEASES:important bit:<div style="border-radius:10px;"></div>individual corners:<div style="border-bottom-left-radius:10px;"></div>Obviously the radii can be applied to any element, I chose div as it's probably the most common tag where borders are used (and is what you would use in your screenshot above). Backgrounds:for these I assume you mean the gradient color effect?core code:<div style="[b]background[/b]:red;"></div>gradient effect FIREFOX:top-to-bottom<div style="background: [b]-moz-linear-gradient(#FFC7C7,#FF373E)[/b];"></div>left-to-right<div style="background: [b]-moz-linear-gradient(90deg,#FFC7C7,#FF373E)[/b];"></div>gradient effect WEBKIT:top-to-bottom:background-image: -webkit-gradient( linear, top top, right top, color-stop(0.37, rgb(255,199,199)), color-stop(0.69, rgb(255,55,62)) );left-to-right:background-image: -webkit-gradient( linear, left top, right top, color-stop(0.37, rgb(255,199,199)), color-stop(0.69, rgb(255,55,62)) );The webkit looks more like javascript and is extremely un-user friendly, we know :( It is, however, css. As for the text,<span style="letter-spacing:5px; font-family:Calibri; font-size:24px; color:black;">Bank</span> letter-spacing does as it says, you apply a font-family to allow multiple fonts. It's important to remember that not everyone on the internet has the same set of fonts, Calibri, Arial, Helvetica, and sans-serif are pretty standard, however. font-size determines the size of the textcolor:black is redundant in 99% of cases, however assurance is typically worth the minimally higher page weight. As for the smaller text below that, same deal (though without letter-spacing, that seems to be standard spacing you have there (the top may be too?). a <br> tag (line break) will let you skip down a line. If this is overwhelming and you're just thinking "OMG infodump!" I can whip up a sample of that if need be, however I encourage you to check out w3, and the gradient generator for yourself. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.