So I'm working on a site (beta.kylehorkley.com). The weirdest thing is happening. I'm working on a sidebar type thing (it appears once the window is small enough). However, when I hover over the links in the side bar, the side bar disappears and then reappears about a second later. This is happening in Chrome and Opera (Firefox and Edge work as expected).
Sidebar HTML:
<div id="sidebar" class="sidebar">
home
contact
portfolio
about
</div>
Sidebar CSS:
.sidebar {
background-color: rgba(255, 255, 255, 0.95);
height: calc(100% - 91px);
overflow-x: hidden;
position: fixed;
top: 91px; left: 0;
width: 100%;
z-index: 999;
}
Sidebar link CSS:
.sidelink {
border-bottom: 3px solid;
border-bottom-color: transparent;
color: rgb(50, 125, 150);
display: block;
font-family: "Varela Round";
font-size: 20px;
font-weight: 400;
margin: 26px 24px 0 24px;
opacity: 0.8;
padding: 0 4px 11px 4px;
text-transform: uppercase;
transition: opacity .35s ease;
}
.sidelink:hover {
opacity: 1;
transition: opacity .35s ease;
}
.sidelink.active {
font-weight: bold;
opacity: 1;
}
Instead of changing the opacity, change the color and this works(tried and tested)..This will fix the disappearing issue..
.sidelink {
border-bottom: 3px solid;
border-bottom-color: transparent;
color:#a9c9d3;
display: block;
font-family: "Varela Round";
font-size: 20px;
font-weight: 400;
margin: 26px 24px 0 24px;
padding: 0 4px 11px 4px;
text-transform: uppercase;
transition: all ease 0.3s;
}
.sidelink:hover {
color: rgb(50, 125, 150);
transition: all ease 0.3s;
}
Replace your class with the above code.. #a9c9d3 is the exact color when you change the opacity to 0.8. And this will fix the div disappearing issue..
Related
I have an issue with my Navbar, when I try to scroll, the body goes all the way up behind the logo. See below picture for reference:
Is there anyway I could make the body disappear when I scroll? Preferably it would disappear before the red line.
Sorry for my bad english and if the question might be a bit dumb. New to development, still learning :)
Here's my CSS code for the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: rgba(42, 44, 57, 0.9);
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
Have you tried changing the background color of the navbar:
#header {
height: 100px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
background: white;
}
#header.header-transparent {
background: transparent;
}
#header.header-scrolled {
background: #fff;
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
}
Unresponsive Modal Dialog, without using Media queries or JS is what the goal (was) is. Can be done - but I have since lost the code to update the question.
You can see it on this Fiddle:
https://jsfiddle.net/4qkonfLk/
Code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close2 {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close2:hover {
background: #00d9ff;
}
Other Information
<div id="openModal" class="modalDialog">
<div> X
</div>
</div>
Any Suggestions on how to fix this? Thanks!
You can specify mobile-only CSS by using media queries, media queries applies CSS rules only in specific conditions such as a width range, for more see the following article.
In your case you can target mobiles width (which is usually 360px) as the max-width of your media query as following:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close2 {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close2:hover {
background: #00d9ff;
}
#media (max-width: 360px) {
.modalDialog > div {
width: 300px;
}
}
Other Information
<div id="openModal" class="modalDialog">
<div> X
</div>
</div>
You want to use #media queries to create alternative renderings.
Like:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
rynave's answer here lists many good common ones; I think it is common to have 2-4 for:
pc/tablet, phone
phone, tablet, pc
phone, tablet, pc, hi res
Or
watch app, phone, tablet, pc
Not sure his iPhone one is so useful any more.
I ended up using some custom CSS classes based on the screensize (Media Queries)to use something different for smaller screens - I ended up scrapping the entire thing after though, so this question is pretty much irrelevant to anything in the community, since I couldn't delete it, I am editing my answers to help understand what I was talking about.
I've created div element, and I also added a border-radius attribute to make the div more aesthetically pleasing. I also added a -webkit-transition: opacity .25s ease attribute to the div to create a transition to a dark overlay when the user hovers over the div. Then, I run into a problem which can be explained by these images.
Cursor outside the div element:
Moving the cursor inside the div element:
The cursor is fully inside the div element:
So, I guess this is a problem with the transition and it's caused by the rounded border of the image. It's kind of annoying and I'd like to remove it but I don't know how to. I've attached the code here:
Note: .memX (where X is a number) refers to each div element. There are like 10 .mem elements.
mem1, .mem2, .mem3, .mem4, .mem5, .mem6, .mem7, .mem8, .mem9, .mem10 {
height: 200px;
width: 200px;
margin: 0px 31px;
display: inline-block;
border-radius: 10px;
border: solid;
border-width: thin;
border-color: #d6d6d6;
overflow: hidden;
}
.overlay {
background: rgba(0,0,0,.4);
text-align: center;
height: 100px;
width: 100%;
padding: 45px 0px 66px 0px;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.insidetext {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
font-weight: lighter;
color: rgba(255,255,255,.85);
font-size: 1.5em;
margin-top: 35px;
}
.mem1:hover .overlay, .mem2:hover .overlay, .mem3:hover .overlay, .mem4:hover .overlay, .mem5:hover .overlay, .mem6:hover .overlay, .mem7:hover .overlay, .mem8:hover .overlay, .mem9:hover .overlay {
border-radius: 10px;
opacity: 1;
}
.mem1 {
background-image: url(members/giles.png);
}
This seems to be a problem in general. You can see this particular problem in action on this CodePen: http://codepen.io/ianfarb/pen/ikeAf
Try using this..
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
position: relative;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
/*padding: 45px 0 66px 0;*/
display: table;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 96px;
display: table-cell;
vertical-align: middle;
}
http://codepen.io/anon/pen/VLBqvE
Hmm I'm confused as to why you've got so many mem classes. Class names can be reused, ID selectors cannot. So why have .mem1 and so on when you could simply have .mem?
Anyway, to fix your problem all you need to do is add border-radius:5px; to #overlay and that should give you your desired effect.
I your example you have two div one is parent (box) and another is chilled(overlay) and you apply border to parent and your hover effect is on chilled so when you hover it will apply transition on chilled. and chilled has no border-radius: 5px; so apply border-radius: 5px; to your chilled id also. so i think its an overflow issue
But you can try this soluttion:
solution is remove delay from transition then it works because of delay it will give you problem.
See this example for removed delay from transition :http://jsfiddle.net/9phk87x8/ i think it will work for you.
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity ease;
-moz-transition: opacity ease;
}
I started learning playing with HTML and CSS.
I have something in mind, and I know this is possible with the help of JavaScript.
But I want to know if its possible just with CSS.
here is my image:
<img id="picturegoeshere" src="picture.png" width="100" height="90">
here is the CSS part:
.picturegoeshere:hover
{
transform:scale(2,2);
transform-origin:0 0;
}
Is their a way to click the image, then pop up ? "hover" works but I want the 'popup' to stay. Because after this part works, but I want to add information about the image (hyperlinks or something else).
I found .picturegoeshere:active but that only makes it bigger while the mouse click is still down..
I'm sure many people have asked the same question, but I cant seem to find their questions, I must be searching the wrong questions because I don't know the terminology for CSS yet I guess?
No did not like that you are doing ...
If you want with this css only then do this ...
as you know you can use focus instead of click it !right! (both mean same).
just create that pop up menu on screen and hide it and then use css like this
#image1:focus #popupmenu{
display:initial;
}
what you need :::
1. Just show image on the screen first.
Show the popup menu by using position:fixed;
And then hide your menu.
After hide use
#image1:focus #popupmenu{ display:initial; }
This create a popup menu for you.
Use same method for close button and for thumb changing
<a href="#openModal">
<img src="http://www.cssscript.com/wp-content/themes/iconic-one/img/twitter.png" alt="Follow us on Twitter"></a>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
I think you are looking for this:
body {
font-family: Arial, sans-serif;
background: url(4.jpg);
background-size: cover;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: orange;
margin: 100px 0;
}
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid orange;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
background: orange;
}
.button:hover {
background: orange;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
Check this site:-
http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript
http://meyerweb.com/eric/css/edge/popups/demo.html
On the page http://canadianwhoswho.ca/order-subscribeonline.php I have created a modal window that opens when users click http://canadianwhoswho.ca/order-subscribeonline.php#openModal. This works perfectly in Firefox, but not in IE or Chrome. Instead, it just adds the modal text to the top of the page.
Here is the CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #E4E4E4;
background: -moz-linear-gradient(#E4E4E4, #F6F6F6);
background: -webkit-linear-gradient(#E4E4E4, #F6F6F6);
background: -o-linear-gradient(#E4E4E4, #F6F6F6);
}
.close {
background: #E4E4E4;
color: #922211 !important;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #922211;
color: #E4E4E4 !important;
}
And the HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Thank you for your interest in <em>Canadian Who's Who</em></h2>
<p>To place an order, please contact us at info#canadianwhoswho.ca, or call 705-325-5552.</p>
</div>
Choose</p>
i found similar answer on http://cameronbaney.com/2012/07/26/pure-html5css3-responsive-modal-window/
I have tried it and works for all three IE, Chrome and Firefox.
Hope it helps.