Log In · Register

 
 
 Closed TopicStart new topic
CSS Code for Curved Images, I need help on making my design curved...
wintermelody
post Feb 5 2009, 09:03 PM
Post #1


Senior Member
***

Group: Member
Posts: 31
Joined: Jul 2007
Member No: 552,713
Heeeeey all :] So I made a new design and it's curved. But I didn't realize that slicing the images and all that jazz made the design a rectangle in the end.

Can anyone help me on coding for curved images? that would be most kind of you! I just recently made this layout and copied the CSS file from previous designs. But I would like to focus on the making the design curved first as well as centering it.



HTML CODE;;
CODE
<html>
<head>
<title>SLHS`s Key Club - The Kiwis! </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor = "#C41230">
<!-- The Images -->
<div class="img curved">
<table width=603 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td>
<img src="images/index_01.jpg" width=603 height=373 alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_02.jpg" width=603 height=262 alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_03.jpg" width=603 height=63 alt=""></td>
</tr>
</table>
</div>
dfasdfsdf
<!-- End ImageReady Slices -->


</body>
</html>


CSS CODE;;
CODE
body {
background-color: #C41230;
margin: 20px;
padding: 0;
font-family: "Lucida Sans Unicode", Times, Serif;
font-size: 10.5px;
color: #7D7D87;
}
.clear { clear: both; visibility: hidden; }
p, h1, h2, h3, h4, h5, h6, blockquote { margin: 10px 0; }

blockquote {
margin-top: 10px 0 10px 50px;
padding-left: 15px;
border-left: 3px solid #159E8E;
}

a:link {
color: #EB6049;
font-family: Georgia;
font-size: 10px;
text-transform: lowercase;
text-decoration: none;
}

a:visited {
color: #EB6049;
font-family: Georgia;
font-size: 10px;
text-decoration: none;
letter-spacing: 2px;
}

a:hover {
color: #EB6049;
font-family: Georgia;
font-size: 10px;
text-decoration: none;
letter-spacing: 5px;
font-weight: bold;
}

h1 {
font-family: Times;
background-color: #EA4C5B;
color: #FFF;
text-align: center;
letter-spacing: 5px;
font-size: 16px;
line-height: 80%;
font-weight: bold;
padding: 5px 5px 5px 5px;
font-variant: small-caps;
}

h2 {
border-bottom: 1px dashed #FFF;
color: #938DA7;
font-size: 23px;
font-family: Georgia, Arial;
font-variant: Capitalize;
margin: 5px 0px 5px 0px;
text-align: right;
font-style: italic;
letter-spacing: -3px;
}

h3 {
color: #C76064;
font-size: 16.5px;
text-align: center;
font-family: 'Palatino Linotype', Georgia;
margin: 10px 0px 0px;
text-transform: lowercase;
letter-spacing: 4px;
font-style: italic;
}

b, strong {
color: #6B849A;
font-family: Arial;}

i, em {
color: #CC4D62;
font-family: Georgia;}

u {
color: #509B63;
font-family: Arial;
border-bottom: 1px dashed;
text-decoration: none;}

#content {
min-height: 500px;
padding: 5px 0 0;
}

#main {
background: #D9D9D7;
width: 400px;
margin: 0px 0px 0px 8px;
padding-bottom: 15px;
float: left;
}

#side {
background: #D9D9D7;
width: 160px;
margin: 0 5px 20px 20px;
float: left;
text-align: left;
}

#side ul.navi {
margin: 10px 0; padding: 0;
list-style: none;
}
ul.navi li a, ul.navi li a:visited {
padding: 3px;
color: #778885;
display: block;
font-family: Tahoma;
text-transform: Uppercase;
letter-spacing: 2px;
}
ul.navi li a:hover {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-right: 15px solid #B3C87D;
font-style: italic;
font-size: 13px;
font-family: Times;
background: #FFF;
text-decoration: none;
color: #FC9143;
text-transform: Capitalize;
}
}
 
newkidontheblock
post Feb 6 2009, 05:46 PM
Post #2


Offline.
*****

Group: Official Designer
Posts: 609
Joined: Mar 2007
Member No: 507,591
Their is no way that I know of to create a rounded end image using CSS. The only thing that you can do is create a container div a give it a curved edge.
CODE
-moz-border-radius:;
-webkit-border-radius:;


I will not recommend doing this, because It only words in FireFox 3. something and Safari 3 . something. I recommend just create a CURVE PNG IMAGE.
 
wintermelody
post Feb 6 2009, 07:58 PM
Post #3


Senior Member
***

Group: Member
Posts: 31
Joined: Jul 2007
Member No: 552,713
awwwwww, really? i'll do that instead, then...thanks! :]
 
manny-the-dino
post Feb 6 2009, 08:00 PM
Post #4


Senior Member
*******

Group: Administrator
Posts: 8,629
Joined: Jan 2007
Member No: 498,468
Topic Closed & Moved


PM me if you need this opened for some reason.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic