I am trying to get the same effect as the example below, whereby you click a button the button background changes to red but on release it changes back to the default background color check example below and click the C OR = button to see the effect.
Example source
const demoBtn = document.getElementById("demo");
demoBtn.classList = "demo";
function myDemo() {
switch(event.type) {
case "mousedown":
demoBtn.style.cssText = "background: #F00; color: #fff;";
break;
case "mouseup":
demo.style.cssText = "background: #DCADB0; color: #F00";
}
}
demoBtn.addEventListener("mousedown", myDemo);
demoBtn.addEventListener("mouseup", myDemo);
:root {
--color: #F00;
--background: #DCADB0;
}
.demo {
color: var(--color);
background: var(--background);
padding: 10px 20px;
border: none;
border-radius: 4px;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta https-equiv='X-UA-Compatible' content='IE-EDGE'>
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="demo">Click</button>
<script src='script.js'></script>
</body>
</html>
Related
This question already has answers here:
CSS :first-letter not working
(3 answers)
Closed 12 months ago.
Want to make capitals letters by default generated by website . I have a problem my code make first letter capital in other else but in attachemnt and span it doesn't work . i make it in * becouse in attachment body doesnt work. I want do it only for first word in every seqience Here is my co
#import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100&display=swap");
/*
*/
body {
background: rgb(43, 42, 42);
color: aliceblue;
font-family: "Noto Sans JP", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::first-letter {
text-transform: capitalize;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<link rel="stylesheet" href="style.css" />
<!-- shortcut icon / title-->
<title>AAAA</title>
<link rel="icon" sizes="any" href="images/skyview.jpg" />
</head>
<body>
<div>
<h1>first letter big</h1>
<h1>first letter big</h1>
no big first letter
</div>
<span>no big first letter</span>
</body>
</html>
de
css selector ::first-letterdoesn't work on inline element as span
one way to solve your issue is to apply display:block or display:inline-block on wanted element
#import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght#100&display=swap");
/*
*/
body {
background: rgb(43, 42, 42);
color: aliceblue;
font-family: "Noto Sans JP", sans-serif;
}
span, a {
display:block;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*::first-letter {
border: solid red 1px;
text-transform: capitalize;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- style -->
<link rel="stylesheet" href="style.css" />
<!-- shortcut icon / title-->
<title>AAAA</title>
<link rel="icon" sizes="any" href="images/skyview.jpg" />
</head>
<body>
<div>
<h1>first letter big</h1>
<h1>first letter big</h1>
no big first letter
</div>
<span>no big first letter</span>
</body>
</html>
Here is a example HTML page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Test iframe</title>
<style type="text/css">
#node1 {
color: red;
}
#media only screen {
#node2 {
color: blue;
}
}
#media only print {
#node2 {
color: yellow;
}
}
</style>
</head>
<body>
<div id="node1">Hello</div>
<div id="node2">World</div>
</body>
</html>
When using cefsharp to open the page and use webbrowserextensions::printtopdfasync to print it to PDF, I want the color of #node2 is blue. But actually, the color is black.
Is there any way to make the css for screen media type to function in the printed PDF?
I am just learning less.I have my html file like this
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title>.::LESS::.</title>
<link rel="stylesheet" type=text/css"" href="style.less" />
<script type="text/javascript" src="less.js"></script>
</head>
<body>
<div class="box1">This is box1</div>
<div class="box2">This is box2</div>
<div class="box3">This is box3</div>
</body>
</html>
and my style.less file is like this
#blue : #00c;
#light-blue: #blue + #333;
#deep-blue: #blue - #333;
.box1 {
background-color: #blue;
}
.box2 {
background-color: #light-blue;
}
.box3 {
background-color: #deep-blue;
}
But after all this when I am going to check the html page from the browser it is not showing anything.If I am changing the values of background-color to any color values then the background color can be seen over there.Can some one tell me where is the wrong part?Any help and suggestions will be welcome.Thanks in advance.
You are missing an # for light blue. Is this how it is supposed to look like?
Your code compiles correctly to
.box1 {
background-color: #00c;
}
.box2 {
background-color: #3333ff;
}
.box3 {
background-color: #000099;
}
However, the following line you wrote:
<link rel="stylesheet" type=text/css"" href="style.less" />
should be:
<link rel="stylesheet/less" type="text/css" href="style.less" />
Try this and check again if it works.
I have the following simple page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div#card
{
border: 1px solid black;
width: 65mm;
height: 65mm;
}
div#circle
{
width: 20mm;
height: 20mm;
-webkit-border-radius: 10em;
border: 1px solid black;
margin-top: 5mm;
}
</style>
</head>
<body>
<div id="card"></div>
<div id="circle"></div>
</body>
</html>
When printing the page, I expect it to output a 65mm square, but it is 70mm and the circle is also a bit bigger than 20mm. How to ensure an exact printing size?
Thanks.
To make our web page print-friendly, we need to use separate css for print like:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
The above css will be applicable for only at the time of printing web pages.
Please refer the following links for more details:
http://webdesign.about.com/cs/css/a/aa042103a.htm
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm
http://envisionic.com/webtips/user_experience/printer_friendly.php
I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.
a.upb_add_bookmark {
background: none repeat scroll 0 0 #E8BD61;
border-color: #C79324;
border-style: solid;
border-width: 1px;
color: black;
padding: 2px 5px;
text-decoration: none;
}
Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.
a.upb_add_bookmark {
background: url('favorites-image.jpg') no-repeat;
display: inline-block;
height: 51px;
width: 92px;
}
Thats how you can display an image without actually using an <img> tag; nothing but css.
<img src="image.png" alt="Favorite icon" />
or
a {
background-image: url('image.png');
background-repeat: no-repeat;
display: inline-block;
height: 50px;
width: 150px;
}
Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.
A very simple way to fix this problem
** 1. Create a div element that will encapsulate this image **
** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'
.button
{
backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
Revise the Html *
Put the text you want to display into the aforementioned div with the class name 'button'
<div class="button">
<span>Favorite (1)</span>
</div>
* This will allow you to select the actual text while still maintaning the background *
Here is the complete version source with my modification for your reference.
<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
<head>
<style>
.button
{
background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
height: 50px;
width: 92px;
}
.button a
{
display: inline-block;
height: 50px;
}
</style>
<title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">
<meta content="CloudApp" name="author">
<link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">
<!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
<![endif]-->
</head>
<body id="image">
<header id="header">
<h1>Simple sharing</h1>
<h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>
<a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>
<section id="content">
<div class="button">
<span>Favorite (1)</span>
</div>
</section>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>
a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}
This code works for me