Hello can anyone help me i have this buttons and i want to make the transition off each one of them when i put my mouse over each one but seems to work only for the first button even that each button have a different class. seems that :hover dont work for all.
CSS code:
.first{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type{
border-radius:100%;
border: none;
height: 100%;
width:100%;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1{
border-radius:15%;
border:none;
height: 100%;
width:100%;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type2{
border:none;
height: 100%;
width:100%;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
.first:hover #type{
transition:2s;
left:0;
};
.second:hover #type1{
transition:2s;
left:0;
};
.last:hover #type2{
transition:2s;
left:0;
};
HTML code:
<html>
<head>
<title>buttons</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body bgcolor="#F6CED8">
<!-- <div clas="gen"> -->
<div class="first">
<button type="submit" id="type">Click Here!</button>
</div>
<div class="second">
<button type="submit" id="type1">Click Here!</button>
</div>
<div class="last">
<button type="submit" id="type2">Click Here!</button>
</div>
<!-- </div> -->
</body>
</html>
http://jsfiddle.net/4L3ec/
I changed the width and height to 100px instead of % , b.c I couldn't even see the buttons without that. But the fiddle I posted works great now.
.first {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
.second {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
.last {
width: 100px;
height: 100px;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
width: 100px;
height: 100px;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
width: 100px;
height: 100px;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
#type2 {
border:none;
width: 100px;
height: 100px;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
.body {
width: 100%;
height: 100%;
}
Here jsfiddle answer for that.
.first{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last{
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
width: 100px;
height: 100px;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
width: 100px;
height: 100px;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
#type2 {
border:none;
width: 100px;
height: 100px;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
transition:2s;
left: -4em;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
Your CSS is not valid. Remove the extra ; after the } and it will work
.first {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.second {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
.last {
width:10%;
height: 20%;
position: relative;
border:2px solid black;
}
#type {
border-radius:100%;
border: none;
height: 100%;
width:100%;
background-color: #2EFEF7;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type1 {
border-radius:15%;
border:none;
height: 100%;
width:100%;
background-color: #01A9DB;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
#type2 {
border:none;
height: 100%;
width:100%;
background-color: #0404B4;
color:#FFFFFF;
position: absolute;
left: -4em;
transition:2s;
}
.first:hover #type {
transition:2s;
left:0;
}
.second:hover #type1 {
transition:2s;
left:0;
}
.last:hover #type2 {
transition:2s;
left:0;
}
Fiddle
Related
I want to do rounded circle like below image
But I am in trouble in making inner rounded one ! I tried with border-top-style & border-right-style but not getting the same yet .
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:none;
border-right-style:none;
width:80px;
height:80px;
position:absolute;
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center; }
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
border-top-style:inset;
border-right-style:inset;
border-top-color: transparent;
width:80px;
height:80px;
position:absolute;
transform: rotate(40deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
Try This:
.circle {
border-radius:50%;
width:100px;
height:100px;
background:#A2D36E;
text-align:center;
}
.bar {
top:15px;
left:15px;
border-radius:50%;
border:1px solid white;
border-width:3px;
width:80px;
height:80px;
position:absolute;
}
.bar:after {
width: 25px;
height: 10px;
content: '';
position: absolute;
top: -3px;
background: #A2D36E;
transform: rotate(20deg);
}
span {
top:30%;
transform:translateY(-30%);
position:relative;
font-size:1.6rem;
color:#fff;
font-weight:bold;
}
<div class='circle'>
<div class='bar'> </div>
<span>8.8</span>
</div>
The CodePen link demonstrates an SVG solution: https://codepen.io/UncaughtTypeError/pen/WXRObq
The Code Snippet below demonstrates x2 solutions you could explore:
Border Shape solution
Clip Path solution
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
background: #A2D36E;
text-align: center;
position: relative;
}
.bar {
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
border: 1px solid white;
border-width: 3px;
margin: auto;
width: 80px;
height: 80px;
position: absolute;
}
span {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 35px;
position: absolute;
font-size: 1.6rem;
color: #fff;
font-weight: bold;
}
/* Additional */
.clip-path-solution .bar:after {
content: "";
width: 90px;
height: 90px;
position: absolute;
bottom: 0;
top: -3px;
left: -3px;
right: 0;
background: #a2d36e;
border-radius: 100%;
-webkit-clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
clip-path: polygon(48% 48%, 100% 0%, 100% 0%, 50% 0%);
transform: rotate(10deg);
}
.border-solution .shape {
transform: rotate(-30deg);
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
box-sizing: border-box;
/* starting point */
/*border-right: 10px solid #d36e6e;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 90px;
height: 90px;
border-radius: 100%;*/
/* adjusted accordingly for demonstration */
margin: 0;
width: 50px;
height: 50px;
top: 10px;
margin: 0;
right: 10px;
left: auto;
border-top-right-radius: 45px;
border-bottom-right-radius: 30px;
border-right: 10px solid #a2d36e;
}
<h3>Clip Path</h3>
<div class='clip-path-solution circle'>
<div class='bar'></div>
<span>8.8</span>
</div>
<h3>Border Shape</h3>
<div class='border-solution circle'>
<div class='bar'></div>
<div class='shape'></div>
<span>8.8</span>
</div>
I need to make template as it shown on picture below:
I succed with top square but failed with alligning the bottom one - can't move it to the bottom left corner.
The code is:
<style>
.red_top {
background-color:red;
position:absolute;
width:65px;
height:65px;
z-index:-1;
}
.red_bottom {
align:right;
verical-align:bottom;
background-color:red;
position:relative;
width:65px;
height:65px;
z-index:-1;
top:-35px;}
.main_cont
{
border:1px solid blue;
margin-top:25px;
margin-left:25px;
min-height:100px;
z-index:1;
background-color:#FFF;
}
</style>
<body style="margin: 60px 50px;">
<div style="width:100%; border:1px solid #000;">
<div class="red_top"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </div>
</div>
https://codepen.io/anon/pen/OxavGL
What I need to do for red_bottom div proper placing?
.red_top {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
}
.red_bottom {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
bottom: 0;
right: 0;
}
.main_cont {
border: 1px solid blue;
margin: 25px;
min-height: 100px;
z-index: 1;
background-color: #FFF;
}
<div style="width: 100%; border: 1px solid #aaa; position: relative;">
<div class="red_top"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </div>
</div>
body {
margin: 60px 50px;
}
.Wrap {
position: relative;
width: 100%;
}
.main_cont {
position: relative;
background-color: #FFF;
border: 1px solid blue;
margin-top: 25px;
margin-left: 25px;
min-height: 100px;
}
.main_cont::before,
.main_cont::after {
content: "";
position: absolute;
background-color: red;
width: 65px;
height: 65px;
z-index: -1;
}
.main_cont::before {
top: -33px;
left: -33px;
}
.main_cont::after {
bottom: -33px;
right: -33px;
}
<div class="Wrap">
<div class="main_cont">Content Here</div>
</div>
Try This:
body {
margin: 5%;
}
.Wrap {
position: relative;
width: 100%;
}
.main_cont {
position: relative;
background-color: #FFF;
border: 1px solid blue;
min-height: 100px;
text-align: center;
}
.main_cont::before,
.main_cont::after {
content: "";
position: absolute;
background-color: red;
width: 50px;
height: 50px;
z-index: -1;
}
.main_cont::before {
top: -25%;
left: -3%;
}
.main_cont::after {
bottom: -25%;
right: -3%;
}
<div class="Wrap">
<div class="main_cont">Content Here</div>
</div>
CSS:
.main_cont::before {
content: '';
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
top: 0;
left: 0;
}
.main_cont::after {
content: '';
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
bottom: 0;
right: 0;
}
.main_cont {
border: 1px solid blue;
margin: 25px;
min-height: 100px;
z-index: 1;
background-color: #FFF;
}
HTML:
<div style="width: 100%; border: 1px solid #000; position: relative;">
<div class="main_cont">Content Here</div>
</div>
Here you go:
.mainDiv {
position: relative;
width: 500px;
height: 700px;
border: 1px solid black;
background-color: white;
}
.red_top {
background-color:red;
position:absolute;
left: -31px;
top: -31px;
width:65px;
height:65px;
z-index:-1;
}
.red_bottom {
background-color:red;
position:absolute;
bottom: -31px;
right: -31px;
width:65px;
height:65px;
z-index:-1;
.main_cont {
border:1px solid blue;
margin-top:25px;
margin-left:25px;
min-height:100px;
z-index:1;
background-color:#FFF;
}
<body style="margin: 60px 50px;">
<div class="mainDiv">
<div class="red_top"></div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"></div>
</div>
You can use the following solution without using additional <div> elements for the red boxes. This solution is using :before and :after to create the red boxes.
div.container {
border:1px solid #000;
position:relative;
width:100%;
}
div.main {
background:#fff;
border:1px solid blue;
margin:33px;
min-height:100px;
position:relative;
width:auto;
}
.red-box:before, .red-box:after {
background:red;
content:"";
height:65px;
position:absolute;
width:65px;
z-index:-1;
}
.red-box:before {
left:0;
top:0;
transform:translate(-50%, -50%);
}
.red-box:after {
bottom:0;
right:0;
transform:translate(50%, 50%);
}
<div class="container">
<div class="main red-box">Content Here</div>
</div>
The below code does not work, perhaps because I am using class and id in the same div. I know they are supposed to work.
Reference: Can I use DIV class and ID together in CSS?
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
#pb1-1 {
position: absolute;
margin: 0px;
background-color: green;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
#pb1-2 {
position: absolute;
margin: 0px;
background-color: yellow;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 68px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
#pb1-3 {
position: absolute;
margin: 0px;
background-color: red;
width: 65px;
height: 98.5px;
top: 0px;
right: 0px;
bottom: 0px;
left: 136px;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div id="pb1-1" class="pu">1 </div>
<div id="pb1-2" class="pu">2 </div>
<div id="pb1-3" class="pu">3 </div>
</div>
Can someone tell me what I am doing wrong?
You need to overwrite your :hover CSS rules using !important, because id's are always given more preference than classes. Like:
.pu:hover {
font-size:24px !important;
background-color:#999999 !important;
}
Have a look at the updated snippet below:
.PB {
position:relative;
margin:0 auto;
background-color:#000;
width:201px;
height:422px;
z-index: 1;
}
#pb1-1 {position:absolute; margin:0px; background-color:green; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:0px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-2 {position:absolute; margin:0px; background-color:yellow; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:68px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-3 {position:absolute; margin:0px; background-color:red; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:136px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
.pu:hover {
font-size:24px!important;
background-color:#999999!important;
}
<div class="PB">
<div id="pb1-1" class="pu">1 </div>
<div id="pb1-2" class="pu">2 </div>
<div id="pb1-3" class="pu">3 </div>
</div>
Hope this helps!
This is because style of your ID's are overriding class styles (including with hover effect).
More information about cascading order can be found here: https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In your example, I would avoid using !important, and use only classes to define styles:
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
.pu {
position: absolute;
margin: 0;
width: 65px;
height: 98.5px;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pb1-1 { background-color: green; left: 0; }
.pb1-2 { background-color: yellow; left: 68px; }
.pb1-3 { background-color: red; left: 136px; }
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div class="pu pb1-1">1 </div>
<div class="pu pb1-2">2 </div>
<div class="pu pb1-3">3 </div>
</div>
You can try this with pseudo classes
.PB {
position: relative;
margin: 0 auto;
background-color: #000;
width: 201px;
height: 422px;
z-index: 1;
}
.pu {
position: absolute;
margin: 0;
width: 65px;
height: 98.5px;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: right;
font-size: 14px;
-webkit-text-stroke: 1px white;
}
.pu:nth-child(1) { background-color: green; left: 0; }
.pu:nth-child(2) { background-color: yellow; left: 68px; }
.pu:nth-child(3) { background-color: red; left: 136px; }
.pu:hover {
font-size: 24px;
background-color: #999999;
}
<div class="PB">
<div class="pu">1 </div>
<div class="pu">2 </div>
<div class="pu">3 </div>
</div>
Click here!
Add <style type="text/css"> attribute. That's your problem. It will work.
I want to make this shape :
there supposed to be 3 div shapes like this. I built already some shape, but I want to see how this shape will fit in my website
I already built this :
codepan
css example for what i did :
.mainOuterDiv{
height:300px;
overflow:hidden;
background:#FFF;
}
.middDiv{
width:70%;
height:75px;
background-color: #0CF;
margin:0px auto;
position:relative;
margin-top:50%;
}
.innerLeft{
position: absolute;
left: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,215deg);
background-color: #0CF;
}
.innerRight{
position: absolute;
right: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,145deg);
background-color: #0CF;
}
.textDiv{
z-index:9999;
width:100%;
height:100%;
position:absolute;
background-color: #0CF;
}
is there a way to make this in css ?
Here is the responsive version with skewY i have used :pseudo elements
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.content {
background: white;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
}
.shadow {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: 18%;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: -1;
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
bottom: -28%;
border: 1px solid black;
}
.shadow:before {
left: -30%;
transform: skewY(-23deg);
}
.shadow:after {
right: -30%;
transform: skewY(23deg);
}
.ribbon {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: -1px;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: 1;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
top: -28%;
border: 1px solid black;
}
.ribbon:before {
left: -30%;
transform: skewY(23deg);
}
.ribbon:after {
right: -30%;
transform: skewY(-23deg);
}
hr {
margin: 20px;
0
}
<div class="container">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
<hr>
<div class="container" style="width:200px; height:200px;">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
There is some example :
.container
{
position:relative;
width:400px; height:302px;
overflow:hidden;
}
.mainDiv
{
height:300px; width:300px;
background-color:white;
border:solid 1px black;
position:absolute;
left:0;right:0;margin:auto;
}
.middDiv
{
height:55px; width:70%;
background-color:lightblue;
position:absolute;
bottom:0;left:0;right:0;
margin:auto;
z-index:10;
}
.leftDiv, .rightDiv
{
position:absolute;
bottom:26px;
width:30%;height:48px;
background-color:blue;
z-index:10;
}
.leftDiv
{
left:-13%;
transform:rotate(30deg) skew(30deg);
}
.rightDiv
{
right:-13%;
transform:rotate(-30deg) skew(-30deg);
}
.leftBDiv, .rightBDiv
{
position:absolute;
width:13%; height:47px;
bottom:59px;
background-color:black;
z-index:9;
}
.leftBDiv
{
left:-12%;
transform:rotate(-30deg) skew(-30deg);
}
.rightBDiv
{
right:-12%;
transform:rotate(30deg) skew(30deg);
}
<div class="container">
<div class="mainDiv">
<div class="middDiv"></div>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="leftBDiv"></div>
<div class="rightBDiv"></div>
</div>
</div>
I use different colors for middle, left and right blocks so You can see it.
If You will use border for those divs, You have to change positions: left, right and bottom for all of them.
There is fiddle example, too.
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.