How do i center a main DIV, within which contains another div that has an inline-block.
<div class="newdiv>
<div class="pinterest-hover social-slide"></div>
<div class="instagram-hover social-slide"></div>
<div class="reddit-hover social-slide"></div>
<div class="rss-hover social-slide"></div>
</div>
CSS:
.stumbleupon-hover {
background-image: url('icons/stumbleupon-hover.png');
}
.social-slide {
height: 48px;
width: 48px;
border:3px solid;
/*margin: 10px;*/
display:inline-block;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -48px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
/*box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8);*/
}
div.newdiv {
margin: 0 auto 0 auto;
}
Basically I want to center the social icons via newdiv
JSFiddle: http://jsfiddle.net/uWaPy/
Use :
div.new-div {
text-align:center;
}
You had a missing " in the div.new-div.
See updated fiddle.
IE < 8 doesn't like inline-block, there's a hack :
.social-slide {
display:inline-block;
*display:inline;
*zoom:1;
}
.newdiv
{
margin-left: auto;
margin-right: auto;
width:900px;
}
add text-align:center; to div.newdiv
Also you are missing a " in your html.
<div class="newdiv>
should be:
<div class="newdiv">
div.newdiv {
margin: 0 auto;
text-align: center;
width: 1000px;
}
just edit this code. And in your div tag, it should be <div class="newdiv">
Related
I'm using a border image to separate menu items in my nav sidebar. The image appears at the top of all the items but I also want it to appear at the last item's bottom. I tried using last-child and used center bottom but then it disappears from the top of the last element and appears at the bottom instead. Please check this image - i.ibb.co/hBS62fN/Screenshot-1.jpg. And here's my code:
I just want the border-image to appear top and bottom in all four of the items of my navbar.
This is what I've tried so far. This code removes the border from the top of contact and places it at the bottom.
.main-nav {
width: 100%;
height: 200px;
}
.nav-content {
width: 100%;
height: 100%;
}
.main-nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.main-nav ul li {
width: 100%;
height: 45px;
background-image: url(../images/borderimage.png);
background-repeat: no-repeat;
background-position: center top;
margin: 0;
padding: 0;
}
.main-nav ul li a {
font-weight: normal;
font-size: 15px;
color: #AA9776;
text-decoration: none;
/* background-image: url(../images/menucizgi.png);
background-repeat: no-repeat;
background-position: center top;*/
float: left;
height: 23px;
width: 157px;
text-align: left;
text-shadow: 2px 2px 10px #000;
padding: 8px 0 10px 45px;
margin: 2px 0;
}
.main-nav ul li a.active {
color: #AA9776;
/*background-image: url(../images/menuover.jpg);
background-repeat: no-repeat;
background-position: center top;*/
background: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: 1s ease;
}
.main-nav ul li a:hover {
color: #AA9776;
/*background-image: url(../images/menuover.jpg);
background-repeat: no-repeat;
background-position: center top;*/
background: rgba(0, 0, 0, 0.7);
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: 1s ease;
}
.main-nav ul li:last-child {
background-image: url(../images/borderimage.png);
background-repeat: no-repeat;
background-position: center bottom;
}
<div class="main-nav">
<div class="nav-content">
<ul>
<li>About</li>
<li>Leather</li>
<li>Leather Goods</li>
<li>Contact</li>
</ul>
</div>
</div>
Two options that might work:
Try modifying last child to:
.main-nav ul li:last-child {
background: url(../images/borderimage.png) center bottom no-repeat,
url(../images/borderimage.png) center top no-repeat,
}
or add this to your existing css:
.main-nav ul li:last-child:before {
background-image: url(../images/borderimage.png);
background-repeat: no-repeat;
background-position: center top;
}
Not positive it will work without testing it out in a demo.
I am building a portfolio website and I want a mockup on top of a background but when I hover over the mockup I cannot interact with the background. I want them to both scale, but the mockup should scale more than the background, therefore I need a :hover on both of them separately.
I tried fiddling around with the z-index but it did not work out. Here is what it looks like now: https://imgur.com/NPrHdAI
Here is my HTML and CSS:
.try {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 80px 0px 60px 10px;
}
.bg {
height: 250px;
margin: 10px;
border-radius: 3px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
transition: all .3s ease-in-out;
}
.mockup {
position: absolute;
height: 300px;
transition: all .3s ease-in-out;
}
.mockup:hover {
transform: scale(1.2);
}
<div class="try">
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
</div>
I want both elements to be scaling separately, but the mockup blocks the background from scaling on hover.
You could use a wrapper div that triggers the hover, and assign different effects to mockup and bg like this:
.wrapper:hover .mockup {
transform: scale(1.2);
}
.wrapper:hover .bg {
transform: scale(5.0);
}
Full snippet: (You can see they both resize different)
.try {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 80px 0px 60px 10px;
}
.bg {
height: 250px;
margin: 10px;
border-radius: 3px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
transition: all .3s ease-in-out;
}
.mockup {
position: absolute;
height: 300px;
transition: all .3s ease-in-out;
}
.wrapper:hover .mockup {
transform: scale(1.2);
}
.wrapper:hover .bg {
transform: scale(5.0);
}
<div class="wrapper">
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
My toggle button is working if it run in separate webpage where only toggle button included.
But its not working when i put up the same code in form page where many css are included.
/* Checkbox body */
#tog {
display: block;
width: 50px;
height: 28px;
margin: 0px auto;
border-radius: 100px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
background-color: #E6E9EC;
}
#toggly {
display: none;
}
/* The toggle */
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#tog:hover> .i {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
transform: scale(1.01);
}
#toggly:checked+ #tog > .i {
margin-left: 24px;
}
#tog :active {
background-color: #A6B9CB;
}
#tog :active> .i {
width: 34px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.20);
}
#toggly:checked+ #tog :active> .i {
margin-left: 18px;
}
#toggly:checked+ #tog {
background-color: #008FFF;
}
<html>
<head>
<title></title>
</head>
<body>
<!-- The Toggle -->
<input type="checkbox" id="toggly" >
<label for="toggly" id="tog"><div class="i"></div></label>
</body>
</html>
The above code is working but if put in form page where many css included its not working.
Can anyone help me out?
Every thing looks fine except for this code below:
.i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
cause it might have been overridden so give it a parent id to make it more specific as below:
#tog .i {
height: 24px;
width: 24px;
background: #ffffff;
display: inline-block;
border-radius: 100px;
margin-top: 2px;
margin-left: 2px;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
pointer-events: none;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
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>
i am trying to create a moon with light glow. same as in images.
i have tried but not much successful.
I don't wants to use image in website. i wants to create only this with CSS3.
My circle is creating very small and also glow is in small area . i want glow in large radius area
http://jsfiddle.net/naresh_kumar/ezUfG/6/
Html
<div>
<span>Glow</span>
</div>
Css
div {
margin: 20px 10px 10px;
text-align: center;
font-family: sans-serif;
}
span {
display: inline-block;
padding-top: 40px;
background: whiteSmoke;
width: 100px;
height: 60px;
text-align: center;
vertical-align: middle;
-webkit-box-shadow: 0 0 10px #F8A50E;
-moz-box-shadow: 0 0 10px #F8A50E;
box-shadow: 0 0 10px #F8A50E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: box-shadow .4s ease;
-moz-transition: box-shadow .4s ease;
-ms-transition: box-shadow .4s ease;
-o-transition: box-shadow .4s ease;
transition: box-shadow .4s ease;
}
span:hover {
-webkit-box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
box-shadow: 0 0 0 10px red;
}
use box-shadow :)
This example uses two comma separated shadows:
box-shadow:0 0 50px gold,0 0 150px gold;
http://codepen.io/gcyrillus/pen/qdcos
You could draw it with radial-gradient too.
Result will varie from browser to browser.
I believe this is what you want:
span:hover {
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow: 0px 0px 10px red;
box-shadow: 0px 0px 10px red;
}
Demo: http://jsfiddle.net/ezUfG/10/
Instead of this style for your box-shadow:
box-shadow: 0 0 0 10px red;
Try this:
box-shadow: 0 0 10px red;
Edit: If you want the glow to be bigger, just increase the radius:
box-shadow: 0 0 30px red;
jsFiddle here