I'm trying to add a search box that has an outline animation, this oneI
form {
display:block;
left:50%;
position:absolute;
top:30%;
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
margin-left:-15vw;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
In specific and what this does is create a form where as the input produces a 2000px massive outline throughout the body - my question is: Is it possible to have a wrapping div around this form and have some sort of command to stop the propagation of the outline? In order to have the outline only manifest itself inside of the containing div and not to the whole page.
If the solution is not available in CSS, I'm open to JS ones, aswell.
Thanks in advance!
I've inserted input into a div, which has overflow: hidden css property, which stops outline from showing.
Here is working codepen
SASS
$shadow: #fc0;
html {
background-color:#ccc;
}
#outlineBorder {
width: 800px;
height: 200px;
display:flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
form {
input[type=search] {
border:solid 3px #fff;
box-sizing:border-box;
font-size:2em;
height:2em;
outline:solid #fc0 0;
padding:.5em;
transition:all 2s ease-in;
width:30vw;
z-index:1;
&:focus {
border:solid 3px #09f;
outline:solid #fc0 2000px;
}
}
}
HTML
<form>
<div id="outlineBorder">
<input type="search" placeholder="Search...">
</div>
</form>
Related
I currently have a div that when hovered shows another div in it's place, the div shown in it's place has a box-shadow of 1 px on all sides, I am trying to cover the top shadow line so that the shadow is only shown on the left, right and bottom.
Edit: I would like the shadow to remain on all 4 sides but to be covered by a div on the top. Not the vertical axis changed. I'm wondering if this is possible.
http://jsfiddle.net/8yeh9cw6/
Is this possible to cover or will it always bring the shadow to the top of anything? Ideally with pure css, otherwise is it possible with jquery or javascript?
Hello Try the code below i have added some jQuery
$(".hoveredItem").mouseover(function(){
$(this).css({
"box-shadow":"0px 6px 10px rgba(0,0,0,0.9)"
});
});
.shoptitle {overflow:hidden; background-color:#FFF; padding:15px;}
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px; margin-bottom:1px; }
.I33{width:33.2%; }
.hoveredItem{opacity:0;transition:opacity 0s 0.2s ;position:relative; background-color:#FFF; width:100%; height:200px; /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */}
.itemDisplay{ opacity:1;transition:opacity 0s 0.2s;position:relative;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
a simplistic solution you can nudge shadow on y-axis
.shoptitle {
overflow: hidden;
background-color: #FFF;
padding: 15px;
}
.parentItem {
height: 200px;
background-color: #e7e7e7;
float: left;
margin-left: 1px;
margin-bottom: 1px;
}
.I33 {
width: 33.2%;
}
.hoveredItem {
opacity: 0;
transition: opacity 0s 0.2s;
position: relative;
background-color: #FFF;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.9);
width: 100%;
height: 200px;
/* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: relative;
}
.parentItem:hover .hoveredItem {
opacity: 1;
}
.parentItem:hover .itemDisplay {
opacity: 0;
}
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
more correct solution.. refer
CSS box-shadow on three sides of a div?
Live site- http://uposonghar.com/new-video/
There is a Embeded YouTube video, if you mouse over on that video(center of the video) Facebook + Twitter share button appears on the left, like this-
But that is only working when anyone mouse over center part of embedded YouTube video box, not in whole part. I want to style it like when anyone when mouse over the video box(no matter where) share button appears, share button will be alignment center vertically i any video box height.
My code-
HTML-
<div id="video-container">
<iframe src="//www.youtube.com/embed/-Jkd9GDSyPc" width="600" height="400" allowfullscreen="" frameborder="0"></iframe>
<ul class="share-video-overlay" id="share-video-overlay">
<li class="facebook" id="facebook">Facebook</li>
<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D-Jkd9GDSyPc">Tweet</a</li>
</ul>
</div>
CSS-
#share-video-overlay {
position: relative;
top: -225px;
list-style-type: none;
display: block;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .4s, top .25s;
-moz-transition: opacity .4s, top .25s;
-o-transition: opacity .4s, top .25s;
transition: opacity .4s, top .25s;
z-index: 500;
}
#share-video-overlay:hover {
opacity:1;
filter:alpha(opacity=100);
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
I rewrote your CSS, perhaps this is what you need?
#video-container {
display: block;
position: relative;
width: 600px; //set the video container to the same width/height as the embedded video
height: 400px;
}
#video-container:after {
clear: both;
}
#share-video-overlay {
display: none;
position: absolute; //absolute positioning to force the element over the iframe
lef: 0;
top: 225px;
}
#video-container:hover #share-video-overlay {
display: block; //clear the float. See http://www.positioniseverything.net/easyclearing.html
}
.share-video-overlay li {
margin: 5px 0px 5px 0px;
}
#facebook {
color: #ffffff;
background-color: #3e5ea1;
width: 70px;
padding: 5px;
}
.facebook a:link, .facebook a:active, .facebook a:visited {
color:#fff;
text-decoration:none;
}
#twitter {
background-color:#00a6d4;
width: 70px;
padding: 5px;
}
.twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover {
color:#FFF;
text-decoration:none;
}
In a nutshell: set the container to match the width/height of the youtube video, then position the overlay using absolute positioning. Because it is inside the video container, it will position itself inside the limits of the container.
And: set the hover on the video container, and not the overlay. As said, the overlay is inside the container, so you can easily make the overlay visible on a hover on the container. (#video-container:hover #share-video-overlay { })
I have put the example in a Fiddle so you can test if this is what you need.
Its because of the height of the share-video-overlay class. Increase height of this class you will get the result. Change the css of share-video-overlay like this
top:-435px;
padding-top:215px;
Set this css as you want and give height to share-video-overlay class height:500px; .
I am sure it will work.
I am trying to center multiple elements, img and button types, in a div that is fixed to the top of the screen. I have tried all the tricks I could find on the internet but none have worked. I want it to work no matter what the windows' size is.
<div id='FixedMenu'>
<button class='MenuItem'>Home</button>
<button class='MenuItem'>About</button>
<img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
<button class='MenuItem'>Tools</button>
<button class='MenuItem'>Events</button>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>
http://jsfiddle.net/clarinetking/2PGZS/37/
if you add a fake flex/justify-content you can have something close to what you are looking for :
http://jsfiddle.net/2PGZS/45/
#Main {
vertical-align:middle;
height:50px;
width:80px;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
content:'';
display:inline-block;
width:100%;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
height:40px;
width:80px;
vertical-align:middle;
}
#Start {
margin-top:100px;
}
#CloseMenu {
width:70px;
height:70px;
transition: all 1s;
vertical-align:middle;
}
#CloseMenu.opacite {
opacity:0.1;
}
alternative with uparrow always on top right http://jsfiddle.net/2PGZS/46/
Add text-align:center; to your FixedMenu css
http://jsfiddle.net/2aUbv/
There is no need in js here. Pure css.
#Main {
position:relative;
height:50px;
width:80px;
display: inline-block;
}
#FixedMenu {
position:fixed;
margin:0 auto;
top:0%;
left:0%;
background:#444444;
width:100%;
height:70px;
transition: all 1s;
text-align:center;
}
#FixedMenu.active {
background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
display: inline-block;
height:40px;
width:80px;
float:top;
}
#Start {
margin-top:100px;
}
#CloseMenu {
position:fixed;
width:80px;
height:80px;
transition: all 1s;
}
#CloseMenu.opacite {
opacity:0.1;
}
#FixedMenu * {
}
I am trying to recreate something like the effect that is happening on the left, with the logo fade in on the scroll of the page. Seen here http://www.vogue.co.uk/ when you scroll up.
I have this, but it's really incorrect i think... SORRY GUYS, EDITED TO ADD HTML AND CSS
var divs = $('.logo-tiny');
$(window).scroll(function(){
if($(window).scrollTop() <10 ){
divs.stop(true,true).fadeOut("fast");
} else {
divs.stop(true,true).fadeIn("fast");
}
});
<div id="header">
<div id="logo"></div><div class="header-tiny"><div class="logo-tiny"></div>
<div class="header-navi"><a class="header-link">link1</a> |<a class="header- link"> link2</a> |<a class="header-link"> link10</a></div></div>
</div>
CSS
#header {
background-color: white;
width: 100%;
height: 150px;
min-height:50px;
margin:0 0 0 40px ;
z-index: 1000;
/*position: fixed;*/
}
#logo {
background:url(RUNWAYMAGAZINE_LOGO-BK-hdr.png) no-repeat center;
width: 100%;
height: 105px;
margin:10px;
}
.header-tiny {
background-color: #fff;
border-bottom: 1px solid #ccc;
height: 25px;
width:100%;
padding-top:10px;
}
.logo-tiny {
background-color: #000;
height:25px;
width:50px;
}
css
no scroll
visibility:hidden;
and top
visibility:visible;
animate
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.2s;
Check this out:
var divs = $('.logo-tiny');
$(window).scroll(function(){
if($(window).scrollTop() <10 ){
divs.fadeOut("fast");
console.log('a');
} else {
divs.fadeIn("fast");
console.log('b');
}
});
working demo: [http://fiddle.jshell.net/D5M9H/]
so I'm no CSS wizard or Nivo slider master.. I got this working on a page of mine that had nothing with it to begin with.. but when I try to get it working with my prostores page the images come up but the sliding then moves up and left and does it for every slide. I assume there must be some CSS that I need to change.. or something.. but since I dont know much about CSS I dont know what to change.. I just left the default settings in here..
here is where I was testing
http://www.securemycargo.com/servlet/the-template/testnivo/Page
any pointers are appreciated
ok here is the default CSS`
.theme-default .nivoSlider {
position:relative;
background:#fff url(loading.gif) no-repeat 50% 50%;
margin-bottom:10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
}
.theme-default .nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
color:#fff;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}`
and I took out the table entry.. does the same thing..I assume I need one of these
CSS entries to be modified ?
UPDATE: Layout issues aside, I think this is your primary problem:
GET http://www.securemycargo.com/.../nivo-slider.css 404 (Not Found)
CSS is a critical part of such a utility. Without it, overflow isn't controlled and images aren't sized properly. I've placed the file at http://dq3f8u841c3z3.cloudfront.net/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css in your page via dev tools and it solves your issue.
At least part of the problem is that you're using tables for layout, and the table isn't wide enough. The images aren't shown on load, so the browser makes it too narrow. At a minimum, set the width of the table to 100% to let it use the entire main column:
<table width="100%">
<tr>...
Note that the width attribute is deprecated. If you're using tables for layout, though, you probably don't much care. If you happen to care, use CSS instead:
<table class="main-col">
<tr>...
<style>
.main-col {width: 100%;}
</style>
Better: remove that table altogether. Tables are for data, and this one has just one cell in it anyway.