can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.
Related
I'm been searching the web for a while looking for a way to put a icon in a white border circle with transparent background,
Anyone got some input this? it's doable?
think something like
<Code for circle> <i class="glyphicon glyphicon-plus"></i> </circle end>
Btw, it need to work in a mobile browser. thx for everyone's time!
You can do this using border and border-radius CSS properties:
CSS:
.rounded-icon {
border: 3px solid #fff;
display: inline-block;
border-radius: 26px;
width: 26px;
height: 26px;
text-align: center;
}
HTML:
<div class="rounded-icon"><i class="glyphicon glyphicon-plus"></i> </div>
jsFiddle demo
Suppose your circle icon is in a div with class "icon". I would suggest using an extremely large border radius in CSS to emulate a circle, and simply add a white border, say 2px wide:
.icon {
-moz-border-radius: 999px;
-webkit-border-radius: 999px;
-khtml-border-radius: 999px;
border-radius: 999px;
border: 2px solid #fff
}
If you also want this to work in IE8, you may also want to refer to using PIE, here: http://css3pie.com/
<div style="float:right;">
Upgrade now
Buy more credits
</div>
The float:right|left (whether inline, or in my stylesheet) seems to make the links lose both their vertical padding and their bottom border. If I remove it, I have no problem.
Here's the CSS for the links:
.button2 {
color: #fff;
font-size: 18px;
text-shadow: 0 -1px 0 #064687;
border: 0;
border-bottom: 2px #0B5BAC solid;
border-radius: 8px;
background: #1E88F2;
background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
padding: 9px;
cursor: pointer;
box-shadow: 0 2px 2px #999;
text-decoration: none;
width: 270px;
}
Try the old 'hasLayout' fix by adding zoom: 1;
.button2 {
zoom: 1;
}
http://www.satzansatz.de/cssd/onhavinglayout.html
I don't like doing hacks like that but it seems to achieve what you want.
That is because you are trying to assign styles to an inline element in which they typically don't apply. Such as vertical padding, widths, and borders. Try giving it display:inline-block or display:block; float:left;, and in the case of IE7 if you use display:inline-block, look for the display:inline-block fix for IE 7 and you should be all set. jsFiddle: http://fiddle.jshell.net/wUD9q/5/show/light/
FYI - Float has nothing to do with it at all. Removing the float on the outer div doesn't fix it either. jsFiddle for it still broken: http://fiddle.jshell.net/wUD9q/1/show/light/
IE7 is used by less than 1% of the world browsing the internet. Just move on!
SOURCE: http://theie7countdown.com/
I was initially going for an image with a black border, along with rounded corners. However, rather than having both a rounded image and a rounded border, on Webkit I ended up with a rectangular image and a rounded border. The rectangular image seemed to overlap parts of the border at the corners, making for a slightly weird looking result. On firefox and opera I've come up with the result I had wanted but I was wondering how I would achieve the same effect on webkit. Here's some code you can run to see what I'm talking about. Thanks in advance for the help!
<!doctype html>
<html>
<head>
<title> Testing Website </title>
<style type="text/css">
img {
height: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
}
</style>
</head>
<body>
<img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg">
</body>
</html>
Use box-shadow: http://jsfiddle.net/UQ2kt/
You could try a jQuery plugin. Gives a lot of options. http://jquery.malsup.com/corner/
Try;
img{
height: 500px;
width: 500px;
border: 5px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
display:block;
}
Can anyone help me to implement transparent square fluid with bootstrap?(https://twitter.com/ladygaga)
also I'd like to know how to implement rounded square in that transparent square.
Thanks in advance!!
It seems they're just using a semitransparent background image on that div to get the glassy texture. The image or background-color(such as RGBA(0,0,0,0.2)) would need to have it's alpha channel set to something other than 100%. Their CSS looks like this.
.wrapper, .wrapper-narrow, .wrapper-permalink {
position: relative;
width: 837px;
min-height: 100%;
padding: 54px 14px 15px;
margin: 0 auto;
background: url(../img/wash-white-30.png);
}
Assuming you were going to use a similar approach. With a 'wrapper' class providing the transparent background, and a 'whitebg' class providing the solid white background:
<div class="container-fluid wrapper">
<div class="row">
<div class="span2 well whitebg">
content..
</div>
</div>
</div>
with this CSS to give you what you need for your class:
.whitebg {
background-color:white;
}
The transparent DIV (not square :)) is implemented with a PNG image that has an alpha channel, as follows:
.wrapper, .wrapper-narrow, .wrapper-permalink {
background: url("../img/wash-white-30.png") repeat scroll 0 0 transparent;
margin: 0 auto;
min-height: 100%;
padding: 54px 14px 15px;
position: relative;
width: 837px;
}
As far as rounded corners are concerned, on that page, they are implemented as follows:
.module, .promptbird {
background-clip: padding-box;
border-radius: 6px 6px 6px 6px;
line-height: 16px;
margin-bottom: 10px;
position: relative;
}
For your requirements in bootstap, merely using the css opacity property for your div, and the border radius property for your inner divs will do the trick.
.transparentDiv { /*make any SQUARE transparent!*/
background: #fff; /*white*/
opacity: 0.5 /*will not work in older IE versions, add filter for it!*/
margin: 0 auto; /* optionally, center it! */
}
.roundedDiv {
border-radius: 3px 3px 3px 3px; /* 3px looks way cool! */
}
usage:
<div class="transparentDiv">I see through you baby!</div>
<div class="roundedDiv ">Love makes the world go round!</div>
Use a transparent color for your background-color using an rgba color value. That's how you get the transparency.
For the rounded corners, make it easy by using border-radius.
Here's a fiddle containing all the stuff you want - http://tinkerbin.com/j5A3fKHl
I am very much impressed by the "inset" like effect in many latest websites. Some examples are
and
The line in the center. Nowadays, many websites use these kinds of lines/effects.
I tried to achieve the same with borders but the color combination is not working me and it is not proper.
Do other websites use images for these ? is it easy to this ?
Any example css ?
Example sites:
http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
EDIT:
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.
Using an <hr> is quite clever.
Following up on user1302036’s answer, all we need is to set the color of the top and bottom borders for an <hr> and set the left and right border widths to 0.
hr {
border-width: 1px 0px;
border-color: #666 transparent #ccc transparent;
}
Use border-bottom and box-shadow.
body {
background-color: #D0D9E0;
}
h1 {
border-bottom: 1px solid #EFF2F6;
box-shadow: inset 0 -1px 0 0 #AFBCC6;
}
Check out the Fiddle and Browser Compatibility for box-shadow property.
3D effects in 2D computer displays are mere optical effects accomplished by the use of colour: lighter variations suggest bright (higher areas) and darker variations suggest shadown (lower areas). Most people is right-handed and writing lights tend to be on the left side of the desktop, so you use an imaginary source of light in the left top corner of the screen.
It's been possible to do it with pure CSS in rectangular areas for years:
body{
background-color: #8080C0;
}
div{
display: inline-block;
margin: 1em;
padding: 1em;
width: 25%;
color: white;
background-color: #8080C0;
}
div.outset{
border-width: 1px;
border-style: solid;
border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
border-width: 1px;
border-style: solid;
border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}
<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
Fonts, however, require newer CSS attributes that don't have wide support yet and, also, do not allow to provide more than one colour, so it's common to use images. See http://www.quirksmode.org/css/textshadow.html
this is css text shadow property.for get this effect use
.style{
text-shadow:0 1px #FFFFFF;
}
but really this is effect of color combination that you are using in background and text.
so you should do.
use text shadow color dark than background color.
use text shadow color light than text color.
Easiest, draw an horizontal rule with the following styles, contrast can be modified depending on background color:
hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;
height:0px;
}
Here is a more current and flexible solution that can be used.
JSFIDDLE
.hr {
background: rgba(0, 0, 0, 0.6);
height: 1px;
width: 100%;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
<span class="hr"></span>
By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.
Simply do the following:
.hr {
opacity: 0.2;
border-top: 1px solid #000;
border-bottom: 1px solid #fff;
}
Play with opacity and colors to suit your design, It works on all backgrounds I think ;)