I want to make a dynamically scaling title that grows/shrinks depending on the width of the screen. I also want to make it so that it doesn't apply a word wrap and split the title into 2 or more lines. I am using an SVG trick to make this work.
Consider the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
I got this to work perfectly in Chrome, but then I was surprised that on ios, the last letter would be cut off. Please see screenshot:
IOS:
Chrome:
Any ideas on how to make this look correct on both OSes/Browsers? It is supposed to say "This is a test of This T". If you can't see, Chrome correctly resizes this no matter what screen resolution I put this on (smaller or bigger than ios). On ios, it always cuts it off.
I can get this on 1 browser or the other if I change the viewbox parameters, but I can't find any setting that would work for both.
Got it working... for future reference in case anyone else runs into this...
Adding textLength="167px" where 167 is the same as your viewbox size fixed the issue. Apparently, ios and MacOS was rendering spacing between the two systems differently causing the issue. Defining a textLength forced it to render more uniformly eliminating the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<title>StackOverflowExample</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script>
</head>
<style>
text {
font-family: 'Muli';
font-weight: 600;
fill: white;
}
svg {
width: 100%;
}
a {
color: white;
}
body {
background-image: linear-gradient(180deg, rgba(35, 50, 64, 0.91) 61.95%, rgba(0, 0, 0, 0.51) 94.56%),
/* height: 100vh; */
width: 100vw;
background-color: black;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
font-family: 'Muli';
color: #ffffff;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body class="text-center">
<div class="container">
<div class="row">
<div class="col-12">
<svg viewBox="0 0 167 20">
<text x="0" y="15" textLength="167px">This is a Test Of This T</text>
</svg>
</div>
</div>
</div>
</body>
</html>
Related
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
I want to create contents in the image, and stop the draggable window to appear below. Z-index dosen't work. It destroys the font (probably) and breaks the title. Any other methods that don't cause problems? I will appreciate the help if you solve this.
If you wanna know the project is, It's a windows-98/95 like thing. I will change the project's name soon.
And please note: The font only works on the website. (https://oli.neocities.org/windows97/)
Code: https://jsfiddle.net/9p28gLvb/
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://oli.neocities.org/style.css" rel="stylesheet" type="text/css" media="all">
<script>
$( function() {
$('#window').draggable({containment:"#Image"});
} );
</script>
<style>
img {
contain: content;
}
#window {
background-color: #B9BABD;
height: 162px;
width: 404px;
font-family: 'Normal';
}
.windowtitle {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
width: 404px;
height: 20px;
font-size: 16px;
color: white;
font-family: 'Normal';
}
.windowbody {
}
button {
display: block;
background-color: #B9BABD;
border-color: black;
font-family: 'Normal';
}
#font-face {
font-family: 'Normal';
src: url('https://oli.neocities.org/windows97/fonts/normal.ttf') format('truetype');
}
</style>
</head>
<body>
<img src="https://oli.neocities.org/windows97/images/background.png" id="Image" style="background-size: cover; width:100%;height:100%;">
<div id="window">
<div class="windowtitle">
<b>System</b>
</div>
<div class="windowbody">
<center>
<div style="clear: left;">
<p style="float: left;"><img src="/windows97/images/bubble_i.png" height="48" width="48"></p>
<p>Zoom to 67% for the best experience.</p>
</div>
</center>
<center>
<button>OK</button>
</center>
</div>
</div>
</img>
</body>
</html>```
fixed it
i made an container..
(edit: i'm currently working on the project, will get code later.)
Would anyone know why css is not working in my html? It is linked to my html, but not working. It is also showing empty in chrome inspect - css tab. I see that css is linking , but not sure why it is not working.. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quierra Marriott</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px
font-family: 'Roboto', sans-serif;
color: #eee;``
}
body {
width: 100%;
height: 100%;
background: url() no-repeat center fixed;
background-size: cover;
}
Your css is invalid:
html {
font-size: 10px /* You're missing a semi-colon here*/
color: #eee;`` /* You don't need the strings `` here...*/
...
It may be of interest to you to find a tool like w3c css validator: https://jigsaw.w3.org/css-validator/.
Missing semicolon and empty string are problem but they are only affecting font-size property of html selector.
If your intention was to add background to body then you should fill image url
body {
width: 100%;
height: 100%;
background: url('http://image-url.com/image') no-repeat center fixed;
background-size: cover;
}
These is main reason for empty page
Didn't see any 'body' tag in your HTML that's why I think it's not working
Okay I can't comment on any other questions that's why I am posting a new question.
I've tried all solutions suggested in this answer, this as well.
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
Pretty simple right? But for some reason the background image just refuses to show up.
I have tried with my CSS, HTML, and image in the same folder with no success. Tried in different sub-directories, no success.
I have checked file name, extension and all of that stuff. Tried without quotes and what not. Tried different images even. Tried removing all other CSS files as well, nothing works.
You have a few too many stops in your style property. Your css should look like this:
.parallax {
background-image: url('../pics/parallax.jpg');
...
}
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../
height: 100%;
width:100%; //and try add width
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You can try add base tag for example like this
<!doctype html>
<html>
<head>
<base href="http://YourSite.com/">
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
This is a very weird error, but when you load up my page, it can scroll without any intention of it doing so. You can't see the scroll bars, but it just can. I have had issues with this in the past.
html{background-color: rgb(255, 255, 240); max-width: 100%; max-height: 100%; height: 100%; width: 100%;}
body{margin: 0px;}
div#head{display: block; width: 100%; height: 53px; background-color: rgb(0, 0, 0); border-radius: 0px;}
div#head > div#icon_logo{display: inline-block; width: 60px; height: 60px; background-image: url("../../Type/Media/Logo_Icon.jpg"); background-size: contain; background-position: center; background-repeat: no-repeat;}
<!DOCTYPE HTML>
<HTML LANG="EN-US">
<head>
<meta charset="UTF-8" />
<meta name="description" content="A website for Ty Q." />
<title>TyPrograms</title>
<link rel="stylesheet" href="Type/Stylesheet/stylesheet_HOME.css" type="text/css" />
<link rel="icon" href="Type/Media/Favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Type/Media/Favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="head"><div id="icon_logo"></div></div>
</body>
<script type="text/javascript" src="CDN/Type/Script/minified/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="CDN/Type/Script/minified/waypoint-1.6.2.min.js"></script>
<script type="text/javascript" src="CDN/Type/Script/minified/angular-1.5.5.min.js"></script>
<script type="text/javascript" src="Type/Script/javascript_HOME.js"></script>
</HTML>
I honestly don't know what I'm doing wrong, maybe it's the 100% in the width property of the header, I don't know.
I set up a fiddle with your code and see nothing wrong.
However, if you dont want your page to scroll you can set overflow:hidden; in your css