Fiddle
HTML:
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
CSS:
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:50px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:80px 50px;
-moz-border-radius-bottomright:80px 50px;
border-bottom-right-radius:80px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:50px;
width:20px;
height:30px;
border-style:solid;
border-width:0 10px 10px 0;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-right-radius:40px 50px;
-moz-border-radius-bottomright:40px 50px;
border-bottom-right-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:45px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:76px;
width:24px;
height:15px;
background:#fff;
}
Example taken from: Nicolas Gallagher
Basically this text bubble is curving to the left and on the bottom-left. I'd like to duplicate it exactly except have it on bottom-right and curving to the right. Just flip it.
I've tried changing the rights into lefts but it's not happening. Can anyone tell me what needs to change to flip this bubble?
Do you mean this?
If you want to change geometry, you should to play with border-width and border-radius. Also I changed pseudo-class from :after to :before, and vice versa in elements and border-radius from right to left.
.rectangle-speech-border {
position:relative;
padding:50px 15px;
margin:1em 0 3em;
border:10px solid #5a8f00;
text-align:center;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
/* creates larger curve */
.rectangle-speech-border:after {
content:"";
position:absolute;
z-index:10;
bottom:-40px;
left:400px;
width:20px;
height:30px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates smaller curve */
.rectangle-speech-border:before {
content:"";
position:absolute;
z-index:10;
left:370px;
width:50px;
height:30px;
bottom: -40px;
border-style:solid;
border-width:0 0 10px 10px;
border-color:#5a8f00;
background:transparent;
/* css3 */
-webkit-border-bottom-left-radius:40px 50px;
-moz-border-bottom-left-radius:40px 50px;
border-bottom-left-radius:40px 50px;
/* reduce the damage in FF3.0 */
display:block;
}
/* creates a small circle to produce a rounded point where the two curves meet */
.rectangle-speech-border > :first-child:before {
content:"";
position:absolute;
bottom:-40px;
left:425px;
width:10px;
height:10px;
background:#5a8f00;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* creates a white rectangle to cover part of the oval border*/
.rectangle-speech-border > :first-child:after {
content:"";
position:absolute;
bottom:-10px;
left:376px;
width:24px;
height:15px;
background:#fff;
}
<blockquote class="rectangle-speech-border">
<p>This is a blockquote that is styled to look like a speech bubble</p>
</blockquote>
Related
I have a problem with center positioning a button in a row in a table.I used width and margin but it don't work.Can you help me? Here's the code for that button(in css):
.subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}
.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}
simply try this
button{
height:20px;
width:100px;
position:relative;
top:50%;
left:50%;
}
for just horizontal alignment use either
button{
margin: 0 auto;
}
DEMO
To achieve this, I would use following code:
.subm {
position:absolute;
width:130px;
height:25px;
top: calc(50% - 13px); // 50% - 0.5 * height.
left: calc(50% - 65px); // 50% - 0.5 * width.
}
And for the parent:
position: relative;
You can see a working JSFiddle here
If you used width and margin: auto's and it's still not centering you may just need to add display: block to your .sumb class like so:
.subm {
display:block;
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black
}
Demo: http://jsfiddle.net/re079odr/
I am trying to create the 'Google Now' microphone icon using pure CSS3.
The icon features a white microphone on a red circular background.
I tried font-awesome but in vain
I need your help to complete this task
No animations or functionality, just the icon
Google Now Icon Only with CSS
DEMO
output :
HTML :
<div class="gn"><div class="mc"></div></div>
CSS :
body{font-size: 15px;}
.gn{
position:relative;
margin: 5% auto;
background-color:#FE2222;
border-radius:50%;
width:10em; height:10em;
}
:before, :after{
content:'';
position:absolute;
background-color:#fff;
}
.gn:after{
top:30%; left:43%;
height:15%; width:14%;
border-top-left-radius:50%;
border-top-right-radius:50%;
}
.gn:before{
top:40%; left:43%;
height:15%; width:14%;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
.mc{
position:absolute;
top:50%; left:37%;
height:24%;
width:26.5%;
overflow:hidden;
}
.mc:before{
bottom:50%;
width:100%; height:100%;
box-sizing:border-box;
border-radius:50%;
border:0.5em solid #fff;
background:none;
}
.mc:after{
top:50%; left:40%;
width:20%; height:25%;
}
Demo
html
<div class=container><i class=icon-microphone></i></div>
css
#import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
* {
margin:0;
padding:0;
}
.container {
width:150px;
background-color:#e74c3c;
display:block;
margin:100px auto 0px auto;
border-radius:100%;
box-shadow:0px 0px 15px 2px #bdc3c7;
cursor:pointer;
transition:.3s all ease-in;
position:relative;
}
.icon-microphone {
color:white;
font-size:60px;
line-height:150px;
display:block;
text-align:center;
transition:.1s all ease-in;
}
.container:hover {
background-color:#27ae60;
}
.container:active {
background-color:#e74c3c;
}
.container:active .icon-microphone {
color:#ecf0f1;
}
I want to make that line crossing the square (image below) in css, could anyone help me?
img http://www.brainmotion.com.br/download/img.png
If i have a div like this:
<div class="abcd">
</div>
.a {border:1px solid;}
Thanks so much
You can try using CSS triangle trick to render 2 triangles, the first has border-color the same as the color you want, the second has border-color the same as the background-color of the div:
div {
width:49px;
height:49px;
border:1px solid black;
position:relative;
}
div:before {
content:'';
position:absolute;
width:0;
height:0;
top:-1px;
left:-1px;
border:25px solid transparent;
border-right:25px solid black;
border-bottom:25px solid black;
z-index:-3;
}
div:after {
position:absolute;
content:'';
width:0;
height:0;
top:1px;
left:1px;
border:24px solid transparent;
border-right:24px solid white;
border-bottom:24px solid white;
z-index:-2;
}
Here is the fiddle
Note that with this solution, you have to tweak it a little with trial and error method.
UPDATE: Another simple method is using linear-gradient to generate the diagonal dynamically for the background of the div like this:
div {
width:50px;
height:50px;
border:1px solid black;
position:relative;
text-align:center;
line-height:50px;
font-size:25px;
background:linear-gradient(to bottom right, white, white 48%, black 50%, white 52%, white);
}
Here is the updated fiddle
Yes, you could do this using transform: rotate(45deg); in combination with overflow: hidden on the parent <div>, but I would highly discourage that, as It would be a disaster in terms of browser compatibility. I would just use the image.
Here is an example (note: quick and sloppy) that I tested in chrome that works:
http://jsfiddle.net/97xsh/1/
here is one that achieves the same effect.
http://jsfiddle.net/j8USa/1/
.box{
width:40px;
height:40px;
border:1px #000 solid;
overflow:hidden;
position:relative;
text-align:center;
vertical-align:middle;
}
.strike{
position:absolute;
width:60px;
height:1px;
border-top:1px #000 solid;
margin-top:20px;
margin-left:-10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.box span{
vertical-align:middle;
font-size: 26pt;
color:red;
}
I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/
I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?
This follows on from this question: Border-box CSS not working properly
If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.
-webkit-box-shadow(inset 0 0 1px #000);
-moz-box-shadow(inset 0 0 1px #000);
-o-box-shadow(inset 0 0 1px #000);
box-shadow(inset 0 0 1px #000);
You can leverage the relative positioning you are already using to align your images with the border.
Example: http://jsfiddle.net/zbrcb/
Merge these definitions with your existing definitions.
#page {
border: 10px solid #333;
}
#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px; }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }
​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).
Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.
How can I make a background like the attached image in css? I have experimented with border so that I can give it a shape like the black part, but in that case I cannot write text so I guess border shapes of parallelogram will not work any other ideas?
You can write like this:
CSS
.tab{
width:200px;
height:40px;
position:relative;
background:#000;
}
.tab:after{
content:'';
right:-40px;
top:0;
position:absolute;
width:0;
height:0;
border-width:20px;
border-color: transparent transparent #000 #000;
border-style:solid;
}
Check this http://jsfiddle.net/696Sb/
Y0u can also use css3 transform for this. Write like this:
.tab:after{
content:'';
right:-30px;
top:10px;
position:absolute;
width:60px;
height:60px;
background:#000;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Check this http://jsfiddle.net/696Sb/1/
Here are 2 tutorials to make diagonal/triangle in CSS:
How to Create Diagonal Lines with CSS
CSS triangle
Do you want to be able to write under the uppermost black horizontal line (on left, left of the diagonal)?
Hey now you can do this use after and before properties in css as like this
HTML
<div class="shape"></div>
Css
.shape{
background:#000;
margin:40px 20px;
height:100px;
width:700px;
position:relative;
}
.shape:after{
content:'';
position:absolute;
top:-20px;
right:0;
height:20px;
border-left:solid 30px #000;
border-right:transparent 30px solid;
border-top:transparent 20px solid;
}
.shape:before{
content:'';
position:absolute;
top:-20px;
left:0;
right:60px;
height:20px;
background:#000;
}
Live demo http://jsfiddle.net/uuxd8/
Updated
Live demo two http://jsfiddle.net/uuxd8/1/