I got it myself and wanted to leave this for later people having the same question. So no need to waste your precious time answering this question.
OK, so I have a fixed bottom menu bar. It has a popup menu and it's currently not hidden at any point because it is not necessary yet. This bar is fixed in the bottom of the page and it has a popup box. The problem is that I can't get the popup placed above the actual button.
Here's my code:
HTML
<div id="quickBar">
<div id="menuCont">
<div id="quickBarMenu">
<p>Navigation</p>
<ul>
<li><p>Articles</p></li>
<li><p>Blog</p></li>
<li><p>Software</p></li>
<li><p>Featured</p></li>
</ul>
</div>
</div>
</div>
CSS
#quickBar{
width: 100%;
height: 50px;
position: fixed;
display: absolute;
z-index: 200;
bottom: 0;
background-color: grey;
background-image: -webkit-linear-gradient(bottom,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
background-image: -o-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
background-image: -moz-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
background-image: linear-gradient(to top, rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%, rgba(59,70,71,0.2) 55%);
opacity: 0.95;
display: none;
}
#quickBar > #menuCont{
width: 960px;
height: 50px;
margin: auto;
color: white;
}
#menuCont > div{
float: left;
}
#quickBarMenu{
width: 183px;
}
#quickBarMenu p{
width: 183px;
height: 20px;
padding: 15px 0;
text-align: center;
transition: background 0.2s linear 0s, color 0.2s linear 0s;
-moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
-webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;
}
#quickBarMenu > ul{
/*display: none;*/
list-style: none;
}
I hope someone could help me with this.
OK, I got it myself by using a negative margin of margin-top with the value -200px (4 x 50px).
Related
I have a div with class .side-buttons. This div will slide in and off when user's mouse hover over the div. I was wondering how can I hide the div completely and say when the user's mouse is in the area it would slide in?
I tried getting the off the screen but that wouldn't work as it would only work when my mouse on the div
This is my website - http://smati.ca/test/index.html (Don't click continue but instead click around the popup modal to get off the modal overlay. There you can see the div in action)
Here's my css code :
.side-buttons {
position: absolute;
right: -100px;
top: 55%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.side-buttons:hover {
right: 0px;
}
.side-buttons a {
display: block;
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
border-radius: 0;
box-shadow: none;
border: none;
color: #f5f5f5;
font-size: 22px;
font-family: "Lato", sans-serif;
}
.side-buttons a small {
font-size: 16px;
}
.side-buttons a:hover,
.side-buttons a:focus,
.side-buttons a:active {
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
color: #f5f5f5;
}
.side-buttons a:nth-child(2) {
background: linear-gradient(to left, #de3c88 15%, #f0a473 100%);
}
You could try something like this too i.e wrapping it by a div and performing that slide-in and slide-out effect on child div as below,
#bx{
width:210px;
height:120px;
position:absolute;
top:40%;
right:0;
overflow:hidden;
border:1px solid rgba(0,0,0,0.1);
}
#bx > .b{
position:absolute;
width:200px;
height:120px;
background:blue;
right:-200px;
transition:0.6s ease;
}
#bx:hover > .b{
right:0px;
}
<div id="bx">
<div class="b">
</div>
</div>
You can use a pseudo element, like this
html, body {
margin: 0;
}
div {
position: absolute;
width: 0;
right: 0;
height: 150px;
background: red;
transition: width 0.5s;
}
div::after {
content: '';
position: absolute;
width: 30px;
right: 100%;
height: 100%;
transition: width 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
div:hover {
width: 100px;
transition: width 0.5s;
}
div:hover::after {
width: 0;
transition: width 0.5s;
}
<div>
</div>
Here is another option, that might be easier to add to your existing solution
html, body {
margin: 0;
}
.content {
width: 170px;
padding: 50px 30px;
background: lightgray;
}
.wrapper {
position: absolute;
right: 0;
width: 0;
padding-left: 30px;
overflow: hidden;
transition: width 0.5s, padding-left 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
.wrapper:hover {
width: 200px;
padding-left: 0;
transition: width 0.5s, padding-left 0.5s;
}
<div class="wrapper">
<div class="content">
Some text and/or images<br>
or anything else needed
</div>
</div>
I have a bouncing down-arrow and want to hide it when I reach the footer after scrolling down, and show it again when I scroll back to the top. How can I do that without any JavaScript?
.bounce {
position: fixed;
left: 95%;
bottom: 0;
margin-top: -25px;
margin-left: -25px;
height: 50px;
width: 50px;
background: #65C178;
background-size: contain;
opacity: 0.8;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
-webkit-animation: bounce 1s infinite;
-webkit-overflow-scrolling: touch -webkit-transition: all 500ms ease-in-out;
-moz-transition: all 750ms ease-in-out;
-ms-transition: all 750ms ease-in-out;
-o-transition: all 750ms ease-in-out;
transition: all 750ms ease-in-out;
overflow: hidden
}
#-webkit-keyframes bounce {
0% {
bottom: 5px;
}
25%, 75% {
bottom: 15px;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
<div class="bounce"></div>
as far as i know there is no css-only solution. you'll need javascript to determine the scroll position. The only CSSonly way i could think of, is to put the footer in front of the arrow (with z-index). so it gets hidden behind it.
Here's the page upon which I'm working.
I'm using Shortcodes Ultimate to get the columns, and it's responsive. Now I'm trying to get a text hover with background over the images, preferably without JS for now. I can get it to hover perfectly if it's given defined height and width, but then that's not responsive.
On CodePen, it shows the title going all the way across the page, but the Shortcodes Ultimate columns eliminate that. But it probably isn't best design, either.
I've followed about 20 different tutorials to get where I am, but am stuck now.
CodePen
HTML:
<div id="portfolio_hover_wrapper">
<a href="#" class="wistia-popover">
<img src="https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360" alt="" class="hover" />
<span class="portfolio-hover-text"><span>ADO Rowing</span>
</a>
</div>
CSS:
#portfolio_hover_wrapper {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#portfolio_hover_wrapper a {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: table;
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#portfolio_hover_wrapper a:hover span.portfolio-hover-text {
opacity: 1;
}
span.portfolio-hover-text span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
If I understand what you want try using top: 50%; transform: translateY(-50%); in .portfolio-hover-text.
My bad I misunderstood your question, try adding the following:
span.portfolio-hover-text {
background: rgba(27,187,230,0.8);
color: white;
display: block;
font-size: 3em;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.portfolio-hover-text span{
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
white-space: nowrap;
}
In order to overlay text over an image I like to set the parent DIV to have the image as a background and child the text to it like such
<div class="box image1">
<div class="overlay fade">
<span class="text">ADO Rowing</span>
</div>
</div>
CSS
.box {
width: 75%; /*To make it responsive*/
height: 40em;/*Height should be fixed*/
box-shadow: inset 0px 2px 7px 0 rgba(0, 0, 0, .6);/*just for looks*/
margin: 5% auto 0 auto; /*Centers the div*/
border-radius: 5px; /*just for looks*/
overflow: hidden; /*Needed if our text overflows*/
}
.image1 {
background: url(https://embed-ssl.wistia.com/deliveries/b9d3c0914d895ac2fb274c0c8798ad66f6e5d4f0.jpg?image_crop_resized=640x360);/*Image*/
background-size: cover;/*Makes the background look responsive*/
background-position:center;/*for looks*/
}
Now we need to style the overlay. More CSS
.overlay {
background: rgba(33, 150, 243, .6);/*Overlay color*/
text-align: center;
padding: 1em 0 1em 0;/*adjust this if you want it cover the entire img*/
height:25%;/*Change this to 100% for whole image*/
opacity: 0;
margin: 25% 0 0 0;/*Moves the banner down*/
box-shadow: 0 2px 7px rgba(33, 150, 243, .4);
}
.text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
}
Padding will increase the div size and thus increase the color size, while margin will just space the div out without changing the size of the background, so I use margin to position and padding for sizing.
lastly we need to make some snappy animation on :hover
.fade {
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
-ms-transition: opacity .25s ease;
transition: opacity .25s ease;
}
.box:hover .fade {
opacity:1;
}
That will change the opacity from 0 to 1 on hover with a .25s tranisition. That should be about it, hope that helps. View the CodePen Here
I'm coding my menus, this time using CSS for the animations and js to change the classes from showing, to hidden and semi hidden. (I haven't started on the js yet)
Some problems I'm not figuring how to fix (getting really stressed).
Why the top margin isn't 0?
Why is there some padding/margin/wtv on the left and top side between the divs?
How can I center the links vertically? (I think I need to keep using 100% and position fixed and overflow hidden because I need to move the divs out of the screen)
html,
body {
background: #E6E6E6;
}
.menu {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
-webkit-transition: all ease .65s;
-moz-transition: all ease .65s;
-ms-transition: all ease .65s;
-o-transition: all ease .65s;
transition: all ease .65s;
}
.left {
right: 0;
margin-right: 0;
}
.left.bar {
right: 100%;
margin-right: -60px;
}
.left.hidden {
right: 100%;
margin-right: 0;
}
.menu > .links {
color: white;
font-family: sans-serif;
font-size: 2.5em;
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
.menu li {
color: rgba(255, 255, 255, .75);
cursor: pointer;
list-style: none;
padding: 15px;
margin: 5px;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-ms-transition: all ease 1s;
-o-transition: all ease 1s;
transition: all ease 1s;
}
.menu li:hover {
color: rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, .1);
}
.m1 {
background: orange;
z-index: 8;
}
<div class="menu left m1">
<div class="links l1">
<ul>
<li data-open=".m2">Architecture</li>
<li data-open=".m3">Coding</li>
<li data-open=".m4">Thesis</li>
</ul>
</div>
</div>
To remove space to the left and top, you must override default styling of your ul:
ul{
padding: 0;
margin: 0;
}
and to center vertically, i'd do it like this:
.links ul{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.links{
height: 100%;
}
Check it out here: JSFiddle
By default the <UL> comes with padding which is why you are seeing the spacing on the left side of your links. If you set
.links ul {margin:0; padding:0;}
the extra space will be removed. As a suggestion I recommend setting all elements padding and margins to default to 0 to help deal with these types of issues.
* {
padding:0;
margin:0;
}
For vertical aligned text if you have text that is all on the same line you cant set the line-height to be the same height as its container which will vertically align the text elements.
I was trying to implement splitting of entire content to create a slideshow. Something similar to this.
http://tympanus.net/Tutorials/FullscreenSlitSlider/
The problem is splitting of divisions equally. I just don't want them to appear to be split but actually split with the first div containing all content but only top 50% height of actual content, and second div containing all content but having only bottom 50% height of original div.
Here's what I have so far.
.container {
position: absolute;
width: 100%;
height: 20%;
}
.slide1, .slide2 {
width: 100px;
height: 50%;
/*height: 100%;*/
overflow: hidden;
position: absolute;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Here's a fiddle link.
UPDATE: This is what I want the end result to look like. This is just a quick hack that appears as though second div is split.
If you just viewed source in the demo site you supplied, you might have seen this bit of code:
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
And if you googled jquery slitslider, the first link you get is FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3
Do you looking for this..
.container {
position: absolute;
width: 100%;
height: 100%;
}
.slide1, .slide2 {
width: 100px;
height: 100px;
overflow: hidden;
color: #AAA;
}
.slide1 {
background: #F00;
}
.slide2 {
top: 50%;
background: #0F0;
}
Fiddle: http://jsfiddle.net/6Kz7c/3/
EDIT:
Fiddle: http://jsfiddle.net/6Kz7c/5/
This uses a jquery plugin call FULLSCREEN SLIT SLIDER
So You no need to implement it from the sketch.
Here you can find a tutorial how to use that and download the library.
http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
Edit:
css
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
.reveal {
width: 300px;
height: 300px;
margin: 50px;
float: left;
}
.curve {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 150px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -225px, #f6d9ad;
background-repeat: no-repeat;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.curve:hover {
background: url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px 210px, url(http://designshack.net/tutorialexamples/splitreveal/300.jpg) 0px -285px, #f6d9ad;
background-repeat: no-repeat;
}
.reveal p {
font: 45px/300px Helvetica, Arial, sans-serif;
text-align: center;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.reveal:hover p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
cursor: pointer;
}
html
<div class="reveal curve">
<p>lorem</p>
</div>
Fiddle is here
The same principle as that of vertical splitting can be used for horizontal as well. The HTML layout had to be modified a bit to get it working.
HTML
<div class="container">
<div class="slide-wrapper">
<div class="slide1">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
<div class="slide2">
<div class="slide-content">Some content that has fixed width and positioned absolutely.</div>
</div>
</div>
</div>
Here's a working fiddle.
http://jsfiddle.net/6Kz7c/8/