http://www.youtube.com/
You see the "search buttoN". it's really nice.
Just look at their CSS.
.yt-uix-button {
height:2.0833em;
border:1px solid #ccc;
background:#f6f6f6;
background-image:0;
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
white-space:nowrap;
vertical-align:middle;
cursor:pointer;
overflow:visible;
padding:0 .5em;
}
.yt-uix-button:hover {
-webkit-box-shadow: #999 0px 0px 3px;
background: #F3F3F3 -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#EBEBEB));
border-color: #999;
outline: 0px;
}
You could use jQuery UI button. That will get you most of the way, then you just need to customize a theme to get the look and feel.
Here's a good theme to get you most of the way there.
A combination of background images, colors, and borders.
Depends on how portable you want it to be.
Firefox 3.5 introduced the -moz-box-shadow tag, which you could put into a hover attribute.
It does a few neat CSS3 things, such as
Gradient: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 #F6F6F6
Border Radius: 3px 3px 3px 3px
And it looks like a box shadow on :hover
You can try Zurb css
.awesome{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}
Related
I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;
I'm looking to achieve this multiple underline effect and figured out that using box-shadows would be the best way to do it. Specifically, I tried doing this and was successful:
I used the following CSS to do it:
h1{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
float: left;
}
However, I'd like to achieve an effect to turn specific underlines on and off as required. So I came up with this and added the classes to my HTML:
h1{
float: left;
}
.red{
box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}
But the effect that it produced was this:
I tried adding the classes in different orders and also adding them dynamically using JavaScript, but I am still getting the same result. Am I doing anything wrong, or is there an alternative way to achieve the turn-on turn-off effect?
This could be accomplished with pseudo elements:
h1 {
display:inline-block;
border-bottom:2px solid #e8353b;
position:relative;
}
h1:before {
content:"";
height:2px;
width:100%;
background:#2762be;
display:block;
position:absolute;
bottom:-6px;
}
h1:after {
content:"";
height:2px;
width:100%;
background:#a3514f;
display:block;
position:absolute;
bottom:-10px;
}
<h1>Hello there</h1>
An interesting way using <span>s :)
You can add as many <span> as you want and just extend the colors palette in CSS:
.borders {
display: inline-block;
}
.borders span {
display: block;
height: 2px;
margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */
<h1 class="borders">
Hi there
<span></span>
<span></span>
<span></span>
</h1>
Or if you need only 3 borders and you don't want to insert additional HTML elements:
use a border-bottom for your first class, than :before on your second class and :after on your third class.
h1 {
position: relative;
display: inline-block;
}
.red{
box-shadow: 0 2px 0 red;
}
.blue:after, .green:before{ content: ""; position: absolute; width: 100%; left: 0; }
.blue:after{
bottom: -6px;
border-bottom: 2px solid blue;
}
.green:before{
bottom: -10px;
border-bottom: 2px solid green;
}
<h1 class="red blue green">Hi there</h1>
You can use linear-gradient, which will be fully transparent.
Note, when combine classes as you did, they doesn't merge those values, the last property set on an element will overwrite any previous, whether they are set in classes with different names or not, hence your line becomes all brown.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green),
linear-gradient(to right, transparent,transparent);
}
h1.blue{
background-image:
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, transparent,transparent),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can easily re-position the lines and close any gap by simply leave out the line you don't want.
body {
background: lightgray
}
h1{
float: left;
padding-bottom: 8px;
background-size: 100% 2px; /* thickness 2px */
background-repeat: no-repeat;
background-position:
left bottom, left bottom 4px, left bottom 8px; /* gutter 2px */
background-image:
linear-gradient(to right, blue, blue), /* bottom line */
linear-gradient(to right, green, green), /* middle line */
linear-gradient(to right, red, red); /* top line */
}
h1.red{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, green, green);
}
h1.blue{
background-image:
linear-gradient(to right, green, green),
linear-gradient(to right, red, red);
}
h1.green{
background-image:
linear-gradient(to right, blue, blue),
linear-gradient(to right, red, red);
}
<h1>Hello there</h1>
<h1 class="green">Hello there</h1>
<h1 class="red">Hello there</h1>
<h1 class="blue">Hello there</h1>
You can actually do this with only 1 pseudo-element.
Here's what I've done (with comments on how to control spacings):
h1 {
display: inline-block;
/* controls the last line */
border-bottom: 2px solid #a3514f;
}
h1:after {
content: "";
display: block;
/* controls space between 1st and 2nd line */
height: 2px;
width: 100%;
/* controls space between 2nd and 3rd line */
margin-bottom: 2px;
border-bottom: 2px solid #2762be;
border-top: 2px solid #e8353b;
}
<h1>Hello there</h1>
This was written based on #APAD1's answer, taking his idea of using borders.
This method offers the advantage of the whole ::after being part of the content of the <h1>, instead of being outside.
You can add up to five lines using pseudoelements and borders.
Each class adds a new line.
*,
*:before,
*:after {
box-sizing: border-box;
}
h1 {
display: inline-block;
padding-bottom: 2px;
position: relative;
}
h1:before,
h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 6px;
bottom: -10px;
}
h1:after {
bottom: -18px;
}
.one {
border-bottom: 2px solid red;
}
.two:before {
border-top: 2px solid blue;
}
.three:before {
border-bottom: 2px solid green;
}
.four:after {
border-top: 2px solid brown;
}
.five:after {
border-bottom: 2px solid orange;
}
<h1 class="one two three four five">Lorem ipsum</h1>
Just trying to get as many lines as posible, using pseudos, borders, shadows ...
You get up to 9 lines, that can be set / unset with 9 independent classes.
Some of them need will only work against a solid, known background-color (white in this case)
.base {
font-size: 60px;
position: relative;
display: inline-block;
}
.base:before,
.base:after {
content: "";
position: absolute;
left: 0px;
width: 100%;
height: 10px;
padding: 10px 0px;
background-clip: content-box;
}
.base:before {
bottom: -90px;
}
.base:after {
bottom: -170px;
}
.a {
border-bottom: solid 10px lightgreen;
}
.b {
box-shadow: 0px 10px white, 0px 20px green;
}
.c:before {
border-top: solid 10px lightblue;
}
.d:before {
background-color: red;
}
.e:before {
border-bottom: solid 10px yellow;
}
.f:before {
box-shadow: 0px 10px white, 0px 20px green;
}
.g:after {
border-top: solid 10px tomato;
}
.h:after {
background-color: magenta;
}
.i:after {
border-bottom: solid 10px gray;
}
.j:after {
box-shadow: 0px 10px white, 0px 20px brown;
}
<h1 class="base a b c d e f g h i j">Hello world</h1>
I have this code that will display notification circle:
HTML:
<div class="icon-container">
<span class="glyphicon glyphicon-list-alt">
<span onclick="showDetails(this)" id="MyControl" data-counter="2"></span>
</span>
</div>
CSS
[data-counter]:after {
content: attr(data-counter);
position: absolute;
top:-3px;
right: -14px;
padding: 3px 9px;
border: 2px solid white;
border-radius:100px;
background: linear-gradient(top, #FF6969 0%,#ff0000 100%);
background: -webkit-linear-gradient(top, #FF6969 0%,#ff0000 100%);
background: -moz-linear-gradient(top, #FF6969 0%,#ff0000 100%);
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
background-clip: padding-box;
font:bold 12px/18px "Helvetica Neue", sans-serif;
color: white;
text-decoration: no;
z-index: 1;
}
Output
My question is how do I hide the notification circle if data-counter="0" or data-counter=""
Thanks in advance
[data-counter="0"]:after,
[data-counter=""]:after {
display: none;
}
I guess this would do the trick?
I have a div with tt ID and I write code in JavaScript to add title attribute (tooltip) at runtime code given as:
$("#tt")
.css("left", (mouse.x - 240) + "px")
.css("top", (mouse.y - 258) + "px")
.attr("title", title)
.tooltip('show');
Now I want set color at title attribute. Please suggest me how to make it work.
I am currently using this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
/* Change Blocked with the title you are loo*/
<script>$(document).ready(function(){
$("div[title*='Blocked']").css("background-color", "yellow");});
</script>
/* Everything with the text Blocked in the title will change color*/
<div title="Blocked ality">One</div>
<div title="Blocked">Two</div>
If I understand correctly, you want to change the color of the native title...
Here is a CSS3 way to do that
http://jsfiddle.net/dimshik/tDQWN/8662/
source: https://css-tricks.com/css-content/
body {
padding: 10px;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: red;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
<p>Here is some text and a LINK
with a red title on it. </p>
<p> And here is another one Link eleifend leo.</p>
I have this CSS:
#top-nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
text-align:right;
background: #eeeeee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width:100%;
}
#top-nav li {
float: left;
}
#top-nav #customer-login, #top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #reseller-login {
border-right: 1px solid #666666;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #666666;
text-shadow: 0 1px 0 #fff;
}
#top-nav #customer-login-trigger, #top-nav #reseller-login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#top-nav #customer-login-trigger:hover, #top-nav #reseller-login-trigger:hover,
#top-nav #login .active {
background: #fff;
}
#top-nav #customer-login-content, #top-nav #reseller-login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
text-align:left;
z-index: 999;
background: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
background-image: -webkit-linear-gradient(top, #fff, #eee);
background-image: -moz-linear-gradient(top, #fff, #eee);
background-image: -ms-linear-gradient(top, #fff, #eee);
background-image: -o-linear-gradient(top, #fff, #eee);
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}
#top-nav li #customer-login-content, #top-nav li #reseller-login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}
#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #d14545;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
background-image: -webkit-linear-gradient(top, #e97171, #d14545);
background-image: -moz-linear-gradient(top, #e97171, #d14545);
background-image: -ms-linear-gradient(top, #e97171, #d14545);
background-image: -o-linear-gradient(top, #e97171, #d14545);
background-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}
#login #submit:hover,
#login #submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
background-image: -webkit-linear-gradient(top, #d14545, #e97171);
background-image: -moz-linear-gradient(top, #d14545, #e97171);
background-image: -ms-linear-gradient(top, #d14545, #e97171);
background-image: -o-linear-gradient(top, #d14545, #e97171);
background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
but i can't get the links to align right
here is a fiddle with the full code:
http://jsfiddle.net/F7Kdy/
EDIT: This works but reverses the order of the lis. Use Jay Harris' answer.
You just need to set your lis to float:right like so:
#top-nav li {
float: right;
}
Even if their parent ul is set to float: right, they need to be set that way as well.
Remove the float attribute, since you are aligning it by the parent. And make sure the elements are inline with display: inline-block.
Note: if you add float: right;, you will change the order of the listed elements. thus making everything backwards.
#top-nav li {
display: inline-block;
}
JSFIDDLE
Make the
#top-nav li {
float: right;
}
Updated fiddle