I was wondering if there was any way to achieve this look for navigation hover with CSS? I've tried using a box-shadow effect, but the blur effect would bleed to the sides. As shown in the image, I really want the cut-off look along the edges as well as the gradient applied ONLY to the bottom edge.
Also, this doesn't need to be achieved with CSS; JS or JQ is acceptable.
Here is a jsFiddle that should do what you're asking for.
Here's the code:
body {
background: #e8e8e8;
}
nav {
background: #DEC8A0;
height: 50px;
position: relative;
}
nav:before {
width: 100%;
height: 16px;
background-image: linear-gradient( 25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% ),
linear-gradient( -25deg, transparent 0%, transparent 50%, #DEC8A0 50%, #DEC8A0 100% );
background-size: 28px 16px;
background-repeat: repeat-x;
position: absolute;
bottom: -16px;
left: 0;
display: block;
content: "";
}
nav a {
display: block;
float: left;
width: 100px;
height: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
nav a:hover {
box-shadow: inset 0px 4px 0px purple;
}
nav a:hover:before {
width: 100%;
height: 100px;
background: linear-gradient( purple, transparent );
display: block;
content: "";
position: absolute;
z-index: -1;
}
<nav>
<a>About</a>
<a>Other</a>
</nav>
This is a bit intense, so I'll walk you through the various things we're doing:
To accomplish the interesting cutout border, we use gradients applied to the background of the :before pseudo-element of the nav. You can use any angles you want -- -45 and 45 degrees will make really sharp zigzags, and anything below will do nice, gradual angles like we have in this example.
Then, to accomplish the hover effect: there are two components at work. To get the top part of the hover effect, I use an inset box-shadow that is the same color as the start of the gradient. Then, to get the gradient, I use the :before pseudo element of the nav a, which has a height greater than the link itself, and also a lower z-index than the nav element so it sits below.
Finally -- if you're not familiar with it, I'm using flexboxes to center the navigation text vertically.
This all adds up to the effect you're (hopefully) looking for!
EDIT: In case you have fluid width links, you just need to set the width of nav a to auto and add the desired padding on the ends:
nav a {
display: block;
float: left;
width: auto;
padding: 0 20px;
height: 50px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
Keep in mind that when doing this, you need to set left: 0 on the :before pseudo-element since we need it to stick to the left of the link:
nav a:hover:before {
width: 100%;
height: 100px;
background: linear-gradient( purple, transparent );
display: block;
content: "";
position: absolute;
z-index: -1;
left: 0;
}
Here is an updated fiddle with all of this added in.
Perhaps this is what you want: Fiddle
I assume that your HTML looks like that. What you need is to make a link displayed as inline-block (so you can set the width and height of the link), set the line-height the same with the navigation bar height, then set the height of the link to some number higher than the navigation bar height, then use CSS hover to make the link have some background-color from some color to transparent
*Note: this will have some browser compatibility issue because some older browser doesn't support CSS3 Gradients
body {
background: blue;
}
nav {
width: 100%;
height: 50px;
margin: 20px 0 0;
background: #919924;
}
a {
padding: 0 10px;
display: inline-block;
line-height: 50px;
height: 125px;
}
a:hover {
background: -webkit-linear-gradient(red, transparent);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, transparent);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, transparent);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, transparent);
/* Standard syntax */
}
<nav>
<a href="#">
My Cats
</a>
<a href="#">
My Dogs
</a>
<a href="#">
My Pets
</a>
</nav>
EDIT:
If you want the gradient to apply on the bottom edge, then you can change the CSS by adding a:after for the gradient effect like this: Fiddle
you need to make the link to position: relative, then create a a:after with position: absolute and z-index: -1
*Note: For :after to work, you need to add content: '' or else it won't be created
body {
background: blue;
}
nav {
width: 100%;
height: 50px;
margin: 20px 0 0;
background: #919924;
}
a {
padding: 0 10px;
display: inline-block;
line-height: 50px;
position: relative;
}
a:after {
content: '';
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 150px;
z-index: -1;
}
a:hover:after {
background: -webkit-linear-gradient(red, transparent);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, transparent);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, transparent);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, transparent);
/* Standard syntax */
}
<nav>
<a href="#">
My Cats
</a>
<a href="#">
My Dogs
</a>
<a href="#">
My Pets
</a>
</nav>
Related
I have this CSS, where I want the footer div displayed after all content on the page. At this moment it doesnt show on the page, when I have the height of the page set to "auto", but if I set a height of any sorts or min-height it shows up till that height as it should. Can I do this, or do I have to set a manual height on each page? The CSS looks like this:
body
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: auto;
background-image: url("background.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Dette er css til vores footer div boks */
div.footer
{
position: absolute;
bottom: 0;
height: 250px;
left: 0;
right: 0;
padding: 1%;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
line-height: 200%;
border: 1px solid black;
}
I have tried using flexbox, containers and grids, but it only seems to work, if I insert a manual height of the body.
Try this example:
.my-contnet element has min-height of 100% to take the full height of the page.
This way the footer is always displayed at the bottom of the page regardless of the amount of content on the page.
The content will fill the remaining space above the footer.
html,
body {
height: 100%;
margin: 0;
}
.my-contnet {
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
What about this?
div.header {
position: relative;
display: flex;
justify-content: center;
align-items: normal;
}
video.header {
position: relative;
width: 100%;
filter: brightness(60%);
left: 50%;
top: 50%;
transform: translate(-50%,0%);
}
div.headline {
position: absolute;
left: 50%;
border-radius: 50px;
transform: translate(-50%,150%);
}
h1.headline {
font-size: 500%;
text-align: center;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
div.about {
position: relative;
background-color: rgba(255, 255, 255, 0.9);
border: solid black 2px;
border-radius: 40px;
padding: 2%;
display: flex;
align-items: flex-start;
margin-bottom: 280px;
}
table.text {
width: 60%;
padding-bottom: 1%;
}
table.img {
padding-top: 5%;
}
div.footer {
position:fixed;
}
The absolute positioning of your elements was causing the footer visibility problems.
Also, if you don't want the footer to be displayed at all times, just replace the fixed position in my example with relative - the footer will only be showing once your visitors scroll down to it. If you do that, however, be sure to remove the margin-bottom: 280px; rule from div.about selector.
Please note that these were just some quick fixes - I have not considered whether your site will look good (enough) on various resolutions (mobile, tablets, 4:3, etc).
You might want to look up some boilerplates, for example, the ones Bootstrap offers.
For me, this code works great.
Please pay attention to the link I sent you in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
html, body {
/* IE 10-11 didn't like using min-height */
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: lightblue;
}
.footer {
flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
padding: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
</div>
<footer class="footer">
Footer
</footer>
</body>
</html>
So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
In theory, this is what I want it to look like:
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.
There are a ton of different ways to do this.
Here is a CSS only way.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
Hope this helps!
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
background: #e8e8e8;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hello from the other side!";
}
.title-card.caption-b::before {
content: "It's tricky!";
}
.title-card.caption-c::before {
content: "Don't call it a comeback!";
}
.title-card.logo-a {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}
<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>
I'm trying to make a transparent glass-like box, something similar to what is shown in this image:
I don't know whats wrong with my CSS because it looks like a white box (with low opacity) shown, basically it doesn't have the look or feel as shown in the picture. I was wondering if anyone knows how to achieve something like this?
My CSS (I tried a couple of things like blur or opacity but neither one yields the result I want):
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
div.glass-bg-color::before {
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: absolute;
// filter: blur(4px);
// box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
opacity: 0.3;
background-color: rgba(255,255,255, 1);
}
.glass-bg-color {
color: white;
position: relative;
}
<div class="body-bg-color">
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
</div>
The example you've shown uses a radial gradient as the background of the underlying element, and transparent white for the "glass" effect. For example I've created an elliptical background gradient ( by modifying an example on MDN) placed as a transparent image on top of a solid background of the body.
The glass effect is now just a transparent white background on a container element. I've used an inline-block for demonstration:
body {
margin: 0px;
width: 100vw;
height;: 100vh;
background-color: #00467F;
background-image:
radial-gradient(ellipse farthest-corner at 80vw 15vh ,
rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
);
background-attachment:fixed;
}
.glass {
background-color: rgba( 255,255, 255, 0.1); /* transparent white */
color:white;
display:inline-block;
border-radius: 15px;
padding: 10px;
}
<div class="glass"
style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
Hello Folks!
</div>
(Note the CSS for the body background can produce unwanted scrollbars if the body margin is non zero. An alternative to zero width body margins may be to create a fixed position background element with a z-index of -1. Previous discussion of the issue may be found at CSS3 gradient background set on body doesn't stretch but instead repeats? which I have already found useful.
The answer is really just applying white with a low opacity on the box backgrounds:
The CSS:
body {
position: relative;
width: 100%;
background: #00467F;
background: -webkit-linear-gradient(left, #A5CC82, #00467F);
background: -moz-linear-gradient(left, #A5CC82, #00467F);
background: -o-linear-gradient(left, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
}
.glass-bg-color {
position: relative;
display: inline-block;
float: left;
margin: 20px;
width: 200px;
height: 200px;
border-radius: 4px;
text-align: center;
background-color: rgba(255,255,255,.08);
color: white;
}
The HTML:
`
<div class="glass-bg-color">
Foo
</div>
<div class="glass-bg-color">
Bar
</div>
<div class="glass-bg-color">
Baz
</div>
`
See the fiddle here: https://jsfiddle.net/4y8bx2eg/
Your current background opacity is set to 1. It should be closer to 0.2. And your spread-radius of the box-shadow is 3000px, which should be set more relative to the size of your elements, I'd also suggest changing the blur-radius a bit, which is currently zero.
Is this more like what you are looking for?
.body-bg-color{
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #A5CC82, #00467F);
text-align: center;
}
.glass-bg-color {
box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
background-color: rgba(255,255,255, 0.2);
color: white;
position: relative;
display: inline-block;
padding: 10em;
}
I know with some border tricks, I could create trapezoid shape. I can also set its border-color to rgba(r,g,b,a) to make it transparent.
But is it possible to create trapezoid that has transparent borders and background ?
See below image for an example,
Currently, I use some png images to achieve this effect，but generating images of different sizes is really boring work，so I'm looking for a css soluation。
Personally, I think it's overkill, but it can be done like this:
demo
HTML:
<div class='outer'>
<div class='content'><!--stuff here--></div>
<div class='label l1'></div>
<div class='label l2'></div>
</div>
CSS:
.outer {
position: relative;
width: 500px; /* whole thing breaks if this is not a multiple of 100px */
border: solid .5em rgba(0,0,255,.5);
border-bottom: solid 0px transparent;
margin: 7em auto 0;
background: rgba(0,0,0,.5);
background-clip: padding-box;
}
.outer:before, .outer:after {
position: absolute;
top: 100%;
height: .5em;
background: rgba(0,0,255,.5);
content: ''
}
.outer:before { left: -.5em; width: 15%; border-left: solid .5em transparent; }
.outer:after { right: -.5em; width: 55%; border-right: solid .5em transparent; }
.content {
padding: .5em;
margin: 1.5em;
border-bottom: solid 1.5em transparent;
background: lightblue;
background-clip: padding-box;
}
.label {
overflow: hidden;
position: absolute;
top: 100%;
width: 15%;
height: 3em;
}
.l1 { left: 15%; }
.l2 { left: 30%; }
.label:before {
position: absolute;
top: -.5em;
width: 100%;
height: 2.5em;
border: solid .5em rgba(0,0,255,.5);
background: rgba(0,0,0,.5);
background-clip: padding-box;
content: '';
}
.l1:before { left: 9%; transform: skewX(30deg); }
.l2:before { right: 9%; transform: skewX(-30deg); }
It works in Firefox, Chrome, Opera and Safari (I was afraid to test it in IE9, though both transform and background-clip work) but only if the width for .outer has a value that's a multiple of 100px.
Unless using a width that's a multiple of 100px, it only works in Firefox and Chrome (there is a little glitch in Chrome - could be fixed by using a WebKit-only left to right linear gradient that sharply goes from transparent to that semitransparent blue really close to the start).
It breaks in Opera and Safari (if using a width that is not a multiple of 100px):
You can make the bg color and border colors transparent, but the borders will not follow the shape of the trapezoid:
http://jsfiddle.net/Kyle_Sevenoaks/UZbJh/1/
So your best bet is to stick with the pngs for now.
I have a nav bar in a div and I need the nav bar to be fluid. The table that it is in is based on percentage (100%) with a min width of 800px. What I think I need is for the images to be resizable based on the main container size. Each image (home, faq, testimonials...). I want to the image width and height to shrink when the window is resized down to the smallest (800px) so that it will all still fit in one line).
#nav-container {
height: 80px;
padding-left:10px;
overflow:auto;
}
ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
ul#nav li a {
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
}
ul#nav:hover li a{
background-position: left bottom;
}
ul#nav li a:hover{
background-position: left center;
}
ul#nav li a span{
background-repeat: no-repeat;
display: none;
position: absolute;
}
ul#nav li a:hover span{
display: block;
}
ul#nav li a.home {
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 0%;
}
ul#nav a.custom{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 13%;
}
ul#nav a.faq{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 26%;
}
ul#nav a.testimonails{
background-image: url(../images/home.gif);
height: 37px;
width: 118px;
top: 10px;
left: 40% ;
}
By giving the "left" a percentage instead of a the distances between the buttons will change when the window is resized. However, I need to have a minimum distance between the buttons so that when the window goes to its smallest (800px) there is still a distance between the buttons, but when the window is maximized the distance isn't too great.
You can set the min-width/min-height and max-width/max-height of elements in CSS.
W3schools - CSS Dimension
eg:
img
{
min-width:150px;
}
You could try using padding or margins to maintain distance between buttons, rather than using 'left'.
CSS Margins and Padding
Please provide a live demo for a more specific solution. I recommend using a service such as jsfiddle.net.
I hope this helps.