I have a simple li on a page:
<li tabindex="0" id="lidashboard" class="active">
<a href="#/index/app/dashboard">
<i class="fa fa-dashboard fa-lg"></i>Dashboard
</a>
</li>
Is it possible, with CSS, to make it finish as an arrow on right side. Something like:
on hover li will have a right triangular border in white
Please help
You can do as follows
li{
list-style: none;
}
.arrow{
height: 100px;
width: 250px;
background-color: red;
}
.arrow:hover{
-webkit-clip-path: polygon(100% 0, 68% 50%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 68% 50%, 100% 100%, 0 100%, 0 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li class="arrow"></li>
</ul>
</body>
</html>
In order to play with clip-path values, look here.
Related
I want to create a gradient with lines moving in both directions, but at a 45 degree angle. with html and css.
How can I do the same lines, but in an opposite direction.
This is the code I used below to produce the image above.
<!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">
<title>Document</title>
<style>
.repeating-linear {
background: repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
);
}
</style>
</head>
<body>
<div class="repeating-linear" style="width: 200px;height: 50px; border: 1px solid red;">
</div>
</body>
</html>
So you want cross lines, you can stack gradients as proposed below:
<div class='repeating-linear' />
.repeating-linear{
width: 200px;
height: 50px;
border: 1px solid red;
background:
repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
),
repeating-linear-gradient(
45deg,
black 4px,
transparent,
transparent 10px
);
}
jsfiddle sample: https://jsfiddle.net/4rL7n8xo/
result:
I have this white small box and i want to make him transparent before starting adding my html code, i searched already how to do that but i didnt find any type of example.
Image:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript" src="./script.js" ></script>
</body>
</html>
CSS
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
html {
background: transparent;
}
[EDIT]
CSS
html, body {
background: rgba(0, 0, 0, 0.01);
}
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.1);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.6px);
-webkit-backdrop-filter: blur(11.6px);
border: 1px solid rgba(0, 0, 0, 0.15);
}
Html
<!-- I added this div -->
<div>
TESTE
</div>
Please improve your question. If you want to make an element transparent with CSS, the easiest way is to add numbers from 0-9 to the end of the color value to get the transparency level you want, for example, white is #fff, to make it transparent experiment with #ffffff0, #ffffff1, #ffffff2, to 9.
I've made a nice film grain animation that im putting over a webpage to make a nice 4:3 old movie type look, however, I cant work out how to confine the animation to the div. I'm using Bootstrap if it effects it. Basically, I only want the grain to be inside the div so that it creates a black bar look outside. Many thanks! Code as follows:
#titleName {
font-family: 'Abril Fatface', cursive;
font-size: 4vw;
text-align: center;
white-space: nowrap;
background-color: rgb(68, 68, 68);
color: rgb(255, 255, 255);
margin-top: 0px;
}
#titleName:after {
animation: grain 2s steps(3) infinite;
background-image: url("http://creativeloads.com/foto/seamless-film-grain-294.jpg");
content: "";
height: 300%;
left: -50%;
opacity: 0.1;
position: fixed;
top: -100%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0)
}
10% {
transform: translate(-5%, -10%)
}
20% {
transform: translate(-15%, 5%)
}
30% {
transform: translate(7%, -25%)
}
40% {
transform: translate(-5%, 25%)
}
50% {
transform: translate(-15%, 10%)
}
60% {
transform: translate(15%, 0%)
}
70% {
transform: translate(0%, 15%)
}
80% {
transform: translate(-15%, 5%)
}
90% {
transform: translate(-10%, 10%)
}
}
<!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">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="scss/custom.scss">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<title>Home</title>
</head>
<body style="background-color:rgb(0, 0, 0);">
<script src="https://unpkg.com/#popperjs/core#2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<header>
<!-- Nav Bar -->
</header>
<main>
<!--- Content -->
<div id="titleName" class="container">
TITLE
<div class="noise"></div>
</div>
</main>
<footer>
<!--- Footer -->
</footer>
</body>
</html>
From what I gathered regarding your code it seems like you have no set width or height to your container, if you want to limit your child element you can set its parent width and let your grain be width: 100%;
Another solution is to create an svg rectangle and use it as a clip-path to your div.
{I’ll add the code once I’m on my laptop}
I cant get my background to open with the live server. I am not sure what I did wrong. I have attached both my index.html sheet and my style.css sheet. All that appears is a grey screen for my background instead of the image. I am going to put login information on top of the background thats why I used linear-gradient.
* {
margin: 0;
padding: 0;
}
.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(123.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
<!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" />
<title>Global Automation Timesheet</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hero">
<div class="form-box"></div>
</div>
</body>
</html>
.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/123.jpg');
background-position: center;
background-size: cover;
position: absolute;
}
Use apostrophes '' in url('123.jpg'). Also be sure, that you correctly wrote image location.
Hi I am new to html and css, and i am unable to to get a linear gradient background.
This is what i am trying to get:
https://i.stack.imgur.com/ewkO6.png
This is what i have so far
body{
background-color: linear-gradient( rgb(35, 166, 252), white);}
The HTML code is basically empty:
<!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" />
<link href="aboutme.css" rel="stylesheet"/>
<title>Document</title>
<h1>ABOUT ME</h1>
</head>
<body>lorem ipsum</body>
</html>
Thank you.
use background-image:linear-gradient( rgb(35, 166, 252), white); instead of background-color
Your problem will be solved
so your css should be
body{
height: 100vh;
background-image: linear-gradient(rgb(35, 166, 252), white);
}
You could add this in your CSS code, with the following value:
background: linear-gradient(45deg, black, transparent);