How does one create the triangle thing for a container that points to something? Is it photoshop?
It can be done in pure CSS, but an image would be the more sane option.
HTML:
<div id="bubble">
Yes we can
<div id="arrow"></div>
<div id="arrow-border"></div>
</div>
CSS:
#bubble {
border:2px solid #036;
font-size:20px;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width:100px;
position:relative;
}
#arrow {
border-color: #036 transparent transparent transparent;
border-style:solid;
border-width:20px;
height:0px;
width:0px;
position:absolute;
bottom:-40px;
left:20px;
}
#arrow-border {
border-color: #fff transparent transparent transparent;
border-style:solid;
border-width:20px;
height:0px;
width:0px;
position:absolute;
bottom:-37px;
left:20px;
}
If you look here:
http://flowplayer.org/tools/demos/tooltip/index.html
The image that makes the tooltip thingy you're looking at is found here:
http://flowplayer.org/tools/img/tooltip/black_arrow.png
For a CANVAS (non-image) version, see jQuery's BeautyTips:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
CANVAS is like drawing to the screen. Don't ask me for an example, since I've never used it and I'm not real sure how it works. :P Note, browser support may be an issue with CANVAS.
Related
I am working on CSS border properties, I have done with border-radius,border,border-width,border-color,border-collapse,border-image,etc. I want my border at the left side of my page as shown in the pic click here for the image to be shown. Can anyone teach me with this. Thank you
You can use pseudo elements to get the border same, you can play with properties to know about how it works.
Below i posted an example
.box {
width:150px;
height:150px;
border-radius:50%;
background:green;
position:relative;
}
.box:before {
content:'';
position:absolute;
top:10%;
transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
left:14px;
width:0;
height:0;
display:block;
border-top:10px solid green;
border-bottom:10px solid transparent;
border-right:10px solid transparent;
border-left:10px solid transparent;
}
<div class="box"></div>
I need to create this ribbon and stars look (image attached) without an image file. I know how to put the stars in it, but am needing the ribbon sides like the image is attached. How can I do this without an image file, and just pure CSS and HTML? Am thinking that the border-radius will need to be manipulated here.
This is what I have so far, which is terrible.
How can I use border-radius to get this effect?
I would recommend combining CSS triangles with pseudo elements :before and :after for the side triangles of the ribbon, and html character ★ for the stars:
working jsFiddle
HTML:
<h1>★ KRISTINE COADY ★</h1> <!-- ★ is html star character -->
CSS:
h1{ /* all regular attributes here */
background:#A52927;
display:inline-block;
padding:0px 30px;
color:#EEE4D3;
position:relative;
height:40px;
line-height:40px;
}
h1:before{ /* this will create white triangle on the left side */
position:absolute;
content:"";
top:0px;
left:0px;
height:0px;
width:0px;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
}
h1:after{ /* this will create white triangle on the right side */
position:absolute;
content:"";
top:0px;
left:auto;
right:0px;
height:0px;
width:0px;
border-top: 20px solid transparent;
border-right: 20px solid white;
border-bottom: 20px solid transparent;
}
This way you will not have to use wrappers or border-radius.. You should ofcourse alter the font, font size, height, (etc.) to your needs..
My CSS code looks like this so far:
.tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}
.tooltip:hover:after{
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#000;
content:attr(title);
display:block;
left:50%;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98
}
.tooltip:hover:before{
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:75%;
position:absolute;
z-index:99
}
My HTML code looks like this:
<p style="color:black;">Link<p>
For some reason, nothing is appearing. Does it have to do with the color of my text or how the CSS code is structured?
http://jsfiddle.net/NYmTL/
This fiddle seems to look fine with your code. I changed color: #000 to #FFF. Black on black isn't very visible.
How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?
You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.
HTML
<div class="frame"><img src="../img/logo.png"></div>
CSS
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}
Example Usage
Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background - Requested by OP
Inset borders - Replicating https://stackoverflow.com/a/10904061/526741
Variable length content
you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/
<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
css
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
Here are my fiddle's on the topic
OPTION 1)
You can use Pseudo Classes to accomplish this
Html
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
CSS
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
OPTION 2)
You can use some basic (one dimensional) goodness
CSS
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
HTML
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
OPTION 3)
you can use an Outline
CSS
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
HTML
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />
I am trying to make the css curve box with gradient and shadow as well as.
so how i can make with pure css and it should be only in one div not much code.
For reference see the attached image:-
you just make is border-radius as like this
Css
div {
width:200px;
margin:auto;
margin-top:20px;
height:200px;
background:red;
border-radius:25px;
box-shadow: inset 0 0 15px rgba(68,68,68,0.8);;
position:relative;
}
div:beforae {
content:"";
position:absolute;
border-left:15px solid blue;
border-right:15px solid green;
height:200px;
border-radius:15px 0 0 15px;
}
HTML
<div></div>
and now check to live demo http://jsfiddle.net/rohitazad/Vsvg2/74/