I am trying to make a pure css div with arrow ( like speech bubble )
I have created a fiddle here http://jsfiddle.net/ozzy/j9Wku/
Basically, I havent used an image in the fiddle but to the left of the div box when you hover over the image the div animates. You can see effect when you hover over the link.
I want to make it look like a speech bubble, but struggling to accomplish this.
Here is image of what I am after.
Any help greatly appreciated. I only need help doing the arrow for the div.
Easiest way I can think of is using before pseudo class to insert "blank space" before your P tag then style it with borders.
p::before {
display: block;
position: absolute;
top: 18px;
left: -10px;
content: '';
border-top: 10px solid transparent;
border-right: 10px solid #eeeeee;
border-bottom: 10px solid transparent;
}
http://jsfiddle.net/j9Wku/6/
I fiddled with this myself, and came up with a great solution. Code below.
.logo-heading {
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
.logo-heading2{
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
display:none;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #f0f0f0 transparent transparent;
position:absolute;
top: 14px;
left: -21px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -20px;
top: 14px;
}
Changed a couple of things in the js and works perfect. Thanks guys
ther is an example
http://jsfiddle.net/amkrtchyan/j9Wku/7/
i try it with canvas
Related
Just started with styling buttons and my desire was to have a background to the left of the button while the text search was to the right of the image.
Heres the code I have so far. And here is how the button is so far
How can I add a small icon to the left of the text? I tried running this code but no luck.
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:76px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:66px;
line-height:66px;
width:152px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.button:active {
position:relative;
top:1px;
}
<div class="button">Search!</div>
Adding your exact code to the example code output works, so there's something wrong with the way you incorporated the line into your css definitions.
Unfortunately, your example code doesn't include the actual line, but my guess is that you might have put it above the linear-gradient background definitions, which would then override your image. To test if this is the error, put it all the way at the bottom of the .button declaration and see if it's being displayed.
To use multiple background images, you can comma-seperate the individual values, like so:
background-image: url('one.png'), url('two.jpg');
background-position: center center, left top;
Try to add your background image after background linear gradient
To add multiple backgrounds to an element, you need to declare them all in a comma-separated list, like this:
.button {
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}
Backgrounds are painted from last to first, so your icon should show up just fine.
If you declare a property multiple times, the browser will really overwrite the previous value, unless the new one is invalid. Also, keep in mind that gradients are considered "images".
Try to give background-size property like this
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color: #f9f9f9;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 76px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 66px;
line-height: 66px;
width: 152px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
background-size: contain;
}
<html>
<body>
<div class="button">Search!</div>
</body>
</html>
Here is the code in action:
http://jsfiddle.net/uop7dz7L/5/
This is menu. I used gradient background. When I remove gradients then the a:hover works. But somehow background:gradient is overriding it and disables it.
Any ideas?
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0 );
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
transition: color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-color: fuchsia;
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SONIC TOOTHBRUSH</li>
<li>SONIC TRAVEL</li>
<li>SONIC PLUS</li>
<li>ACCESSORIES</li>
<li><a id="contactus" href="#">CONTACT US</a></li>
</ul>
</div><!--nesmenu4-->
</div><!--nesmenu3-->
</div><!--nesmenu2-->
</div><!--nesmenu1-->
</div><!--inheader-->
</div><!--header-->
</div><!--headwrap-->
How about using background instead of background-color;
div#inheader a:hover {
background: fuchsia;
}
Even better - if you want to keep the gradients, set new gradients in this div/id with the fuchsia colour like;
background: linear-gradient(to bottom, fuchsia 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
Change it depending on how you want to shade it..
http://jsfiddle.net/u5nt9h18/
The reason why background-color isn't working on :hover is because it's behind your gradient. From the W3C spec on background-image:
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
The background-color is like z-index: 0. The background-image always lays on top of the background color. Since you have specified a color for every color stop in your gradient, none of your :hover color is coming through.
Instead you will have to declare a new background gradient on hover. If you want the background color to be a full color, simply state the same color for 0% and 100%.
Also, as a side-note: when using background gradients, use background-image instead of background. The background element is a shorthand property for all other background properties. You're not declaring any of the other properties, so declare only the one you're using.
I've cleaned up your example with the correct CSS below.
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
-webkit-transition: color 0.4s ease 0s, background 0.1s ease-in;
transition: color 0.4s ease, background 0.1s ease-in;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-image: -moz-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, fuchsia), color-stop(100%, fuchsia));
background-image: -webkit-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -o-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -ms-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='fuchsia', endColorstr='fuchsia', GradientType=0);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>SONIC TOOTHBRUSH
</li>
<li>SONIC TRAVEL
</li>
<li>SONIC PLUS
</li>
<li>ACCESSORIES
</li>
<li><a id="contactus" href="#">CONTACT US</a>
</li>
</ul>
</div>
<!--nesmenu4-->
</div>
<!--nesmenu3-->
</div>
<!--nesmenu2-->
</div>
<!--nesmenu1-->
</div>
<!--inheader-->
</div>
<!--header-->
</div>
<!--headwrap-->
When you use background-color, you only change that property of the background property. Because gradients don't use the color and just show the gradient over the background-color, changing the background-color doesn't affect them.
To fix it, simply change the entire background instead of just background-color :
div#inheader a:hover {
background: fuchsia;
}
http://jsfiddle.net/zswr71Lc/
I have defined a border class in a div:
<div class="border"></div>
.border {
border: 4px solid;
color: #E72665;
}
It gives pink color to the border. But instead of pink only. I can 4 colors in borders each covering 25% how can I do that?
If you mean each side a different color than you can simply break the declaration into specific sides...
border-top: 1px solid red;
border-right: 1px solid blue;
border-bottom: 1px solid green;
border-left: 1px solid yellow;
Per your comment below...
The only other way to achieve what you want would be to utilize the :after pseudo-class to create a separate element that has a background gradient with your 4 colors and to use that as your border.
Here is a demo: http://jsfiddle.net/uLHR6/
.border {
position: relative;
width: 100px;
height: 50px;
background: #ccc;
}
.border:after {
content: " ";
display: block;
position: absolute;
width: 100px;
height: 5px;
bottom: 0;
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 24%, #00ff00 25%, #00ff00 49%, #0008ff 50%, #0008ff 74%, #f605ff 75%, #f605ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(24%,#ff0000), color-stop(25%,#00ff00), color-stop(49%,#00ff00), color-stop(50%,#0008ff), color-stop(74%,#0008ff), color-stop(75%,#f605ff), color-stop(100%,#f605ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* IE10+ */
background: linear-gradient(to right, #ff0000 0%,#ff0000 24%,#00ff00 25%,#00ff00 49%,#0008ff 50%,#0008ff 74%,#f605ff 75%,#f605ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#f605ff',GradientType=1 ); /* IE6-9 */
}
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.
Hi guys i'm trying to create this(image) css border around a div, but having trouble.
I have created the border but cannot get the border to be smooth.
here is my code
border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;
Fiddle Up, You can see it here.
Hope it help.
EDIT:
Html:
<div class="a">
<span class="abs">Title here?</span>
<div class="b">
Hello.
</div>
</div>
Css:
div.a {
border-top: 10px solid #333;
border-left: 5px solid #333;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
border-radius: 10px;
background-color: #333;
width: 200px;
height: 400px;
}
div.b {
border-radius: 5px;
background-color: #FFF;
width: 180px;
height: 350px;
padding: 10px;
}
.abs {
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}
You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.
Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:
The html structure could look like this:
<div id="big_div">
Search for a hotel
<div id="small_white_div">
Some other content
</div>
</div>
And the corresponding css would be:
#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}
Good luck.
It's done with background image.
You are looking for border-radius to get the rounded corners. Try out something like this:
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
Note this is CSS3 and will not work in older versions of IE