I have created a rounded rectangle in html5. Here is the code-
<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div>
Now I want to change the background color on mouseover. Any help??
<div style="position:absolute; width:148px; height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;"> </div>
Change this code. Not a good practice to use inline style.
<div class="myDiv"> </div>
Create CSS class instead for inline styles.
.myDiv{position:absolute;width:148px;height:44px; left:90px; -webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px; border:2px solid #FFFFFF; background-color:#4D0C00; cursor:pointer; top: 98px;}
.myDiv:hover{background-color:#FF0000; /* put your color here */ }
Check this Demo
<div class="divClass"> </div>
.divClass:hover{ background: red; }
Related
I use the following HTML/CSS code to make a chat bubble:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: red;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
But the problem is in the last line of the CSS in which I am forced to repeat the background color, otherwise, the bubble will break. Please, check this out:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: transparent;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
I would like to not repeat the background color of the page since the snippet will be used in several places with different background colors. I've tried with transparent and inherit but none worked out.
This is how the second snipped looks like:
I've tested in Chrome and FF under Ubuntu.
What do you think?
In your case, since it is fundamental for the creation of the bubble to assign the same color of the background to the div I would suggest to use a variable, so when the color of the body changes even the color of the div::after will change:
add at the top of your css file:
:root {
--main-bg-color: red;
}
in your body element:
body {background-color: var(--main-bg-color);}
and div:
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-40px;
width:10px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: var(--main-bg-color);
}
This allows you to change it on root and making the change effective on both elements.
Please note that it will not work on IE though.
Here is what is happening:
CSS:
.speech-box {
height:76px;
width:220px;
padding:6px 10px;
background-image: linear-gradient(#4f4f4f,#000);
}
.speech-box:before {
content:'';
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right:5px solid #4f4f4f;
position:relative;
left:-15px;
top:-3px;
}
And my HTML:
<div class="speech-box">
<span class="speech"></span>
</div>
And here is a fiddle: http://jsfiddle.net/xqy4dLbc/
I'm guessing the problem is with my HTML?
You need to add
display:block;
or
display:inline-block;
to .speech-box:before :
DEMO
The default display property of pseudo-element is inline (see MDN) and you can't set height on inline elements. Therefore the height:0; you set doesn't apply.
I have used the following How to create a box when mouse over text in pure CSS?
and switch the position of the cursor and the placement
span{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 150px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
top: -10px;
left:60px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
top:40px;
right: 135px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
margin-left:-10px;
-moz-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
<p>Hover here<span>some text here ?</span></p>
Here is the [fiddle] (http://jsfiddle.net/beerbuddha/4kjnb4e5/)
I need a split 25%(header) with different background color and the rest (75%) to be a different color and to hold text and an image.
I tried the approach and what happens is that the display:none doesnt work anymore at all and the hover box it self break.
Im slightly lost.
Very simple. You change html:
<div class="div-hover">Hover here
<div class="div-tooltip">
<div class="tooltip-header">some text here ?</div>
<div class="tooltip-body">some text body some text body</div>
</div>
</div>
Full code is here
I'm trying to play around with div to get the item layout that I need, but I can't achieve what I'm looking for
.skills-container
{
height:50px; /* something like 50px */
padding:5px;
}
.skill-pic
{
width:48px;
height:48px;
}
.skill-content
{
}
.skill-content p
{
}
.progress
{
}
HTML :
<div class="skills-container">
<div class="skill-pic">
<img src="img/ps.png" alt="Klematis" width="48" height="48">
</div>
<div class="skill-content">
<p>Photoshop</p>
<div class="progress">
<div class="progress-bar progress-success">
</div>
</div>
</div>
</div>
You need to add float: left; to the .skill-pic css.
EDIT: Someone also pointed out this doesn't get exactly what you need. You'll also need to add a border attribute to the css of the elements like so:
border: solid black 1px; and replace the 1px with the size of the border you need... You'll have to play with it.
Try this as your CSS: it should work and you can tweak it as such... Working JSfiddle here:
.skills-container
{
display:inline-block;
border: solid black 4px;
}
.skill-pic
{
margin:2px;
float:left;
width:45px;
height:45px;
}
img
{
border: solid black 3px;
height:45px;
}
.skill-content
{
height:45px;
width:200px;
border: solid black 3px;
float:left;
margin:2px 2px 2px 5px;
}
.skill-content > div
{
margin:2px;
border: solid black 1px;
}
.progress
{
margin:2px;
border: solid black 1px;
}
Any idea how to do this using css ?
I'm looking for a good and clear way to do this.
HTML
<div class="line"></div>
<span>OR</span>
<div class="line"></div>
CSS
div.line
{
width:1px;
background-color:Gray;
height:40px;
margin:10px;
}
span
{
font-weight:bold;
}
Live Sample
HTML
<div class="orWrapper">Or</div>
CSS
.orWrapper {
text-transform: uppercase;
}
.orWrapper:before,
.orWrapper:after {
content: "";
display: block;
height: 50px;
margin-left: 10px;
border-left: 1px solid #000000;
}
DEMO
The easiest way to do it is just use three divs and border property:
your html:
<div class="vertical">
</div>
<div>
OR
</div>
<div class="vertical">
</div>
your css :
.vertical{
border-left:thin solid black;
height:30px;
margin-left:10px;
}
fiddle for testing: http://jsfiddle.net/SURzN/
working example: http://jsfiddle.net/fTGuV/
css:
.line
{
height:30px;
float:left;
margin-left:10px;
border: solid 0px #000000;
width:1px;
border-left-width: 2px;
}
html:
<div class="line">
</div>
<div style="clear:both;"></div>
<div>OR</div>
<div class="line">
</div>
<div style="clear:both;"></div>
HTML
<div class="line"><div class="txt">Or</div> <span></span></div>
CSS
span{height:100%; display:block; margin:0 15px; border-left:1px solid black}
.line{width:30px; margin:10px; position:relative; height:200px; text-align:center}
.txt{position:absolute; top:45%; left:4px; width:20px; height:25px; background:white}
DEMO
Easiest thing i did :-
<div Class="myclass"></div>
<div>OR</div>
<div Class="myclass"></div>
CSS
.myclass{
width:1px;
height:30px;
background-color:black;
margin-left:10px;
}
DEMO
I would keep it all in the same box...
HTML
<span class="vertical-bar">
<span>Or</span>
</span>
CSS
.vertical-bar {
background: url(http://dl.dropbox.com/u/2179487/black_pixel.png) center top repeat-y;
float: left;
padding: 100px 0;
}
.vertical-bar span {
background-color: white;
text-transform: uppercase;
}
Demo: http://jsfiddle.net/PjPAU/