im new to css and i don't have any idea how to make button get smaller smoothly when user unhovered the button , i have successfully make the button get bigger smoothly but it turn into normal size in instant time , this is my code :
<html>
<head>
<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
transition-duration:0.5s;
}
.menutext {
color:white;
}
</style>
</head>
<body>
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>
</body>
</html>
I am sorry if this already asked somewhere but i cannot find it at search engine such as google .
Is there any way to make something like .menubutton:unhover ?
Add transition to menubutton also, the transition property gets applied to the hover state, therefore your animation takes 0.5 second when changing to that specific state. Adding it to the regular state will also apply it when changing back from a special state
body {
background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position: relative;
text-align: center;
border : 5px solid rgba(255,255,255,0.9);
background-color: rgba(0, 199, 255, 0.7);
font-size: 100%;
color: white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position: relative;
margin-top: 3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size: 200%;
margin-left: 1%;
text-align: center;
background-color: rgba(0,157,255,0.5);
display: inline-block;
color: white;
border: 3px solid white;
padding: 1% 1% 1% 1%;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.menubutton:hover {
background-color: rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.menutext {
color: white;
}
<div class="title">
<h1 > English Lesson </h1>
</div>
<div class="firstcontainer">
<div class="menubar"></div>
<a href="#" class="menutext">
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
</a> <a href="#" clas="menutext">
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</a>
</div>
Your transition property needs to be on the default .menubutton class. This means that when you hover the button it will transition to the new style and then back to the default again when you stop hovering.
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition-duration:0.5s;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
}
The reason that your animation doesn't work when you stop hovering is that the transition property is no longer applied to the element, as it only exists on hover.
Add to class
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
}
You need to use scale() effect and apply transition-duraion for both unhovered and hovered button
Look at snippet:
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition-duration: 0.5s;
}
.menubutton:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
.menutext {
color:white;
}
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>
<html>
<head>
<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition: padding 0.1s;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
}
.menutext {
color:white;
}
</style>
</head>
<body>
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>
</body>
</html>
Just remove transition-duration from hover element and add a transition: padding 0.1s to the button class. The animation does not look so smooth due to small padding change.
Try to use - in cases where it's possible - transform property. It handles the animations very smoothly.
In your case, I suggest you to use transform: scale() instead, animation works fine and it looks even better than before.
By the way, if you want to apply a value, e.g. 5px to padding or margin, you don't have to write it separately for all directions, just use simply:
margin: 5px or padding: 5px. It will affect top, bottom, left and right directions together.
body {
background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position: relative;
text-align: center;
border: 5px solid rgba(255, 255, 255, 0.9);
background-color: rgba(0, 199, 255, 0.7);
font-size: 100%;
color: white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position: relative;
margin-top: 3%;
}
.menubutton {
box-shadow: 5px 5px 2px #888888;
font-size: 200%;
text-align: center;
background-color: rgba(0, 157, 255, 0.5);
display: inline-block;
color: white;
border: 3px solid white;
padding: 4px;
margin: 4px;
transition: all .5s ease;
}
.menubutton:hover {
background-color: rgba(0, 199, 255, 0.5);
transform: scale(1.1);
transition: all .5s ease;
}
.menutext {
color: white;
}
<div class="title">
<h1> English Lesson </h1>
</div>
<div class="firstcontainer">
<div class="menubar"></div>
<a href="#" class="menutext">
<div class="menubutton"><strong><i><u>Home</u></i></strong>
</div>
</a>
<a href="#" clas="menutext">
<div class="menubutton"><strong><i><u>Contacts</u></i></strong>
</div>
</a>
</div>
Fiddle: https://jsfiddle.net/pj489c50/
HTML:
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
How can I modify my CSS, so
The box shadow goes all the way to the end at the top
Move the arrow to the bottom and to add a gray arrow left of the blue arrow.
This should get you close. As a tip, I would separate your :before and :after selector properties so its more clear which rules are being applied to each.
html{
height:100%;
}
body{
height:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20px;
background: #FFF;
}
[class^="folded-corner-"]{
color: #444;
position:relative;
width:350px;
background:#E4E4E4;
margin-bottom:10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
[class^="folded-corner-"],
[class^="folded-corner-"]:before{
min-height:100px;
right: 20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[class^="folded-corner-"]:before,
[class^="folded-corner-"]:after{
position:absolute;
content:"";
display:block;
position:absolute;
bottom:0;
margin-right: 20px;
width:0px;
height:0px;
box-sizing: border-box;
border-style:solid;
}
[class^="folded-corner-"] p{
padding:20px;
color:#444;
font-size:12px;
}
.folded-corner-topright:before{
border-width:0px 0px 20px 20px;
border-color:transparent transparent #d7d7d7 transparent;
right: 0px;
}
.folded-corner-topright:after{
right:-20px;
border-width:20px 20px 0px 0px;
border-color:#0099E7 #fff transparent transparent;
box-shadow:3px 3px 2px 2px #FFF;
}
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
I'm working on a new design for my website to see what I like (touch and feel).
My top navigation bar is great so far, except for this issue.
When you hover over the links with just text, everything is fine.
Top-padding is added to make it look like the navigation tabs "move"/"grow".
However, when I hover over a navigation link with one of my images (Paypal, Twitter, YouTube) in it, the top-padding is applied, but it affects the position of the main parent element. This is in the latest version of Chrome and Firefox for Windows 7.
BODY is not the affected parent, but #main (as defined in my CSS) "moves"/"grows" as well.
The URL is http://rickyyoder.x10.mx/new/ and here is the code:
#main{
width:94%;
max-width:880px;
margin:12px auto;
background:#fff;
box-shadow:1px 1px 4px #000;
border-radius:4px;
padding:2px 2px 8px 2px;
}
#nav{
position:relative;
top:-0.8em;
background:#fff;
border-radius:4px;
padding:2px;
display:inline-block;
}
#nav a{
color:#000;
display:inline-block;
padding:1px 1em 1px 1em;
border-radius:0 0 4px 4px;
box-shadow:0px 2px 2px -2px #fff inset, 0px -4px 16px -6px #aaa inset;
-webkit-transition:background 0.5s, padding-top 0.25s;
-moz-transition:background 0.5s, padding-top 0.25s;
vertical-align:top;
}
#nav a:hover{
padding-top:4px;
background:#eee;
}
#nav a:hover img{
-webkit-transition:-webkit-filter 1.5s;
}
#nav a:hover img{
-webkit-filter:hue-rotate(360deg);
}
Is there any way I can avoid this, but still have a "moving"/"growing" effect on these links as well as the textual links?
Thanks in advance.
You can solve the problem adding height to the nav
#nav {
position: relative;
top: -0.8em;
background: #fff;
border-radius: 4px;
padding: 2px;
display: inline-block;
height: 50px;
}
So I have an image inside a div that is centered in an outer-wrapper. I have a horizontal menu at the top of the wrapper that displays 5 sub divs inline. I have added css for a drop down menu that appears when you hover over the first of the 5 inline sub divs. When the drop down menu appears, it causes the image to shift to the right and I can't for the life of me figure out how to correct it. As you can see I have played around with z-index but i'm not sure if I understand what is happening or not happening with z-index and how it is used correctly.
HTML:
<div class="wrapper">
<div id="topmenu">
<div id="home">Home
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div id="logo">
<img src="image.jpeg" />
</div>
</div>
CSS
.wrapper{
position:relative;
width:960px;
height:905px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
/*text-align:left;
border:2px solid red;*/
background-color:#FFFFFF;
}
#topmenu{
position:relative;
border-bottom:2px solid #164207;
height:30px;
background-color:#ffffff;
z-index:3;
}
#logo{
position:relative;
border-bottom:2px solid #164207;
}
#logo img{
position:relative;
height:350px;
width:500px;
z-index:1;
}
#home{
display:inline-block;
float:left;
margin-top:5px;
margin-left:15px;
width:169px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:inline-block;}
.sub-menu {
overflow:hidden;
display: none;
width: 169px;
background-color: #164207;
color:#FFFFFF;
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.sub-menu li {
position:relative;
list-style-type: none;
display: block;
border-bottom: 1px solid #FFFFFF /*#eaeaea*/;
font-family:serif;
font-size: 12px;
height: 15px;
padding: 8px 0;
}
You need to add position: absolute; to .sub-menu to create a stacking context.
jsFiddle
#home{
display:block;
float:left;
margin-top:5px;
width:184px;
color:#164207;
font-family:serif;
font-weight:bold;
font-size:20px;
text-align:center;
border-right:2px solid #164207;
}
#home:hover .sub-menu {display:block;}
#course:hover .sub-menu{display:block;}
#leagues:hover .sub-menu{display:block;}
#events:hover .sub-menu{display:block;}
#about:hover .sub-menu{display:block;}
.sub-menu {
overflow:hidden;
display: none;
width: 182px;
background-color: #164207;
color:#FFFFFF;
/*padding: 10px 10px;
margin-left: 0px;*/
margin-top: 5px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
position:absolute; /**************************** Important Bit*/
top:24px;
}
To re-adjust alignment- Remove margin-left:15px; from #home, #course, #leagues, #events, and #about and adjust widths on all of them. Then adjust the width of .sub-menu. See updated jsFiddle above for details and working model.
Example with navigation set up in <ul> unordered list </ul>. - Don't Need all the id's and resulting redundant CSS.
I have a site with strange layout (by my client) and I have developed it fine.
The problem is Chrome (version 22) doesn't work, but in Firefox (version 16) and IE 9 it works.
The problem is in the colRight, there are two divs that don't respect the radius, the content overflows and goes over the colCenter.
How can I fix that?
JSFIDDLE
FIREFOX:
CHROME
HTML:
<div class="colCenter" id="two"></div>
<div class="colRight" id="three">
<div class="first_menu"></div>
<div class="dati_societari"></div>
</div>
CSS:
.colCenter{
position:absolute;
top:0;
left:18%;
height: 100%;
width: 72%;
background: #ccc;
border-left: 0px solid #333;
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
/*border-radius: 0.2px 0px 0px 0.2px;*/
z-index:100;
overflow:hidden !important;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
}
.colRight{
position:absolute;
top:0;
right:0;
background:#fff;
height:100%;
width:18%;
z-index:1000;
border-left: 0px solid #333;
/*border-radius: 70px 0px 0px 70px / 250px 0px 0px 250px;*/
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
overflow:hidden !important;
}
.first_menu{
height:10%;
width:100%;
background:#714d8f;
position:absolute;
top:0;
left:0;
z-index:2;
}
.dati_societari{
height:8%;
width:100%;
background:#9a9a9a;
position:absolute;
bottom:50px;
left:0;
z-index:2;
text-align:center;
}
.social{
position:absolute;
width:100%;
bottom:5%;
left:20%;
}
.img_social{
opacity:0.7;
transition-property: opacity; /*standard*/
transition-duration: 0.4s;
-webkit-transition-property: opacity; /*Safari e Chrome */
-webkit-transition-duration: 0.4s;
-o-transition-property: opacity; /*Opera*/
-o-transition-duration: 0.4s;
-moz-transition-property: opacity; /*Firefox*/
-moz-transition-duration: 0.4s;
}
This appears to be a Webkit bug...
CSS Border radius not trimming image on Webkit
Bug Reports...
https://bugs.webkit.org/show_bug.cgi?id=30475
http://code.google.com/p/chromium/issues/detail?id=82417