Jump to content

want html and css code for the design


Recommended Posts

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????

post-18311-0-24095300-1303752786_thumb.g

Link to comment
Share on other sites

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 text

color: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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Privacy Policy