I've got the hover, active, and focus states covered, but when I click on my button and hold, I get another color (dark blue) that I can't seem to override. Is there some extra button state I don't know about?
https://jsbin.com/kutavovora/edit?html,css,output
.btn-primary {
background: #f00;
&:hover, &:focus, &:active, &.active {
background: #0f0;
}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="btn btn-primary btn-lg">Click and Hold</a>
</body>
</html>
That is happening because you are using Bootstrap, and it have defined the following styles:
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
color: #FFF;
background-color: #204D74;
border-color: #122B40;
}
EDIT:
If you want to override those styles, you only need to use a more specific selector (.btn.btn-primary instead .btn-primary only), like:
.btn.btn-primary {
background: #f00;
&:hover, &:focus, &:active, &.active {
background: #0f0;
}
}
your problem is because you are using bootstrap, which has active state styled here:
.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
background-color: #286090;
border-color: #204d74;
color: #fff;
}
so instead of you having this:
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
background: #0f0;
}
just change to this:
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active {
background-color: #0f0;
}
here is a snippet:
.btn-primary {
background: #f00;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
background-color: #0f0;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<a class="btn btn-primary btn-lg">Click and Hold</a>
</body>
Related
i added a new file for the CSS in VS code and wrote all the styles codes and wrote the link element in each page in the website but the CSS styles are not applied to the website
i was trying to apply a style for all pages and i was expecting it work normally
body {
background-color:#b3e6ee
}
hr {
border-style: none;
border-top-style: dotted;
border-color: grey;
border-width: 7px;
width: 6%;
}
img {
height: 200px;
}
h1 {
color: #66BFBF;
}
h3 {
color: #66BFBF;
}
here are the css file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> magzwebsite </title>
<link rel="stylesheet" href="css/style.css">
</head>
and here is the index.html file
You forgot the semicolon at the end of the first parameter in the body selector.
body {
background-color: #b3e6ee;
}
This should fix it.
Most buttons are meant to be easily clicked. The idea of a button is to have a simple, elegant way of getting around any web-page. It is one of humanities best inventions. But I have found a way to spoil it. For some reason, by adding a font awesome icon to a downdrop button menu, It makes the whole button stop working except for on the outer corner of it. Can anyone help me make the whole button work? What is going on?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><i class="fa fa-list-ul fa-3x"></i></button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
It turns out that the problem experienced can easily be solved. simply add a space, and then add your .dropbtn class to the icon class That is already there. Also, you will need to get rid of the fa-3x part. that is an added class member used to make the list icon bigger. but, you can also do that with a style="" that has a font-size of 3em.
When done, it should look something like this:
<i style="font-size: 3em;" class="fa fa-list-ul dropbtn"></i>
I'm a starter in css, and today i got a school task:
Here is this HTML code:
<head>
<meta charset="UTF-8">
<title>ABC</title>
<style>
/* CSS part */
</style>
</head>
<body>
<p>ABC</p>
</body>
My task is to color "A" letter to #ec407a
"B" to #ffb300
"C" to #26a69a without changing the html code.
How can i manage that?
Thank you guys!
Serious hack, but here you go
<style>
p {
color:#ffb300;
position: relative;
}
p:first-letter {
color: #ec407a;
}
p::after {
bottom: 0;
color: #26a69a;
content: 'C';
position: absolute;
transform: translate(-100%, 0);
}
</style>
<body>
<p>ABC</p>
</body>
https://jsfiddle.net/fqu9ppL4/1/
You could do this with mix-blend-mode if it was covered by most of the browsers, but unfortunately .. not yet.
So for the futur, this might be a way :
p {
margin:1em;
display:table;
position:relative;
background:white;/*
or hudge white inset white shadow to cut off colors
box-shadow:inset 0 0 0 100px white; */
}
p+p {
font-size:3em;
font-family:'Courier New', Courier, modern, monospace;
}
p:before {
content:'';
background:linear-gradient(to left, #ec407a ,33.33%, #ffb300 33.33%,#ffb300 66.66%, #26a69a 66.66%);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
mix-blend-mode:screen;
}
<p>What about a few more letters ?</p>
<p>WIW</p>
there is also
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
p {
font-size:3em; /* demo purpose any size */
display: table;
background: linear-gradient(to left, #ec407a, 33.33%, #ffb300 33.33%, #ffb300 66.66%, #26a69a 66.66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<p>ABC</p>
This would be a possible "solution" which is extremely hack-style and works only for the given characters in the given font.
p {
color: #ec407a;
display: inline-block;
font-size: 6em;
}
p:after {
background-color: white;
content: 'B';
color: #ffb300;
display: inline-block;
float: right;
position: relative;
left: -1.33em;
}
p:before {
content: 'C';
color: #26a69a;
display: inline-block;
float: right;
position: relative;
left: -1.335em;
}
<p>ABC</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ABC</title>
<style>
p::first-letter {
color: #ec407a;
}
</style>
<script type="text/javascript">
var text = "ABC";
var colors = new Array("#ec407a", "#ffb300", "#26a69a");
for (var i = 0; i < text.length; i++)
document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + text[i] + "</span>");
</script>
</head>
<body>
<p>ABC</p>
</body>
</html>
I am new to this, and have created a Twitter Bootstrap page, based on an MVC4 application.
In my layout, I start with this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="#Url.Content("~/scripts/jquery-1.9.1.min.js")" rel=""/>
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet"/>
<link href="#Url.Content("~/Content/Site.css")" />
<title>#ViewBag.Title</title>
</head>
<body>
<script src="~/scripts/jquery-1.9.1.min.js"></script>
<script src="../../Properties/../scripts/bootstrap.js"></script>
And then the rest of the page.
Within my Site.css, which is where I put my custom css, I have the following:
body {
margin-bottom: 80px;
}
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
.page-header {
margin-top: 0;
}
.panel-body {
padding-top: 0;
}
.featuredImg {
margin-bottom: 15px;
}
It seems none of my pages are using this CSS though. The body doesn't seem to add the margin...
If I used Firebug, and select the CSS tab, I see no reference to Site.css. Only to 'bootstrap.min.css'.
In design time, the path to my CSS file seems right, as I can click it in the designer, and it takes me to the css file.
It just seems not to load it at runtime.
Is there a fault I am doing?
Try adding rel to your link tag
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" />
I have a logo name called Example.
I want the Exam to be blue and the le to be red.
I know you can use :first-letter but I need to change up to 4 characters. It's the only thing stopping me from making a pure CSS logo instead of using an image.
You could split the single (what i assume is a span) into 3 separate spans.
<span class="blue logo">Exam</span><span class="logo">p</span><span class="red logo">le</span>
then your css could look something like this
.blue {
color: blue;
}
.red {
color: red;
}
.logo {
font-size: 33px;
font-family: Helvetica;
}
<!doctype html>
<html>
<head>
<title></title>
<style>
h1 {
font-size: 0;
}
h1:before {
content: 'Examp';
color: #0000ff;
font-size: 32px;
}
h1:after {
content: 'le';
color: #ff0000;
font-size: 32px;
}
</style>
</head>
<body>
<h1>Example</h1>
</body>
</html>
Assuming you can modify the markup, you could just re-wrap the text:
<span class="branding-highlight">Exam</span>ple
.branding-highlight {color:red;}
CSS does not have mechanics for accessing n-th everything just yet. And if it will, it will take time for browsers to adopt it - the sample above would remain best supported.
Its possible even without modifying the markup:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
display: inline-block;
margin: 0;
line-height: 1em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 100px;
background: linear-gradient(to right, #1c87c9 50%, #8ebf42 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h1>R</h1>
<p>This is a character with half-style.</p>
</body>
</html>
Hey i think you want to this as like
This is css Part
.logo{
font-size: 33px;
font-family: Helvetica;
color:red;
}
.logo > span{
color:blue;
}
This is HTML Part
<div class="logo">
Exam
<span>ple</span>
</div>
and now check to live demo http://jsfiddle.net/SyPfG/
I know you have already accepted an answer, but I figured I would contribute this method using jQuery, as it may be useful to you or future readers of this question.
HTML:
<span class="logo">Example</span>
CSS:
.logo{
color:blue;
}
jQuery:
$('.logo').each(function() {
$(this).html(
$(this).html().substr(0, $(this).html().length-3)
+ "<span style='color: red'>"
+ $(this).html().substr(-3)
+ "</span>");
});
DEMO
You can use this Method as O.V suggested!:
<div id="logo"><span style="color:red">Exam</span><span style="black">p</span><span style="blue">le</span></div>