I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
Related
How would I be able to create something like the link above with html and css? Every time I try to make it into a thin line like (box-shadow: 10px 10px 1px #FFE600;) it disappears. Would I just need to create a separate div for this?
Here's my curent code:
HTML
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
CSS
.pageimg {
width: 37%;
float: right;
margin-left: 100px;
box-shadow: 10px 10px #FFE600;
}
Use multiple box-shadows:
img {
box-shadow:
12px 8px 0 0px white,
14px 6px 0 0px yellow,
14px 10px 0 0px yellow,
10px 10px 0 0px yellow;
}
<img src="https://picsum.photos/200/200?image=1069">
You could also rather use pseudo elements. I do recommend keeping images in containers as it makes working with them easier. It would look something like this.
.image-container{
position: relative;
display: inline-block;
}
.image-container::before{
content: '';
position: absolute;
border: solid 1px yellow;
width: 100%;
height: 100%;
left: 14px; /* This will be your box shadow x-offset; */
top: 14px; /* This will be your box shadow y-offset; */
z-index: 0;
}
and then your html
<div class="image-container">
<img src="../images/about.jpg" alt="Yonge and Dundas Street" class="pageimg">
</img>
Note: This question is similar to this question; however, it is different and thus is being asked as a separate question to the one just linked.
I am trying to create a flat long shadow in CSS for the text in a logo. The original way I found to do it is based on Matt Lambert's tutorial. The way Matt proposes to do it would require a lot of CSS (although, kudos to him, it does work and goodness knows I didn't figure that out). So thus that led me to ask for a way to do that with less CSS. #vals figured out how to do that with this.
Now I'm attempting to make a flat-long-shadow (does anyone have a shorter abbreviation for this? how about the acronym: "FLS?") for the text of a logo (i.e. this); however, it isn't going so well...
As you can see from this fiddle I made, I sort of combine the two techniques... but, while it's not atrocious, it doesn't work perfectly...
Here is the same fiddle in a snippet:
/* shadow color: #2d5986 */
html, body {
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
div {
min-height: 128px;
min-width: 128px;
background-color: #369;
color: white;
font-size: 4em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
span {
/* background-color: #47a; */
position: relative;
text-align: center;
text-shadow: #2d5986 1px 1px,
#2d5986 2px 2px,
#2d5986 3px 3px,
#2d5986 4px 4px,
#2d5986 5px 5px,
#2d5986 6px 6px,
#2d5986 7px 7px,
#2d5986 8px 8px,
#2d5986 9px 9px,
#2d5986 10px 10px,
#2d5986 11px 11px,
#2d5986 12px 12px,
#2d5986 13px 13px,
#2d5986 14px 14px;
}
.shadow:before, .shadow:after {
content: "";
position: absolute;
right: 0px;
bottom: 15px;
z-index: 1;
transform-origin: bottom right;
}
.shadow:before {
height: 40px; /* increased height */
width: 100%;
left: 0px;
transform: skewX(45deg);
box-shadow: 1px 40px 0px 0px #2d5986; /* 1px in x direction to avoid small gap between shadows */
}
/* .shadow:after {
width: 10px; increased width
height: 100%;
top: 25px;
transform: skewY(45deg);
box-shadow: 10px 0px #2d5986;
} */
<div>
<span class="shadow">
A
</span>
</div>
<div>
<span class="shadow">
a
</span>
<span class="shadow">
b
</span>
</div>
<div>
<span class="shadow">
A B
</span>
</div>
<div>
<span class="shadow">
A B C
</span>
</div>
The main problem is the fact that we are now working with text-shadow instead of box-shadow, and as such the :before and :after pseudo classes don't work (although I attempted to make them work by attaching them to the <span>... and then made the width: 100%).
If there was a way to set the width and height of the text-shadow itself (which is achieved on a box-shadow by using the :before and :after pseudo classes), I feel this would be a piece of cake; however, all my research has not found how to do this for a text-shadow.
Does anyone know a way to make a flat long shadow for text with minimal CSS - potentially by somehow changing the width and height of the text-shadow?
Thank you.
Though this is no css-only answer, you might give it a try.
Basically, you create the according css in the browser via a short javascript snippet. The upside is, that it makes you very flexible - changing only two parameters instead of several tens of lines of css.
function addDropShadow(element,width,color){
let css = "";
for (var i = 1;i<width;i++){
css += `${color} ${i}px ${i}px,`;
}
css += `${color} ${width}px ${width}px`;
element && (element.style.textShadow = css);
}
let element = document.querySelector(".icon");
let color = "rgb(18, 128, 106)";
addDropShadow(element,15,color);
.container { padding: 50px; background: rgb(34,45,58); } .icon { font-family: "Helvetica Neue", helvetica, arial, sans-serif; font-weight: bold; color: #fff; background-color: rgb(22, 160, 133); height: 150px;width: 150px; font-size: 75px;line-height: 150px; text-align: center; display: block; overflow: hidden; }
<div class="container"><div class="icon">YO</div></div>
I don't think there is a good CSS only approach.
The only posibility that I can think of is creating pseudos with the same text as the base, and use to reduce the amount of shadows to one third:
Notice that the pseudo itself counts as a shadow because it has the color changed to the color of the shadow
.sample {
font-size: 70px;
position: relative;
text-shadow: 1px 1px red, 2px 2px red, 3px 3px red, 4px 4px red, 5px 5px red,
6px 6px red, 7px 7px red, 8px 8px red, 9px 9px red;
}
.sample:after, .sample:before {
content: attr(data-text);
z-index: -1;
color: red;
position: absolute;
}
.sample:after {
left: 10px;
top: 10px;
}
.sample:before {
left: 20px;
top: 20px;
}
<div class="sample" data-text="Sample">Sample</div>
This is the illusion that I am attempting to create:
Notice that my designer wants the border cut off in the middle of the div, this is what I need to know how to do. I don't think overlapping with a z-index will work because of how the HTML is laid out.
This is the HTML code of which the structure may not be changed for maximum device compatibility, however, if adding an element is the solution, I believe that may be done:
<div id="nav_icons_con" class="mopn">
<div id="inner_nav_container" class="show_inner_nav">
<div class="nav_link_container">Home</div>
</div>
</div>
Here is the basic current CSS code:
#nav_icons_con {
z-index: 1;
cursor:pointer;
height: 5.005em;
width: 5.005em;background-image:url(background.png);
background-size:70%;
background-repeat:no-repeat;
background-position:center;
margin:.385em .385em 0 0;
}
#nav_icons_con.mopn{
background-color:#FFF;
border:2px solid #83C5E6;
border-bottom:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container, .inner_nav_container{
cursor:pointer;
display:none;
position:absolute;
top:5.39em;
right:.385em;
width:12.5em;
white-space:normal;
background-color:#FFF;
border:2px solid #83C5E6;
border-top:none;
box-shadow:5px 5px 10px #666;
}
#inner_nav_container.show_inner_nav, .inner_nav_container.show_inner_nav{display:block;}
The typical way to do this is to position the tab element over the sub element, so as to cover up that section of the border. However, the use of box-shadow complicates this.
One way is to add another element inside the root element, so that the root element can still cast the shadow, but the element inside is positioned above. See my code below, for a basic example.
Working Example:
.icon {
width: 50px;
height: 50px;
position: relative;
/*Create the shape for the shadow.*/
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
.icon-content {
background: #fff;
position: relative;
/*Move back over the border.*/
top: -5px;
left: -5px;
/*Make tall enough to cover the top border.*/
width: 50px;
height: 55px;
/*Add border, except on the bottom.*/
border: 5px solid #83C5E6;
border-bottom: 0;
/*Position up a layer.*/
z-index: 1;
}
.nav {
position: absolute;
left: -5px;
top: 100%;
width: 400px;
padding: 1em;
background: #fff;
border: 5px solid #83C5E6;
box-shadow: 5px 5px 10px #666;
}
<div class="icon">
<div class="icon-content">
</div>
<div class="nav">
<div class="item">Home</div>
</div>
</div>
i have searched over an hour right now after this. Im trying to find how to style a div's apperance.
http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png
The picture show a black div with a "arrow" side on the left. How do you make those things?
here is a quick way to accomplish this.
jsfiddle demo
css
#frame{
width:90%;
border: 20px solid lightblue;
background:black;
}
.title{
font-size:3em;
position:absolute;
color:white;
top: 60px;
margin-left:80px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid lightblue;
}
html
<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>
I would use an inverted arrow (border hacks using top and bottom border) to achieve this. You can also make it part of a pseudo-element so that your markup remains clean.
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
background: #BCDEB1;
}
h1 {
font-family: 'Yanone Kaffeesatz';
float:right;
background: black;
position: relative;
color: white;
padding: 0.5em 0.5em;
line-height: 1em;
margin-right: 0.1em;
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
h1:after {
content: '';
position: absolute;
right: 100%;
top: 0;
border: 0 solid black;
border-left: 0.5em solid transparent;
border-top-width: 1em;
border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
<h1>Administration and etc?</h1>
Because the triangle is angled, it may be worth looking into SVG as the content of a :before pseudo element.
Here is a codepen that I almost completed for you using only CSS. http://codepen.io/anon/pen/dPVERJ
You may have to tweak it a bit to get it looking exactly like the image.
I used cssarrowplease to generate the basic arrow and tweaked it from there.
Also see http://css-tricks.com/snippets/css/css-triangle/
I would google something like this before asking here, this is a problem that has been figured out many times over.
I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.
Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)
HTML
<div id="header_organizer">
<div id="user_bar">...</div>
<div id="user_bar_menu">...</div>
<div id="logo_alt"> <!-- <<<<< We are centering this div! -->
<img src="logo.png" \>
</div>
</div>
CSS
#header_organizer {
width: 100%;
height: 180px;
background: black url(../images/template/header.png);
float: left;
position: relative;
z-index: 1000;
}
#logo_alt {
width: 256px;
height: 55px;
margin: 40px auto 0px auto;
}
#user_bar {
height: 30px;
color: #CCC;
font-size: 13px;
margin-right: 10px;
padding: 0px 5px;
float: right;
cursor: pointer;
position: relative;
z-index: 3000;
}
#user_bar_menu {
width: 200px;
height: 165px;
background: white;
border: 1px solid #BEBEBE;
float: right;
position: absolute;
top: 30px;
right: 10px;
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
display: none;
z-index: 1000;
border-image: initial;
}
The HTML file start off with <html xmlns="http://www.w3.org/1999/xhtml">.
Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.
Firstly, add a doctype to prevent IE from slipping into quirks more.
Then try this...
body {
width: 100%;
}