I am making a customized navigation bar for my website, but the list items do not show up as I wanted.
here's what I've tried JSFiddle.
In my localhost i get This Output.
Thanks for your time.
here's the html code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="top-nav-shadow">
<nav class="navbar bg-nav">
<div class="navbar-brand">
Contact: +91 xxxxxxxxxx or xxxxxxxxx
</div>
<div class="top-nav-logo">
<img src="images/IN.png">
<img class="img2" src="images/PV.png">
</div>
</nav>
</div>
<div> </div>
<div class="nav-shadow">
<nav class="navbar bg-nav-inverse">
<div class="container-fluid">
<div>
<img src="images/logo.png" class="navbar-logo">
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Courses</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
Here's the css
#charset "utf-8";
/* CSS Document */
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 80%, #ffffff 81%, #ffffff 81%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #008080;
max-height:30px;
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 17%, #008080 18%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
border-bottom:1px solid #008080;
max-height:50px;
}
.top-nav-shadow
{ margin-top:3px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
.nav-shadow
{
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.navbar-logo
{
max-width:11%;;
margin-top:-45px;
margin-left:0px;
margin-bottom:-20px;
}
.top-nav-logo
{
margin-top:-18px;
}
.top-nav-logo img
{
max-height:60px;
margin-left:30px;
}
.top-nav-logo .img2
{
max-height:73px;
padding-left:10px;
}
.navbar-brand
{
font-family:Aharoni;
font-size:18px;
color:white;
padding:0px;
margin-top:-48px;
}
.navbar-brand a{
text-decoration:none;
color:white;
background-color:transparent;
font-size:20px;
}
.navbar-brand a: hover
{
text-decoration:none;
color:#CCC;
}
#media only screen and (max-width: 600px)
{
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 63%, #ffffff 64%, #ffffff 64%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 37%, #008080 38%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
}
}
I am desiring an output as This Image
I have posted all that I have done, so i would like you to suggest me where i am doing the mistake.
I had some spare time and was curious about Bootstrap so I integrated your desired output the way I thought best (using Bootstrap for the first time haha).
Code snippet :
#charset "utf-8";
.navbar {
border: 1px solid #008080;
border-width: 1px 0;
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75), 0 8px 6px -6px black;
}
.navbar-contact,
.nav {
background: #008080;
overflow: hidden;
}
.navbar-contact {
max-height: 29px;
}
.bottom {
margin-top: -30px;
}
/* White Angles (Common) */
.nav:before,
.navbar-contact:after {
content: "";
background: #fff;
position: absolute;
width: 2em; height: 2.5em;
transform: skew(-30deg);
}
/* .navbar-contact angle position */
.navbar-contact:after {
right: -1em;
top: 0;
}
/* .nav angle position */
.nav:before {
left: -1em;
top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<html>
<body>
<nav class="navbar p-0">
<div class="top d-flex w-100">
<div class="px-2 navbar-contact text-white position-relative flex-grow-1">Contact: <a class="text-white" href="#">+91 xxxxxxxxxx or xxxxxxxxxx </a></div>
<div class="pt-1 pr-3 d-flex mt-auto bg-white position-relative">
<img class="position-relative ml-2 mr-1" src="http://computervision.in/images/IN.png" height="50">
<img class="position-relative mx-3" src="http://computervision.in/images/PV.png" height="55">
</div>
</div>
<div class="bottom d-flex w-100">
<a href="" class="navbar-brand mr-0">
<img src="http://computervision.in/images/logo.png" height="60">
</a>
<ul class="nav mt-auto flex-grow-1 pl-4 position-relative">
<li class="nav-item active"><a class="nav-link text-white active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">Courses</a></li>
</ul>
</div>
</nav>
</body>
</html>
JSFiddle :
https://jsfiddle.net/3L7tmbxk/
To sum it up :
I transformed your gradient backgrounds into pseudo element angles. They are placed relatively to their containers for better responsivity and take advantage of Bootstrap 4 flexbox implementation.
I used Bootstrap classes as much as possible but I think you could improve it even more. It's my first time using it so I don't know all the possible configurations and all the available classes.
I set the height of your images directly into their img tag.
I have edited your CSS as your desired output. I will suggest you to mustn't use margins in negative. It is not a appropriate way to make a good layout.
#charset "utf-8";
/* CSS Document */
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 80%, #ffffff 81%, #ffffff 81%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 80%,#ffffff 81%,#ffffff 81%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #008080;
max-height:30px;
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 17%, #008080 18%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 17%,#008080 18%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
border-bottom:1px solid #008080;
max-height:50px;
}
.top-nav-shadow
{ margin-top:3px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
.nav-shadow
{
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.navbar-logo
{
max-width:11%;
position: absolute;
top: 28px;
}
.top-nav-logo
{
display: inline-flex;
justify-content: flex-end;
float:right;
}
.top-nav-logo img
{
max-height:44px;
margin-left:30px;
}
.top-nav-logo .img2
{
max-height:47px;
padding-left:30px;
}
.navbar-brand
{
font-family:Aharoni;
font-size:18px;
color:white;
padding:0px;
display: inline-flex;
}
.navbar-brand a{
text-decoration:none;
color:white;
background-color:transparent;
font-size:20px;
}
.navbar-brand a: hover
{
text-decoration:none;
color:#CCC;
}
.nav.navbar-nav{
list-style: none;
display: inline-flex;
margin-left: 220px;
padding: 0;
}
.nav.navbar-nav a{
text-decoration: none;
margin-right: 50px;
}
#media only screen and (max-width: 600px)
{
.bg-nav
{
background: #008080; /* Old browsers */
background: -moz-linear-gradient(-45deg, #008080 0%, #008080 63%, #ffffff 64%, #ffffff 64%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #008080 0%,#008080 63%,#ffffff 64%,#ffffff 64%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008080', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.bg-nav-inverse
{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ffffff 37%, #008080 38%, #008080 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#ffffff 37%,#008080 38%,#008080 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#008080',GradientType=1 );
color:black;
}
}
Related
When I try to image gallery on trial website using CSS grid, images overlay one another to such extent that is a pain to see.
I tried to check classes and how they interact and everything should be ok. When I delete code of CSS grid, everything starts looking normal, although the sizes of the images are different.
Before:
After:
I would like to make them symmetrical, but don't know what to do. Perhaps, there is an error in managing the sizes of images themselves? But when I tried to make them with the same width and height, nothing changes.
Thank you for help in advance and if there are some inconveniences in post, let me know so I wont do the same mistake in the future.
Code:
body {
margin: auto 0px;
}
.zone {
cursor: pointer;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*Navigation cosumize*/
.navigation {
display: flex;
list-style: none;
font-size: 1em;
margin: 0px;
}
#media only screen and (max-width: 600px) {
.navigation {
font-size: 0.5em;
padding: 0;
}
}
.end {
margin-left: auto;
}
li {
padding: 10px;
}
a {
color: white;
text-decoration: none;
}
/*Cover*/
.red {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
}
/*Project's grid*/
.for-grid {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
img {
width: 100%
}
.box {
background-color: #444;
padding: 100px;
margin: 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<!DOCTYPE html>
<html>
<head>
<title>Layout Master</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="zone green">
<ul class="navigation">
<li>
About
</li>
<li>
Products
</li>
<li>
Our team
</li>
<li class="end">
Contact
</li>
</ul>
</nav>
<div class="zone red">Cover</div>
<div class="zone blue for-grid">
<img class="box zone" src="https://i.ibb.co/qWr3CYq/data-storage-2-2.png">
<img class="box zone" src="https://i.ibb.co/fGcNpN7/desktop-analytics-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/mtXHQ8C/files-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/wyCktLv/monitor-coding-2.png">
<img class="box zone" src="https://i.ibb.co/M9Qkn6G/monitor-settings-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/k0VNnBN/server-2-2.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/HKHcrdH/server-3.png" alt="product image">
<img class="box zone" src="https://i.ibb.co/b7s4NPN/server-safe-2.png" alt="product image">
</div>
<div class="zone yellow">Footer</div>
</body>
</html>
css
.box {
box-sizing: border-box;
}
Here is some information about the box model that will help you understand why this might work
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model
Is it real to make such border through css?
I thought about
border: 3px solid white;
border-top: none;
and pseudo-element with gradient, but its not exactly the same.
You can do this by adding a pseudo-element with a gradient. transparent -> white -> transparent.
FIDDLE
CSS
div
{
width: 600px;
height: 200px;
border: 5px solid black;
border-radius: 20px;
position: relative;
margin: 50px;
}
div:before
{
content: '';
position: absolute;
top:-5px;
left:0;right:0;
margin:auto;
height: 5px;
width: 80%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(17%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
[Update: this can be done with a radial gradient, but Im no longer in front of my computer.]
I'm not sure that there's a border gradient (yet anyway), but I built something with nested s for you. Just an idea. It's just missing the solid white across the bottom. Hope it's helpful.
jsfiddle: http://jsfiddle.net/itsmikem/HfCT3/
css:
div {
position:relative;
}
#outer {
background: #cccc00;
width:200px;
padding:10px;
}
#mid {
border-radius:10px;
background: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 0%,#cccc00 50%,#ffffff 100%);
background: linear-gradient(to right, #ffffff 0%,#cccc00 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
padding:3px;
}
#inner {
/*width:100%;
height:100%;*/
background:#cccc00;
border-radius:10px;
padding:10px;
}
html:
<div id="outer">
<div id="mid">
<div id="inner">stuff
</div>
</div>
</div>
I have a pretty straight-forward navigation menu, and I'm trying to style one item differently than the others. However, only the background is applied while other things like border radius and link color are not.
This is the menu:
<div class="menu">
<ul>
<li>Page1</li>
<li>Page2 </li>
<li>Page3 </li>
<li class="extranav">Extra</li>
</ul>
</div>
These are the generic menu list styles:
.menu ul{ margin:0px; padding:0px;}
.menu ul li{ float:left; background:url(../images/sprator.png) right top no-repeat; padding-right:1px;}
.menu ul li a{display:block; padding:0px 23px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#fff; line-height:46px; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover{ display:block;background: #b04141; /* Old browsers */
background: -moz-linear-gradient(top, #b04141 0%, #c35151 39%, #c35151 62%, #c35151 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b04141), color-stop(39%,#c35151), color-stop(62%,#c35151), color-stop(100%,#c35151)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* IE10+ */
background: linear-gradient(top, #b04141 0%,#c35151 39%,#c35151 62%,#c35151 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b04141', endColorstr='#c35151',GradientType=0 ); /* IE6-9 */}
And this is what I'm trying to apply to the extra nav element:
.extranav a{
height:46px;
color:#FF0000;
line-height:46px;
display:block;
background: #206818; /* Old browsers */
background: -moz-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#024A00), color-stop(39%,#206818), color-stop(62%,#347C2C), color-stop(100%,#3E8636)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #024A00 0%,#206818 39%,#347C2C 62%,#3E8636 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* IE10+ */
background: linear-gradient(top, #024A00 0%, #206818 39%, #347C2C 62%, #3E8636 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
-moz-border-radius: 0px 0px 10px 0px;
-webkit-border-radius:0px 0px 10px 0px;
-khtml-border-radius: 0px 0px 10px 0px;
border-radius:0px 0px 10px 0px;
}
The background properties are applied properly, while other things like link color and border radius are not. Why is this happening and how do I fix it?
Fiddle: http://jsfiddle.net/68Vb6/
The border radius is not part of the style, you have a } that ends the style block before it.
Change this line:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */}
to:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#024A00', endColorstr='#3E8636',GradientType=0 ); /* IE6-9 */
The .menu ul li a selector is more specific than the .extranav a selector, so the settings in the first rule will take precedence. Change the selector to .menu ul li.extranav a to make it more specific.
I'm building a custom search bar with the following features:
Live-type filtering of data (the data is currently hard-coded in)
Up/down-arrowing through the dropdown list
Fixed-width search box with filter change (ID/Creator/Description/etc.)
Search button onclick event to pull search box data
It should look like this:
This is what it looks like in IE:
Firefox:
Chrome:
It's in the sandbox of my server, so you can check out the code there. Here's the HTML/CSS, though. I tried to 'fake' inline by floating to the left, but I'm getting some weird behavior.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Solr Search Prototype</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id='container'>
<div class='inline' id='refine'>Creator<div class="arrow-down"></div></div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div id='refineDropdown'><ul id='refineList'></ul></div>
<div id='dropdown'><ul id='list'></ul></div>
<ul id='hidden'></ul>
<br class="clearBoth" />
</div>
</body>
</html>
body {
margin:50px;
font-family:Arial, sans-serif;
font-size:13px;
}
div.inline { float:left; }
.clearBoth { clear:both; }
#refine {
margin-right:-3px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-left-radius:4px;
border-bottom-left-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#refine:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
#submit {
margin-right:-1px;
overflow:hidden;
white-space:nowrap;
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
border-top-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid #AAA;
height:12px;
padding:6px 6px 6px 6px;
text-align:center;
font-size:11px;
font-family:Helvetica, sans-serif;
color:#666;
text-shadow:0px 1px 0px #e8eae5;
}
#submit:hover {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
cursor:pointer;
}
.refineClicked {
background:white !important;
border-bottom-left-radius:0px !important;
border-bottom:none !important;
}
.arrow-down {
margin:0 0 1px 7px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #666;
}
#search {
margin-right:-5px;
padding:4px;
border:1px solid #AAA;
color:#444;
}
#search:focus { outline:none }
#refineDropdown {
position:relative;
margin-top:-3px;
padding:3px;
width:150px;
max-height:200px;
background:#fff;
border-left:1px solid #AAA;
border-right:1px solid #AAA;
border-bottom:1px solid #AAA;
word-wrap:normal;
overflow:auto;
}
#hidden { display:none }
#dropdown {
margin-top:-1px;
margin-left:50px;
padding:3px;
width:213px;
max-height:200px;
background:#fff;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
word-wrap:normal;
overflow:auto;
}
ul {
list-type:none;
margin:0;
padding:0;
}
li {
padding:5px 10px 5px 10px;
}
li:hover {
margin:-1px;
background:#E5F3FF;
border:1px solid #3366FF;
cursor:pointer;
}
.selected {
margin:-1px;
background: #E5F3FF;
border:1px solid #3366FF;
}
Tried on your test server and worked well. I changed html markup a bit.
Html
<div id='container'>
<div class='inline' id='refine'>Long test blah
<div class="arrow-down"></div>
</div>
<input class='inline' id='search' type='text' size='30' />
<div class='inline' id='submit'>Search</div>
<div class="hidden" id='refineDropdown'>
<ul id='refineList'></ul>
</div>
<div class="hidden" id='dropdown'>
<ul id='list'></ul>
</div>
<ul class='hidden'></ul>
<br class="clearBoth" />
Code / Live Example
I hope it suits to your need.
I'm trying to style my HTML buttons using CSS, so that they have the reflected shine like the icons on iOS devices' home page. Apple does this to icons automatically as shown here. I need something similar to the shine in CSS.
Take a look at this fiddle.
Here's the code:
HTML:
<div class="icon">
<div class="shine"></div>
</div>
And CSS:
.icon {
width: 150px;
height: 150px;
border-radius: 30px;
background: red;
float: left;
margin: 50px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.shine {
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0 ); /* IE6-9 */
height: 90px;
width: 150px;
box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 100px 40px;
border-bottom-left-radius: 100px 40px;
}
my example uses a background-color:red instead of an image, but just put any image as background in the #icon div and it should also work.
(btw I used this awesome site: http://www.colorzilla.com/gradient-editor/ for the gradients)
HTML:
<div class="icon">
<div class="shine">
</div>
</div>
CSS:
.icon {
width:50px;
height:50px;
background-color: red;
overflow: hidden;
position: relative;
}
.shine {
position: absolute;
top: -70px;
left: -25px;
width:100px;
height:100px;
border-radius: 50px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
Hope it works for you!