Is there any way to increase the intensity of the bold-ness of apply it twice?
I am using this styling on my text:
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
Is it possible to make it double/more bold without increasing the font size?
You can slightly adjust the thickness by setting numerical values at the property fontWeight.
Besides bold the property fontWeight can also handle numerical values, such as 100 for very thin and 900 for very thick.
As far as I know, fontWeight: 'bold' has the numerical value fontWeight: '700'.
So:
fontWeight: '900' should be slightly thicker than fontWeight: 'bold'
Well, it's not the "double" what you actually ask for, but maybe this helps you a bit.
Source: https://www.w3schools.com/cssref/pr_font_weight.asp
If you want to have a text "bolder" than fontWeight: '900' you will have to use "visual cheats", e. g. another font-family or text-shadow.
Here is some sample:
<div style="font-weight:900;">I am the highest font-weight value 900</div>
<div class="doublethick">But I am even thicker :)</div>
<style>
.doublethick {
color:#000000;
text-shadow: 0.5px 0 #000000;
letter-spacing:1px;
font-weight:bold;
}
</style>
you can use text shadow property like this
<h1 style="text-shadow: 2px 0px 1px #000;">This is h1 tag</h1>
For making a number double bold you can use this code
numbers: {
font-size: 30;
color: hex;
font-weight: 800;
}
I think it will work.
Related
I am having trouble styling html form elements in Next.js. I cannot get the CSS to work using a simple class name from the imported CSS stylesheet, but I have had success with inline styling using
style={{
width: "300px",
height: "50px",
paddingLeft: "10px",
paddingTop: "5px",
border: "none",
}}
The problem is, when I select the form it adds an unwanted inner border. I need to add an input:selected {border: "none"} styling. I read this is a limitation with inline styling and I would have to use a CSS-in-JS library. It just so happens Next.js has a built in library that does this. Unfortunately, using the library is not able to override and style my input. I have tested and have had success on other elements with this library, however, the input element is not working. Here is what I have:
<form className="subscribeInput" style={{ paddingBottom: "100px" }}>
<input
style={{}}
type="text"
id="email"
name="email"
placeholder=" Email Address"
/>
<style jsx>{`
subscribeInput input[type="text"] {
width: "300px";
height: "50px";
padding-left: "10px";
padding-top: "5px";
border: "none";
}
`}</style>
<button
style={{
width: "100px",
height: "50px",
borderColor: "white",
paddingLeft: "10px",
paddingTop: "5px",
backgroundColor: "black",
marginLeft: "20px",
color: "white",
}}
type="submit"
>
{" "}
Signup{" "}
</button>
</form>
Whereas I have tried a few variations of the selector:
subscribeInput {}
subscribeInput input {}
input {}
input[type="text"]
Lastly, in case if this is related, my border box on my submit button will not go fully "white" as instructed. Instead it is white on the top and left borders and light gray on the right and bottom borders. I have included a screenshot with the issues presented. It has the added inline styling with the inner border that presents itself after selected as well as the gray border issue.
In your global css you can add the code below to remove borders on input or textarea focus:
textarea:focus, input:focus{
outline: none;
}
You can make it's color transparent by adding focus:ring-transparent to className.
How can I make a textarea which has the stylesheet of the web page inside it?
I want to make a web page which a user can customize its <style> settings by editing text inside a textarea.
Here's what I have done so far; inside the <textarea> of this code snippet is the editable text which I intend to make it function as the web page's stylesheet, but I'm not sure how to make it work.
I did many web search looking for solutions, but could not find useful help regarding this particular function. Any help will be appreciated.
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = "document.getElementById('input').value;";
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">p {
font-family: monospace;
font-size: 15px;
}
</textarea>
You're very close, but your code has 2 problems.
document.getElementsByTagName returns an array, so you need to select the first element of the array using [0].
You are not actually getting the input element, you're just using a string of the code you want to run (i.e. you want to run the code document.getElementById('input').value but you've put quotes around it, which turns it into a string).
This updated version should work:
function myFunction() {
document.getElementsByTagName("style")[0].innerHTML = document.getElementById('input').value;
}
<p>sample text</p>
<textarea id="input" oninput="myFunction()" rows="5">html {
font-family: monospace;
font-size: 15px;
}
</textarea>
Another possibility is to use inline styles with the display style set to "block" and the contenteditable attribute set to "true".
Example:
<div>
<style style="
display: block;
padding: 0 0.5rem;
border: 1px solid black;
border-radius: 4px;
white-space: pre;
font-family: 'Courier New', Courier, monospace;
font-size: small;
"
contenteditable="true">
#myDiv {
height: 100%;
--l1: repeating-linear-gradient(-60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
--l0: repeating-linear-gradient(60deg,
transparent 0,
transparent 5px,
rgba(210, 180, 140, 0.5) 0,
rgba(210, 180, 140, 0.5) 35px);
background: var(--l1), var(--l0);
}
</style>
<div id="myDiv"></div>
</div>
This will directly allow to edit and alter the contents of the style definitions by the user, without the direct possibility to save the modifications.
I was wondering if it is possible to change multiple CSS attributes of an element with one line?
Right now if I have an element and try to change some CSS attributes, then I have to write one line of code for each css attribute. For example:
$("div#start").click(function(){
$("p#message").css("background-color", "red");
$("p#message").css("color", "white");
$("p#message").css("padding", "5px");
$("p#message").css("width", "120px");
$("p#message").css("text-align", "center");
});
div#start {
background-color: #D8D8D8;
border: 1px solid black;
width: 50px;
text-align: center;
}
div#start:hover {
cursor: pointer;
background-color: #A1A1A1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="message">Hi Folks</p>
<div id="start">Change CSS</div>
As you can see in my example above, I am writing one line for each CSS attribute. Is is possible to accomplish this with a single command? For example something like this:
$("p#message").css(
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
);
Pass the object to the css(). The code is missing { and }.
$("p#message").css({
"background-color": "red",
"color": "white",
"padding": "5px",
"width": "120px",
"text-align": "center"
});
As the styles are fixed, i'll suggest to make a CSS class and add the class.
$("p#message").addClass('myClass');
CSS:
.myClass {
background: red;
color: white;
padding: 5px;
width: 120px;
text-align: center
}
Use an object as the argument for setting multiple CSS properties.
$("p#message").css({
"background-color":"red",
"color":"white",
"padding":"5px",
"width":"120px",
"text-align":"center"
});
you can write in one line like that :
$("p#message").css("background-color","red").css("color","white").css("padding","5px").css("width","120px").css("text-align","center");
}
Is it possible to run a single line of text wrapped in a single tag, and then output it with a background colour, breaks into multiple lines encased in a box, and these boxes are translucent that overlapped each other?
I have a demo in JSFiddle >here<.
<div class="wrap">
<p><b>Live a good life. If there are gods and they are just,</b>
</p>
<p><b>then they will not care how devout you have been,</b>
</p>
<p><b>but will welcome you based on the virtues you have lived by.</b>
</p>
<p><b>~Marcus Aurelius</b>
</p>
</div>
That up there is what I wanted to accomplish in terms of looks, but it is not what I wanted to accomplish in terms of markup.
I needed partcularly this line to break into seperate boxes that overlap:
<blockquote class="blue-tape">Live a good life. If there are gods and they are just,
then they will not care how devout you have been,
but will welcome you based on the virtues you have lived by.
Now how do I split these into boxed lines? ~Marcus Aurelius</blockquote>
Is this still a CSS3 job, or do we need to use JQuery now?
(CSS for all of it)
.wrap {
width:100%;
text-align:center;
}
p {
display:block;
}
b {
display:inline-block;
background-color: rgba(78, 145, 220, 0.5);
color: #55349E;
font-weight:100;
padding:10px 1% 18px;
margin:-10px auto;
white-space:pre-wrap;
text-align:center;
}
.blue-tape {
text-align: center;
font-weight: 100;
font-size: 14px;
color: #fff;
display: block;
background-color: rgba(78, 145, 220, 0.5);
line-height: 1.6677547em;
width:80%;
margin: 0 auto;
white-space: pre-wrap;
}
You can use a span with a background color and extra line-height, to achieve the desired effect: (Fiddle)
CSS
span {
background-color: rgba(78, 145, 220, 0.5);
line-height:180%;
padding:.5em 0em;
}
HTML
<span>Live a good life. If there are gods and they are just, then they will not care how devout you have been, but will welcome you based on the virtues you have lived by. Now how do I split these into boxed lines?</span>
Becomes:
I am pulling my hair out currently, because Cufon is either playing up, or I'm thinking too complicated. I have a span link class, which includes text inside it. The colour of the font inside the a span should change on hover state.
Cufon.replace('.info-grid a span', { fontFamily: 'Vegur', hover: true, color: 'white', hoverables: { a: true, span: true } });
With the above code, when you open the site, the font is white. I assume it's because the above code doesn't actually set the hover state, but how can I set it? I tried setting .info-grid a:hover span class but it didn't work.
CSS...
.info-grid a span {
position: relative;
left: 10px;
top: 80px;
font-size: 0.94em;
line-height: 1.3em;
font-weight: bold;
text-transform: uppercase;
color: #009FD4;
background-color: #ffffff;
}
.info-grid a:hover span {
color: #fff;
background-color: #009FD4;
}
HTML
<div class="info-panel" id="info-firstteam">
<h3>First Team</h3>
<div class="info-grid">
<div>
<a href="../players/profiles/1.html" class="pic-no1">
<p id="nametext"><span id="firstline">James</span><br><span id="secondline">Tillotson</span></p>
</a>
</div>
<div>
...additional divs for players
</div>
</div>
You probably wanted to setup color as part of :hover styling, right? In that case you should put this rule inside hover property, like this:
Cufon.replace('.info-grid a span', {
fontFamily: 'Vegur',
hover: {
color: 'white'
},
hoverables: { a: true, span: true }
});
It's said in the documentation, however...
Nesting :hover-enabled elements is unrecommended and may lead to unpredictable results.
... and the way I see it, this notice should be accounted in your case. So maybe it's best to depend on :hover state of a only for changing the colors, replacing the code with this:
Cufon.replace('.info-grid a', {
fontFamily: 'Vegur',
hover: {
color: 'white'
}
});
... as <a> elements are 'hoverable' by default.