How to create a circular spinning navigation bar - html

I am having problems creating a Navigation bar that can spin in a circle in CSS3 and HTML. How can I do this? Below is a picture of the idea from an old game. I want the same animation type that it uses. When it is on the active circle, the page is shown. As you move left and right, the page will change. Is there a way to accomplish this? How can I create this in CSS3 and HTML5.
I have added a code snippet of what I have done so far as a basic idea. I need two buttons that would allow the animation to move left or right instead of 1,2,3,4.
The idea comes from SliderDock. A dock for Windows and MacOS.
CSS3 should be able to accomplish this task if i'm not mistaken.
http://img05.deviantart.net/d13f/i/2011/139/7/4/altimit_mine_os_by_tenshi_no_chi-d3gowsq.png
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "Menu";
text-align: center;
font: 30px/120px Georgia, Times, serif;
color: #black;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #white;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Nav Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="menu">
1
2
3
4
<div class="circle">
<ul>
<li>Home</li>
<li>World</li>
<li>Games</li>
<li>AboutUs</li>
</ul>
</div>
</div>
</div>
</body>
</html>


you can do it with CSS3 also. To do this use animation rotate on hover of that numbers and rotate the menu image.
you can do it by using javascript with onmousehover and onmouseleave event.

Related

how to make an html list scrollable

I have this html list and it looks good. The problem with it that when the list becomes long then its missing a scroll for it and you cannot go down to see the rest of the list as its height becomes more than the page height! so I need to make it scrollable with y axes. html and css code is below
html
<section class="demo">
<dl class="list maki">
<dt>Errors</dt>
<dd> Name1 </dd>
<dd> Name2 </dd>
<dd> Name3 </dd>
<dd> Name4 </dd>
<dd> Name5 </dd>
<dd> Name6 </dd>
</dl>
</section>
CSS
body:before {
position: absolute;
content: '';
opacity: 0.8;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
a {
-webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-moz-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-ms-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-o-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
text-decoration: none;
}
.header {
text-align: center;
position: absolute;
z-index: 1;
color: #333;
width: 100%;
top: 5%;
}
.header h1 {
letter-spacing: -1px;
text-shadow: -2px -1px 1px #fff, 1px 2px 2px rgba(0, 0, 0, 0.2);
font-weight: 300;
font-size: 36px;
margin: 0;
}
.header h2 {
text-transform: uppercase;
text-shadow: -2px -1px 1px #fff, 1px 1px 1px rgba(0, 0, 0, 0.15);
font-weight: 300;
font-size: 12px;
color: rgba(0,0,0,0.7);
margin: 0;
}
.demo:after {
box-shadow: 0 1px 16px rgba(0,0,0,0.15);
position: absolute;
content: '';
height: 10px;
width: 100%;
top: 0;
}
/* List styles */
.list {
-webkit-transform-style: preserve-3d;
-moz-transform-stle: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
text-transform: uppercase;
position: absolute;
margin-left: -140px;
top: 20%;
}
.list a {
display: block;
color: #fff;
}
.list a:hover {
text-indent: 20px;
}
.list dt, .list dd {
text-indent: 10px;
line-height: 55px;
background: #E0FBAC;
margin: 0;
height: 55px;
width: 270px;
color: #fff;
}
.list dt {
/* Since we're hiding elements behind here, we need it in 3d */
-webkit-transform: translateZ(0.3px);
-moz-transform: translateZ(0.3px);
-ms-transform: translateZ(0.3px);
-o-transform: translateZ(0.3px);
transform: translateZ(0.3px);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 15px;
}
.list dd {
border-top: 1px dashed rgba(255,255,255,0.3);
line-height: 35px;
font-size: 11px;
height: 35px;
margin: 0;
}
/* UI */
.toggle {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 50px;
margin-left: -70px;
margin-top: -20px;
background: #2b2b2b;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
height: 50px;
bottom: 10%;
width: 140px;
color: #fff;
left: 50%;
}
.toggle:hover {
background: #E42692;
}
/* No CSS 3D support warning */
.warning {
-webkit-transform: translateZ(2px);
-moz-transform: translateZ(2px);
-ms-transform: translateZ(2px);
-o-transform: translateZ(2px);
transform: translateZ(2px);
background: rgba(255,255,255,0.6);
position: fixed;
display: none;
z-index: 999;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.warning .message {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
border-radius: 5px;
text-align: center;
margin-left: -150px;
margin-top: -60px;
line-height: 1.5;
background: #222;
font-size: 12px;
position: absolute;
padding: 10px;
width: 280px;
color: #fff;
left: 50%;
top: 50%;
}
.warning .message h1 {
font-weight: 300;
font-size: 14px;
}
.warning .message a {
text-decoration: none;
color: #73C8A9;
}
/* Individual styles */
.sashimi dt, .sashimi dd, .sashimi a { background: #73C8A9; }
.nigiri dt, .nigiri dd, .nigiri a { background: #DC143C; }
.maki dt, .maki dd, .maki a { background: #DC143C; }
.sashimi a:hover { background: #61c19e; }
.nigiri a:hover { background: #d31b46; }
.maki a:hover { background: linear-gradient(#072648, #053b75);}
.nigiri {
-webkit-transform: perspective(1200px) rotateY(40deg) !important;
-moz-transform: perspective(1200px) rotateY(40deg) !important;
-ms-transform: perspective(1200px) rotateY(40deg) !important;
-o-transform: perspective(1200px) rotateY(40deg) !important;
transform: perspective(1200px) rotateY(40deg) !important;
-webkit-transform-origin: 110% 25%;
-moz-transform-origin: 110% 25%;
-ms-transform-origin: 110% 25%;
-o-transform-origin: 110% 25%;
transform-origin: 110% 25%;
left: 20%;
}
.maki {
-webkit-transform: perspective(600px) translateZ(1px) !important;
-moz-transform: perspective(600px) translateZ(1px) !important;
-ms-transform: perspective(600px) translateZ(1px) !important;
-o-transform: perspective(600px) translateZ(1px) !important;
transform: perspective(600px) translateZ(1px) !important;
left: 50%;
}
.sashimi {
-webkit-transform: perspective(1200px) rotateY(-40deg) !important;
-moz-transform: perspective(1200px) rotateY(-40deg) !important;
-ms-transform: perspective(1200px) rotateY(-40deg) !important;
-o-transform: perspective(1200px) rotateY(-40deg) !important;
transform: perspective(1200px) rotateY(-40deg) !important;
-webkit-transform-origin: -10% 25%;
-moz-transform-origin: -10% 25%;
-ms-transform-origin: -10% 25%;
-o-transform-origin: -10% 25%;
transform-origin: -10% 25%;
left: 80%;
}

You should wrap the entire dd tag to one parent and they give try giving styling of overflow with some specified height.
body:before {
position: absolute;
content: '';
opacity: 0.8;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
a {
-webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-moz-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-ms-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
-o-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
text-decoration: none;
}
.header {
text-align: center;
position: absolute;
z-index: 1;
color: #333;
width: 100%;
top: 5%;
}
.header h1 {
letter-spacing: -1px;
text-shadow: -2px -1px 1px #fff, 1px 2px 2px rgba(0, 0, 0, 0.2);
font-weight: 300;
font-size: 36px;
margin: 0;
}
.header h2 {
text-transform: uppercase;
text-shadow: -2px -1px 1px #fff, 1px 1px 1px rgba(0, 0, 0, 0.15);
font-weight: 300;
font-size: 12px;
color: rgba(0,0,0,0.7);
margin: 0;
}
.demo:after {
box-shadow: 0 1px 16px rgba(0,0,0,0.15);
position: absolute;
content: '';
height: 10px;
width: 100%;
top: 0;
}
/* List styles */
.list {
-webkit-transform-style: preserve-3d;
-moz-transform-stle: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
text-transform: uppercase;
position: absolute;
margin-left: -140px;
top: 20%;
}
.list a {
display: block;
color: #fff;
}
.lists__error{
overflow-y:scroll;
height:200px;
}
.list a:hover {
text-indent: 20px;
}
.list dt, .list dd {
text-indent: 10px;
line-height: 55px;
background: #E0FBAC;
margin: 0;
height: 55px;
width: 270px;
color: #fff;
}
.list dt {
/* Since we're hiding elements behind here, we need it in 3d */
-webkit-transform: translateZ(0.3px);
-moz-transform: translateZ(0.3px);
-ms-transform: translateZ(0.3px);
-o-transform: translateZ(0.3px);
transform: translateZ(0.3px);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 15px;
}
.list dd {
border-top: 1px dashed rgba(255,255,255,0.3);
line-height: 35px;
font-size: 11px;
height: 35px;
margin: 0;
}
/* UI */
.toggle {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
-o-transform: translateZ(100px);
transform: translateZ(100px);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 50px;
margin-left: -70px;
margin-top: -20px;
background: #2b2b2b;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
height: 50px;
bottom: 10%;
width: 140px;
color: #fff;
left: 50%;
}
.toggle:hover {
background: #E42692;
}
/* No CSS 3D support warning */
.warning {
-webkit-transform: translateZ(2px);
-moz-transform: translateZ(2px);
-ms-transform: translateZ(2px);
-o-transform: translateZ(2px);
transform: translateZ(2px);
background: rgba(255,255,255,0.6);
position: fixed;
display: none;
z-index: 999;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.warning .message {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
border-radius: 5px;
text-align: center;
margin-left: -150px;
margin-top: -60px;
line-height: 1.5;
background: #222;
font-size: 12px;
position: absolute;
padding: 10px;
width: 280px;
color: #fff;
left: 50%;
top: 50%;
}
.warning .message h1 {
font-weight: 300;
font-size: 14px;
}
.warning .message a {
text-decoration: none;
color: #73C8A9;
}
/* Individual styles */
.sashimi dt, .sashimi dd, .sashimi a { background: #73C8A9; }
.nigiri dt, .nigiri dd, .nigiri a { background: #DC143C; }
.maki dt, .maki dd, .maki a { background: #DC143C; }
.sashimi a:hover { background: #61c19e; }
.nigiri a:hover { background: #d31b46; }
.maki a:hover { background: linear-gradient(#072648, #053b75);}
.nigiri {
-webkit-transform: perspective(1200px) rotateY(40deg) !important;
-moz-transform: perspective(1200px) rotateY(40deg) !important;
-ms-transform: perspective(1200px) rotateY(40deg) !important;
-o-transform: perspective(1200px) rotateY(40deg) !important;
transform: perspective(1200px) rotateY(40deg) !important;
-webkit-transform-origin: 110% 25%;
-moz-transform-origin: 110% 25%;
-ms-transform-origin: 110% 25%;
-o-transform-origin: 110% 25%;
transform-origin: 110% 25%;
left: 20%;
}
.maki {
-webkit-transform: perspective(600px) translateZ(1px) !important;
-moz-transform: perspective(600px) translateZ(1px) !important;
-ms-transform: perspective(600px) translateZ(1px) !important;
-o-transform: perspective(600px) translateZ(1px) !important;
transform: perspective(600px) translateZ(1px) !important;
left: 50%;
}
.sashimi {
-webkit-transform: perspective(1200px) rotateY(-40deg) !important;
-moz-transform: perspective(1200px) rotateY(-40deg) !important;
-ms-transform: perspective(1200px) rotateY(-40deg) !important;
-o-transform: perspective(1200px) rotateY(-40deg) !important;
transform: perspective(1200px) rotateY(-40deg) !important;
-webkit-transform-origin: -10% 25%;
-moz-transform-origin: -10% 25%;
-ms-transform-origin: -10% 25%;
-o-transform-origin: -10% 25%;
transform-origin: -10% 25%;
left: 80%;
}
<html>
<body>
<section class="demo">
<dl class="list maki">
<dt>Errors</dt>
<div class="lists__error">
<dd> Name1 </dd>
<dd> Name2 </dd>
<dd> Name3 </dd>
<dd> Name4 </dd>
<dd> Name5 </dd>
<dd> Name6 </dd>
<dd> Name7 </dd>
<dd> Name8 </dd>
<dd> Name9 </dd>
<dd> Name10 </dd>
</div>
</dl>
</section>
</body>
</html>

you can use overflow-y: scroll;
example code :
dl{
overflow-y: scroll;
}
by the way all your css codes there are not necessary for the question

Make parent class relative and make absolute class=list__maki, then use overflow-x:hidden; overflow-y:scroll;
Suggestion:Also you may add effects like hover to look lists items effective.
Thanks.

How to wrap iframe so it opens on click

I have an image which on hover displays the title of a video. I want to be able to click after hovering and have my iframe show up. I have been able to simply put the vimeo player in to pop up, but whenever I want to put the iframe in, it doesn't work. I understand I can't wrap it inside the tag but I don't know another solution. Right now if you input the code, on hover the iframe appears. I want for it to not appear on hover, but appear when I click. Any help would be appreciated.
CODE:
<style>
.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
</style>
<main>
<a class="align" href="test">
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>

Remove the source attribute of your IFrame and only set it onClick
Give your IFrame a unique identifier so you can find it with document.getElementById().
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
The IFrame should then have a source. You can set the source for example like this:
document.getElementById("myIframe").src = "https://yoursource.com"
Now add this code inside the onClick attribute to your element you want the user to click on.
onClick='document.getElementById("myIframe").src="https://yoursource.com"
So your full HTML could look like this:
<iframe id='myIframe' frameborder="0" scrolling="no" width="550" height="400">
<p onClick="document.getElementById("myIframe").src="https://yoursource.com"">Click here</p>

.hoverfollow {
position: fixed;
}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 30%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
text-decoration: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-family: "DIN";
font-size: 10px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slidedown {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hvrbox:hover .hvrbox-layer_slidedown,
.hvrbox.active .hvrbox-layer_slidedown {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_slideright {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.hvrbox:hover .hvrbox-layer_slideright,
.hvrbox.active .hvrbox-layer_slideright {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 0%;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hvrbox .hvrbox-layer_rotate {
border-radius: 50%;
-moz-transform: rotateZ(0);
-webkit-transform: rotateZ(0);
-ms-transform: rotateZ(0);
transform: rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_rotate,
.hvrbox.active .hvrbox-layer_rotate {
border-radius: 0%;
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.hvrbox .hvrbox-layer_scale-rotate {
border-radius: 50%;
-moz-transform: scale(0) rotateZ(0);
-webkit-transform: scale(0) rotateZ(0);
-ms-transform: scale(0) rotateZ(0);
transform: scale(0) rotateZ(0);
}
.hvrbox:hover .hvrbox-layer_scale-rotate,
.hvrbox.active .hvrbox-layer_scale-rotate {
border-radius: 0%;
-moz-transform: scale(1) rotateZ(360deg);
-webkit-transform: scale(1) rotateZ(360deg);
-ms-transform: scale(1) rotateZ(360deg);
transform: scale(1) rotateZ(360deg);
}
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
div {
font-family: "DIN", sans-serif !important;
margin: 0;
text-decoration: none;
}
header {
background: #009FDA none repeat scroll 0% 0%;
box-shadow: 0px 0px 4px rgba(84, 84, 84, 0.5);
padding: 5px 15px;
color: #fff;
text-align: center;
overflow: hidden;
}
header img {
height: 50px;
float: left;
}
header h1 {
text-transform: uppercase;
font-weight: 400;
font-size: 26px;
line-height: 48px;
}
.content h1,
.content h2,
.content h3 {
margin: 15px 0 0px 0;
}
.content {
max-width: 1200px;
margin: 50px auto 0 auto;
width: 100%;
}
pre {
background: #F2F2F2 none repeat scroll 0% 0%;
font-size: 15px;
padding: 10px;
border-radius: 3px;
margin: 10px 0;
white-space: pre-wrap;
-ms-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
footer {
background: #000;
color: #fff;
padding: 10px;
font-size: 13px;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
}
.align {
top: 5%;
left: 5%;
}
iframe {
width: 700px;
/* adjust to your needs */
max-width: 100%;
/* to make it responsive */
animation-name: fadeIn;
animation-duration: 4s;
}
#amaka {
width: 100%;
height: auto;
margin-top: 5%;
animation-name: fadeIn;
animation-duration: 4s;
}
#myIframe {}
<main>
<div class="hvrbox align">
<img id="amaka" src="http://www.noscht.com/wp-content/uploads/2020/07/amaka.png" alt="AMAKA" class="hvrbox-layer_bottom">
<a href="#">
<div onClick='document.getElementById("myIframe").src="https://player.vimeo.com/video/389137312"' class="hvrbox-layer_top"></div>
</a>
<div class="hvrbox-text">
AMAKA QUEENETTE - "SUFFOCATE"</div>
<iframe id="myIframe" onClick="https://player.vimeo.com/video/389137312" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</main>

How not to lose focus on an element even when I click somewhere else on my web page?

I'm trying to make a rotating menu for my web page, but when I rotate to the 2nd page (for example) and when I click somewhere else on the page, the menu returns to its initial position.
So my question is : how can I click on something else and not return to the first position ?
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu>.one:focus~.circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu>.two:focus~.circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu>.three:focus~.circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu>.four:focus~.circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>

I'm not sure that you can prevent the default behavior of :focus with pure CSS. Furthermore, I'm not sure that using :focus is the best way to accomplish what you're trying to accomplish.
If you are open to using jQuery, this is quite easy to accomplish. (This could also be accomplished pretty easily with pure JavaScript if you don't want to use jQuery. Let me know if that is the case and I will edit my answer.)
Add jQuery and a JavaScript file in <head>:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Rotating CSS Menu</title>
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src='foo.js'></script>
<!-- load css style -->
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="menu">
One
Two
Three
Four
<div class="circle">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Remove the /*HOVER STATES*/ section from your CSS:
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "CCAVV";
text-align: center;
font: 30px/135px Georgia, Times, serif;
color: #efefef;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
Following is foo.js referenced in the <head> of your HTML. Using jQuery you can accomplish the desired behavior without using :focus...
//wait for the document to load
$(function() {
//when the user clicks "one" in the menu
$('.menu>.one').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(0deg)',
'-moz-transform': 'rotate(0deg)',
'-ms-transform': 'rotate(0deg)',
'-o-transform': 'rotate(0deg)',
'transform': 'rotate(0deg)'
});
});
//when the user clicks "two" in the menu
$('.menu>.two').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-90deg)',
'-moz-transform': 'rotate(-90deg)',
'-ms-transform': 'rotate(-90deg)',
'-o-transform': 'rotate(-90deg)',
'transform': 'rotate(-90deg)'
});
});
//when the user clicks "three" in the menu
$('.menu>.three').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-180deg)',
'-moz-transform': 'rotate(-180deg)',
'-ms-transform': 'rotate(-180deg)',
'-o-transform': 'rotate(-180deg)',
'transform': 'rotate(-180deg)'
});
});
//when the user clicks "four" in the menu
$('.menu>.four').click(function() {
$('.circle').css({
'-webkit-transform': 'rotate(-270deg)',
'-moz-transform': 'rotate(-270deg)',
'-ms-transform': 'rotate(-270deg)',
'-o-transform': 'rotate(-270deg)',
'transform': 'rotate(-270deg)'
});
});
});

Text area not editable/Unable to type text in text area

I am new to web development.
I have a web application written in nodejs-html-css-js.
I have a text area, but I am unable to type or insert anything. It is embedded to a slide pop up. Here is the code.
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
In the above snippet, I am able to get the text area but I am not able to edit it.
However, if I insert a new CSS snippet, nothing is visible. Here is that snippet.
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
}
.cd-panel::after {
/* overlay layer */
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: transparent;*/
/*cursor: pointer;*/
/*-webkit-transition: background 0.3s 0.3s;*/
/*-moz-transition: background 0.3s 0.3s;*/
/*transition: background 0.3s 0.3s;*/
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
/*background: #00bdff;*/
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
The problem is, I will be needing both CSS snippets for reaching my goal.
Logic: I click a button, a slide pop up reveals with a text area. I want to type the text and the post gets saved in a calendar event.
However, I am not getting any results if I include the above attached code.
Any suggestions or solutions is greatly appreciated.

You can add position and z-index properties to the textarea to ensure they stack above .cd-panel-content
.cd-panel-container h1 {
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content: ' ';
width: 120px;
display: block;
border: 1.5px solid #00DED4;
border-radius: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before,
.cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-panel-textarea {
/* add this */
position: relative;
z-index: 100;
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div>
<!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div>
<!--cd-panel-textarea-->
</div>
<!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div>
<!-- cd-panel -->

Issue because you added .cd-panel-content with absolute position without z-index.. set z-index:- 1 for that
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
z-index: -1;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->

**you can make your text area editable by removing Width and height which you have set to 100% in cd-panel-content class **
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->

Not getting shadow for the div in CSS3

I was testing to create 3-d shadow like below
But I am not getting any shadow.Can anyone tell me why?Here is the home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="outer_div">
<div class="box effect2">
<h3>Effect 1</h3>
</div>
</div>
</body>
</html>
Here is the style.css code.
#outer_div{
background-color:#f7f7f7;
width:300px;
height:200px;
}
.box h3{
text-align:center;
position:absolute;
top:80px;
}
.box {
width:150px;
height:100px;
background-color: #f7f7f7;
margin-left:80px ;
padding:30px 0 0 0;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
Actually the problem arises when I set background to outer div.Otherwise it works fine.

you need to do some css changes
here is a fiddle
#outer_div{
background-color:#f7f7f7;
width:300px;
height:200px;
text-align: center;
}
.box h3{
text-align:center;
}
.box {
width:300px;
height:150px;
background-color: #f7f7f7;
padding:50px 0 0 0;
}
.effect2{
position: relative;
}
.effect2:before, .effect2:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}

As described over here: curved shadow disappears with background-color you can try to adjust the z-index of the container by adding
position:relative;
z-index:-2;
to #outer_div

Here's a simpler version using only 2 DOM elements (and my fiddle):
<div class="shadow-box">
<h1>effect 1</h1>
</div>
h1 {
position: relative;
padding-top: 100px;
top: -1ex;
text-transform: uppercase;
font-family: arial,helvetica,sans-serif;
font-weight: normal;
font-size: 20px;
}
.shadow-box {
width: 300px;
height: 200px;
margin: 25px auto;
position: relative;
background-color: #fff;
text-align: center;
}
.shadow-box:before, .shadow-box:after {
content: "";
display: block;
width: 280px;
height: 20px;
position: absolute;
left: 10px;
bottom: 13px;
z-index: -1;
-webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .5);
}
.shadow-box:before {
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.shadow-box:after {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}

I think you want something along these lines. Your outer_div is hiding the :before and :after content of the effect.
http://jsfiddle.net/9FBTx/2
<div id="outer_div">
<div class="box effect2">
<h3>Effect 1</h3>
</div>
</div>
#outer_div{
position: relative;
background-color:#f7f7f7;
width:300px;
height:200px;
}
#outer_div:before, #outer_div:after
{
position: absolute;
z-index: -1;
left: 5px;
top: 100%;
width: 40%;
height: 20px;
margin-top: -33px;
content: "";
background-color: transparent;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
#outer_div:after {
left: auto;
right: 5px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}