I have problem linking a CSS file from another folder (project structure & link tag in the picture below). I have read many SO questions about this but nothing can make my linking work. Am I blind or is there something I missed?
Edit: Add files content:
index.html
...
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="src/assets/css/style.css" />
<!-- this works fine
<style>
body {
background: rgb(100,0,255);
background: linear-gradient(0deg, rgba(100,0,255,1) 0%, rgba(100,0,255,1) 30%, rgba(255,255,255,1) 100%);
background-attachment: fixed
}
</style>-->
</head>
...
style.css
body {
background: rgb(100,0,255);
background: linear-gradient(0deg, rgba(100,0,255,1) 0%, rgba(100,0,255,1) 30%, rgba(255,255,255,1) 100%);
background-attachment: fixed
}
Because your project is actually a React project, so you have to import CSS file in App.js.
For example, assuming that your global.css is located in /styles directory,
you have to import it in App.js.
./styles/global.css
body {
background: rgb(100,0,255);
background: linear-gradient(0deg, rgba(100,0,255,1) 0%, rgba(100,0,255,1) 30%, rgba(255,255,255,1) 100%);
background-attachment: fixed
}
./App.js
import './styles/globals.css';
function App(props) {
}
Ok so apparently it is because my project is actually a React project so the CSS had to be imported in App.js
Related
I designed a web page using bootstrap studio and all the style attributes are inline. I want to change this and add these to a separate css file. I have trouble doing that, because when i add the image as 'background-image:url('img/pic.jpg'); it doesn't show up. And i don't know how to convert all the following attributes . The following is the code.
<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">
for example what I want is ,
if html code is <div class="intro" style="width:500px;height:400px;">
the code for the separate css should be
.intro
{
width:500px;
height:400px;
}
You can write it in your css file as you did in your question
.intro
{
width:500px;
height:400px;
}
But note to use the right class name in your example it would be
<div class="intro-body"> // and not "intro"
.intro-body {
background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url("assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body">"</div>
Then in your .html file you have to include the css file. Add the following line in the head section of your html document.
<link rel="stylesheet" href="yourstyle.css">
Note: Be careful at the href attribute it depends on the filestructure you have in your project.
For instance when your index.html file is in the base folder and the css file is in the directory /styles
index.html
styles
yourstyle.css
Then you have to write
<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file
just copy the inline css and paste this code in css with your class sector .intro-body
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<div class="intro-body"></div>
I think you have put css in seperate folder so you are having this issue.
After Separating your css, Change url to relative values.
ie. url('img/pic.jpg') to url('./img/pic.jpg')
.intro-body {
width:500px;
height:400px;
background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
<body >
<div class="intro-body"></div>
</body>
create separate css file and include your css file to html page as follows.
<link rel="stylesheet" href="mystyle.css">
add your css to that file as shown below.
.intro-body {
/*your css goes here*/
}
if the folder structure is :
FolderProject/css/style.css for the css
FolderProject/index.html for the html
FolderProject/assets/img/
The css file:
.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url("../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137") right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}
index.html:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="intro-body">
</div>
</body>
</html>
I need to create a colour picker for a site which wouldn't be a problem, but I want to essentially have a slider that picks colours from this range:
How would I go about this?
I can imagine something similar to this. It could probably use some (a lot) of tweaking, but that's the gist of it:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#color_picker {
background: #e8f230; /* Old browsers */
background: -moz-linear-gradient(left, hsla(63,88%,57%,1) 0%, hsla(0,0%,0%,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(63,88%,57%,1)), color-stop(100%,hsla(0,0%,0%,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* IE10+ */
background: linear-gradient(to right, hsla(63,88%,57%,1) 0%,hsla(0,0%,0%,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8f230', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
height: 30px;
}
</style>
</head>
<body>
<div id="color_picker"></div>
<div id="target">Test</div>
<script>
var picker = color_picker;
var result = target;
picker.onclick = function(e) {
console.log(e);
result.style.backgroundColor = "hsl(63, 88%, " + (50 - ((e.offsetX/picker.clientWidth) * 50)) + "%)";
}
</script>
</body>
</html>
If you can transfer this image into CANVAS, you can pick the color from here.
See:
Looking for a jQuery plugin to pick a color from an image?
If you want straight HTML, you could use the MAP tag and pass the relevant value using HTML-GET... Otherwise, a bit of JavaScript perhaps?
Have you actually looked around for existing code?
Here's something: http://www.w3schools.com/tags/ref_colorpicker.asp
From comments:
w3schools is a wrong and misleading site. You shouldn't use it as
reference for any sort of language. For PHP, there's the PHP Manual,
for JavaScript, there's Mozilla Developer Network (or MDN). See
w3fools.com to further understand why you should never use w3schools.
Fair enough. It was simply an example. It's faster to find source code on google than to press the "Ask Question" button on stackoverflow. Here's another: http://jscolor.com/ with directly linked LGPL source code. Modify to suit your purposes.
So I'm trying to color a div part of my html with a background gradient that i got from a color generator but for some reason this code won't work.
I'm following css/html tutorials and i'm replicating what their doing but it's not working out for me when i make my own tweaks. See my code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Let's Play</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainbg">this part should have a colored gradient</div>
</body>
</html>
my css is..
<style type ="text/css">
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
</style>
not even a plain background is showing up.. thanks in advance
Remove the <style type ="text/css"> and </style> tags from your CSS file leaving you with:
#mainbg{
background: -webkit-linear-gradient(left, #e4efc0 0%,#abbd73 100%); /* Chrome10+,Safari5.1+ */
/* background-color: rgb( 149, 206, 145); */
}
You say that your css is:
<style type ="text/css">...
I think the style tag is causing the issue as I don't see anything wrong with your css code.
This seems to cover just about everything with regards to css3 gradients.
You will definitely want to add:
-moz filter
-ms-filter
-ms-
-o-
etc.
I am in the process of learning HTML.
What is the best way to create a gradient background for an HTML page?
So far this is what I have as a background:
body style="background-color:Powderblue"
I know this is not a gradient.
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
If you'd like to read some more about CSS3 gradients, read this article
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
Styling in external sheets is a much easier, faster and more efficient way to style your web pages especially if you have several pages that link to your style sheet(s). This allows you to change the entire styling of all of your pages at the same time with one line of code. It is ok however if you have a single page that you have up or if you need a simple page to look different by itself, inline styling is sufficient but not common. See below for quick example.
(inline styling for each page)
<!doctype html>
<html>
<head>
<title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
<style="text/css">
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
</style>
</head>
<body>
</body>
</html>
....or it would b like this
<!doctype html>
<!doctype html>
<html>
<head>
<title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
<link rel="stylesheet" href="/cssfolder/yourcssheet.css" />
</head>
<body>
</body>
and your "yourcssheet.css" style sheet would look like this
/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT #meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/
body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
h1 {text-align: center, font-weight: bolder;}
p {text-indent: 20px; line-height: 25px;}
/*END OF STYLESHEET*/
Now instead of going through every style on each individual page head, you can simply change it all with a simple external sheet all linked together by the following.
Hope this helps. jhawk2k14#gmail.com
Use this http://www.colorzilla.com/gradient-editor/
CSS should be applied in a separate stylesheet... never apply styling inline.
There are many online tools that create Gradients. Either you can use them or you can create your own
Simply check here: http://www.cssmatic.com/gradient-generator
Also you can create your own by this way
CSS
background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
Greetings all,
I'm using a gradient background with -webkit-gradient. It's not working on Chrome 8.0.552.224 on Windows 7, but I could swear it was recently working on Chrome-OS X. It's Monday so perhaps I'm missing something obvious, but if so I can't figure it out. I'd appreciate your taking a look. The sample code here will work on Firefox but doesn't display a gradient in Chrome:
Thanks,
-Northk
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient test </title>
<style>
.main-header
{
padding-top: 50px;
min-height: 50px;
background: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#fff), to(#000));
background: -moz-linear-gradient(top, #fff, #000);
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="main-header">
THIS WORKS ON FIREFOX BUT DOESN'T WORK ON CHROME-WINDOWS 7!
</div>
</body>
</html>
Seems I just got the syntax wrong. Here's how it should be:
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#000));
Be aware in Chrome 16.0.912.75m still has a small CSS bug/issue when parsing style:
background:-webkit-linear-gradient (top,gray 0,#A0A0A0 100%);
This will not work, because of spaces between -webkit-linear-gradient and start bracket.
Deleting additional spaces will solve the issue as well as minifying CSSs.
Try this
background: -webkit-linear-gradient(#DDDDDD, #ffffff);