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.
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>
For the following facebook like button, there is a # of likes bubble (?) on the right of the button (see below - the bubble with the text of '3.5k' on it)
The question is - was it drawn using css? How to create it?
Fiddle Link : http://jsfiddle.net/zEVbe/1/
Yes, that bubble can be drawn by CSS in various way. One of the way is written below.
HTML :
<div class="like">Like</div>
<div class="counter">3.5k</div>
CSS :
body{
font-family:Calibri;
}
.like{
background:#3b5998;
padding:0px 10px;
border-radius:2px;
color:#fff;
cursor:pointer;
float:left;
height:25px;
line-height:25px;
}
.like:hover{
background:#444;
}
.counter{
background:#fafafa;
border:1px solid #aaa;
float:left;
padding:0px 8px;
border-radius:2px;
margin-left:8px;
height: 23px;
line-height:23px;
}
.counter:before{
display:block;
float:left;
content:' ';
width:6px;
height:6px;
background:#fafafa;
margin-left:-12px;
border-right:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin-top:8px;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
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 want to show a search icon over the start of the a text input box.
Currently my code looks like this:
<div id="search-icon"></div>
<input type="text" name="search" id="search"/>
And my CSS:
#search-icon {
display:inline-block;
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
}
input#search {
position:relative;
top:-25px;
left:-30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;
}
It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.
How do I swop it?
You can solve it using relative position for both. But just change their z-index.
#search-icon {
background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}
input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}
is this what you are looking for here
Are you talking about having search-icon being on top of input#search?
Such as this: http://jsfiddle.net/52YfE/?
I dont know what you want exactly but check it out this one http://jsfiddle.net/V8AZE/
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/