Here is a sample code for the html and css:
HTML
<nav>...</nav>
<div class="row"></div>
CSS
.nav{
margin-bottom: 10px;
}
I want a gradual fading effect in the bottom margin of the navbar.
Please help. What css property needs to be set to do this?
If your nav background is a solid color (or the "faded" part is one color), you could add an ::after pseudo-element with a background gradient to simulate the color fading out.
Here is a demo of how to do this.
If you want to add a fading effect on CSS, you can play with opacity property going from 0 to 1. Then, you have to couple this property with another property called transition. To create a transition effect, you must specify two things:
the CSS property you want to add an effect to. In your case, it's opacity.
the duration of the effect
So, you can try a CSS like this to change the opacity for your nav :
.nav
{
opacity : 1;
margin-bottom: 10px;
transition : opacity 2s;
}
If you know about JQuery, there are special functions to do a fading in/out effect.
Hope it will help you.
Related
I'm trying to create different opacities on images on a carousel slider.
There are two DIV classes for the one in focus and the rest which is out of focus/not active.
figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded"
figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded is-selected"
I want the loaded DIV to have opacity 0.5 and the 'is-selected' DIV opacity 1.
I can easily add this to the CSS:
.flkty-carousel__cell {
opacity: 0.5;
}
But now all the images get opacity 0.5.
How do I add the correct CSS to seperate the two DIV classes?
.flkty-carousel__cell.is-selected {
opacity: 1;
}
This selector will target an element that has both the .flkty-carousel__cell class and the .is-selected class.
html{
background-color:#739AC5;
}
img{
display:inline-block;
color:#739AC5;
background-color:#739AC5;
margin:0px;
}
I added two inline-block gif images. However, after I add them, the background color changes from a light blue to white but only on that line. I've added color and background-color properties to image but nothing changes. If I remove the images from my HTML, the background-color returns to normal. I searched somewhere to change line-height:0; but this did not work for me either.
Any ideas as to what is going on? I might add I am using bootstrap but I linked my stylesheet last.
There is a more specific selector for img elements, such as:
div img { background-color: #fff; display: block; }
This selector overrides the other one since specificity trumps the cascade.
I've created this hexagonal navigation to fit within a website.
http://www.flickr.com/photos/14577801#N00/11202239254/
I'm wanting to know what would be the best way to go about creating the structure of the navigation in html and css. Where the links are within the white hexagons, I would like hovering over these links to change the white background to a colour. I've tried to do this with using background images, but haven't quite got there. The surrounding coloured hexagons I've been using as a whole background image for the navigation.
I found this on the web: http://jtauber.github.io/articles/css-hexagon.html , which I think could be great to use, but I thought there must be a way to use background images.
Thanks, Tim.
The color of an element (in this case, a hexagon) can be changed on hover with css. If we add this to the style properties in your css-hexagon tutorial:
.hex:hover {
background-color: blue;
}
.hex:hover:before {
border-bottom: 30px solid blue;
}
.hex:hover:after {
border-top: 30px solid blue;
}
The hexagon will change color when the cursor hovers over it, which you can see in this jsfiddle.
You can find good documentation of the CSS :hover pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
I want to give border-bottom to header.the border color should be same as its child font color.please find the html code and suggest me to proceed further.
<header>
<div class="cblt-panel">
<header>
<a href="HomePage;jsessionid=9Z1DRLtK8FfgmVDhysv4fk8LKjj1rTpSpJcS99dvcbffT4KTZ9tN!91184445">
<div class="header-wrapper header">
<h1 class="dealer-name">Airport Chevrolet Cadillac</h1>
</div>
</a>
</header>
</div>
</header>
in the above markup, i want to set the border-bottom-color for outer header tag same as the font color of child h1 tag. is it possible ?
I don't think you can achieve it through pure CSS. If you are able to use jQuery, it's quite simple:
var h1Color = $('.dealer-name').css('color');
$('header:eq(0)').css('border-bottom-color', h1Color);
Demo: http://jsfiddle.net/S9svs/
No, it is not possible: in CSS, parents never inherit from their children.
You can just make an element’s border color the same as its own content color (text color), namely by not setting the border color at all. But to use a color set on a child, you need JavaScript.
A better strategy is to combine the settings so that you simply set the color of a heading element and the color of an enclosing element to the same value. These settings need to be done in separate rules, though, e.g. header { border-color: #060; } h1 { color: #060; }.
If you surely want to do it dynamically then you have to use a css preprocessor language for it...
Like Less CSS
Here you make dynamically define the css and use it like you do in javascript...
For example,
#color:#000;
header { border-bottom-color:#color; }
header h1 { color:#color; }
The funny thing is that border-color, if not set, uses the color property to define it's color, so in some occasions you may be able to do the opposite. eg:
header {
color:red;
border-bottom: 2px solid;
}
header a,header h1 {
color:inherit;
}
DEMO: http://jsfiddle.net/brTTT/
In the demo, hover to see the color change by just changeing the header color property.
I've managed to manipulate most of the twitter widget's css but I can't seem to remove the black border around the whole widget and there seems to be a much thicker border on the bottom of the widget which I also want to remove. I'm using Chrome to test this.
Here is the jsfiddle.
The "border" is actually a background color which is shining through because you have a 1px padding on .twtr-bd, so the background color of .twtr-bd is not erasing the black background from the parent element.
Either remove the background color, or remove the padding.
give backgeound-color:white like this:
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {
background:#FFFFFF !important;
}