This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 1 year ago.
Some websites have blur background navbar. How can such transparency effect be achieved with HTML & CSS?
You can do this with two lines of CSS:
background: rgba(255, 255, 255, .4);
backdrop-filter: blur(10px);
If you run the fully-documented snippet I created below, you can see that I've made both the card AND the navbar part transparent. I also added the Stack Overflow logo underneath to display the glassmorphic effect. Because I used a Bootstrap navbar, there are two things to note:
You need to remove the default bootstrap navbar classes in order to apply these effects.
You need to change the Z-Index of the navbar if you want any design to show up underneath.
<!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= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Glassmorphism effect by Billy for StackOverflow</title>
<style>
body {
background: linear-gradient(90deg, #F38126 0, #32323A 25%); /* Apply a gradient background */
font-family: 'Inter', sans-serif; /* Apply a different font */
}
.card {
width: 400px; /* Width of the card */
height: auto; /* Height of the card */
border-radius: 1rem; /* Give the card round borders */
padding: 2rem; /* Give the text inside the card spacing */
margin: 2rem 4rem 4rem 5rem; /* Give the card spacing from the browser (Top, Right, Bottom, Left) */
/* GLASSMORHPISM CODE */
background: rgba(255, 255, 255, .4);
backdrop-filter: blur(10px);
/* GLASSMORHPISM CODE */
}
.card-title {
margin-top: 0; /* Give the title spacing: top */
margin-bottom: .5rem; /* Give the title spacing: bottom */
font-size: 1.2rem; /* Make the title a little bigger than the text */
}
a {
color: #32323A; /* Color the link at the bottom */
text-decoration: none; /* Remove the default underline */
}
.shape {
position: absolute; /* Position the shape */
width: 150px;
top: .5rem;
left: 25rem;
}
.custom {
background: rgba(255, 255, 255, .4);
backdrop-filter: blur(10px);
z-index: 5; /* Make sure the image is behind the navbar, to show the effect */
}
</style>
</head>
<body>
<nav class="navbar navbar-dark custom" >
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
<img class="shape" src="https://basedosdados.org/uploads/group/2020-07-08-180036.693735stackoverflow-512.png" alt="">
<div class="card">
<h3 class="card-title">Glassmorphism for StackOverflow</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit perferendis illum,
placeat quod perspiciatis sequi ullam odit.</p>
Read more
</div>
</body>
</html>
Related
Hi I am trying to create a highlight on a CSS shape as shown below.
There will also be content inside of the hexagon including image and text,
The highlight I am referring to is the part in the top left.
the code I currently have for creating the hexagon is:
HTML
<div class="hexagon-big"></div>
CSS
.hexagon-big {
position: relative;
width: 200px;
height: 115.47px;
background-color: #343434;
}
.hexagon-big:before,
.hexagon-big:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon-big:before {
bottom: 100%;
border-bottom: 57.74px solid #343434;
}
.hexagon-big:after {
top: 100%;
width: 0;
border-top: 57.74px solid #343434;
}
There is other code for the content but i left it out because I don't think it is necessary
Do the hexagon shape differently and you can rely on gradient to create that highlight effect:
.hex {
width: 200px;
display: inline-flex;
margin:0 5px;
background:
conic-gradient(at top,#000 230deg, #0000 0),
linear-gradient(to bottom left,#fff , #000 60%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
.hex::before {
content: "";
padding-top: 115%; /* 100%/cos(30) */
}
<div class="hex"></div>
The solution in this answer is heavily based on the previous answer. To use clip-path and stacked gradients is by far the smartest thing to do here, but I still wanted to post this in order to show, how this solution could be improved and adjusted for your use case (text box, coloring, variables for maintenance, etc.).
.hexagon-big {
/* define box and text space */
width: 200px;
height: 230px;
padding: 10.8% 5px; /* adjust text box padding here; mind that top/bottom tip are part of the box */
box-sizing: border-box; /* width/height should include padding */
/* text formatting (optional) */
color: white;
text-align: center;
/* hex shape */
--hex-col: hsl(0deg 0% 20%); /* just your #343434 as a HSL color */
--hex-shadow: hsl(0deg 0% 50%); /* increased lightness by 15% to define highlight root color; 100% would be fully white */
background:
conic-gradient(at top, var(--hex-col) 232deg, transparent 0), /* change the angle of the shadow at "232deg": increase → narrower, decrease → wider */
linear-gradient(to bottom left, var(--hex-shadow), var(--hex-col) 55%);
clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hexagon-big">
Lorem ipsum dolor sit amet...
</div>
It should also be mentioned that your current way of using border is well better supported by older browsers than clip-path and conic-gradient (same with var()).
If this should be a problem, you might have to add another HTML tag and work out a way with transform: matrix(...) and box-shadow: inset ... (for example).
This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 2 years ago.
This is how my webpage looks like:
I used the following image as the background:
How can I have black transparent overlay on the image, so it looks like the following:
Here is my html and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:522px;
background-size: cover;
}
</style>
<body>
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
<p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
</body>
</html>
You can add a transparent gradient before the url background:
.jumbotron {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background1.jpg");
}
For example:
body {
background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://picsum.photos/id/896/640/480);
}
I have CSS animations running on an HTML element but I am unable to position the HTML element freely on the HTML page so, how would I do this?
I have tried using doing this in order to position the HTML element freely on the page.
<div style="text-align: center;"><p class="animated flipInX">2</p></div>
But it does not work.
/* GLOBAL STYLES */
body {
background: #011;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: Consolas,monaco,monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<div class="typewriter">
<h1>1</h1>
</div>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<p class="animated flipInX">2</p>
</head>
</html>
To position things anywhere on the screen, likely means you also want to be able to use any part of the screen even if there were items all over the page. Best way to do this is to use the position css property. so on whatever you want to move around, write a css class or id to it like this;
position: absolute;
z-index: 1;
top: 0px;
left: 200px;
Here is a link I played with the example you gave. https://jsfiddle.net/cphutx78/
Let me know if it hel
I have an video tag with an div displayed on top. The div is pretty nice looking and visible for the most part, only dark images are a bit problematic.
For the sake of testing I searched out 3 pictures and overlayed them with my div.
The question is, how would someone create this overlay layout, so it is discreetly and clearly visible at the same time?
The result is as follows:
Visibility good!
Visibility bad
Visibility okay, background visibility bad
.container{
position: relative;
}
img{
width: 100%;
height: 100%;
}
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: black;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
<div class="container">
<img src="https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
<div class="container">
<img src="http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg"></img>
<div class="tag">Hello Tag</div>
</div>
Although perhaps better suited for UX.SE, there are a couple of options I might offer.
Firstly, don't use opacity for the whole element, use a transparent background color to allow the white text to stand out.
Secondly, outlining the black(ish) tag in white (or a transparent white) will allow the element to be more visible on darker backgrounds but not affect those with lighter colors.
JSfiddle Demo
.tag{
position: absolute;
bottom: 5px;
right: 0;
color: white;
font-size: 48px;
padding: 5px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0px 0px rgba(255,255,255,0.3);
}
IMHO, make the text white and add a drop shadow.
.tag {
color: #fff;
text-shadow: 0 1px 10px rgba(0,0,0,0.75)
}
Apparently you are concerned that one hardcoded background color does not suit all dark, neutral and light backgrounds.
There is a relatively new CSS property called background-blend-mode which controls how two backgrounds are blended with each other. You can use this property to specify a blending mode that produces some contrast in all situations.
The downsides:
Both image and overlay must be part of an element's background (mix-blend-mode is a better option with lesser support)
The overlay color must be chosen stategically. In the following example I used transparent white instead of transparent black since difference filter does not affect black color.
.photo {
position: relative;
height: 200px;
background-blend-mode: difference, normal;
}
.photo span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
font: bold larger/50px sans-serif;
color: rgba(255, 255, 255, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-1 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(https://www.nasa.gov/sites/default/files/20140824_0304_171.jpg) center / cover;
}
.photo-2 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(https://alifebeyondrubies.files.wordpress.com/2013/03/walls01.jpg) center / cover;
}
.photo-3 {
background:
linear-gradient(to right, rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)) no-repeat bottom / 100% 50px,
url(http://photos.epicurious.com/2015/01/12/54b4006b2413537c0d45738f_51143820_spaghetti-mussels-white-beans_6x4.jpg) center / cover;
}
<div class="photo photo-1"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="photo photo-3"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
what about using text / box-shadow? You could apply a text-shadow with white or black, and or a box-shadow to your .tag class. This way
there will be enough contrast.
Another way would be, using the same Image as a background Image on
the tag, and applying filter to it. (hue-rotate or brightness etc.)
Something else that comes to my mind would be a calculation using
canvas, to detect whether the bottom corner is dark or light, and
adding another class to the .tag, so that you can use two versions.
One for each type of background
Lastly maybe blend-modes are an option: mix-blend-mode: difference;
I have following CSS class :
.acceptRejectAll a, .acceptRejectAll a:visited{
background-image: url("../images/view-patient.png");
background-position: left top;
background-repeat: no-repeat;
color: #4B555C;
float: left;
height: 35px;
padding-top: 12px;
text-align: center;
text-decoration: none;
width: 100px;
}
and following HTML :
<div style="float: none; display: inline-table" class="acceptRejectAll">
<a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>
this is display as follows :
when i decrease the size of in css class like : width : 85px
it displays as follows :
it cuts image from right side:
i tried to set background-Position in css class : but either left side or right side, image is not display correctly
wht is solution ?
Thanks
You will need to use background-size for this. Example:
background-size: 100% 100%;
Please note that this setting can scale your image to fill parent.
As the image is 100px (at least the visible part is about 92px so I guess the size is 100px) if you change the size of the button you need to scale the background image rather than change the position.
background-size:85px 35px;
Gradient and Border radius
Another way to approach this — considering the kind of button style you are using — is to go the gradient and border radius route. Whilst the code to use a css gradient looks rather messy, it is dynamically generated so you wont end up with stretched curved corners like you will using background-size.
Everything used below is pretty well supported now by most browsers. For anything that doesn't support the gradient you will get a solid blue background with curved corners instead, and it almost isn't worth worrying about non-support for border radius any more.
markup:
<div class="acceptRejectAll">
Accept All
</div>
css:
.acceptRejectAll {
display: inline-table;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100px; /* You can change the width as you like */
background: #c3e5fe; /* Old browsers */
background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}
.fontBlack {
font-family: sans-serif;
font-size: 10pt;
color: black;
text-decoration: none;
}
The gradient was generated using:
http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;Custom
You end up with:
http://jsfiddle.net/NDHtn/
Or as a preview:
When you must use an image
If there is no other choice but to use an image as a background for a button — say, the graphics are too complicated to replicate using css effects — rather than use one image stretched and distorted to fit, you can use something like the following. There are many ways to essentially achieve the same result, I prefer to keep my mark-up simple and my css more complicated (rather than the other way around). However, to make things more supportive of the wider browser community you can break your mark-up into three parts, rather than make use of ::before and ::after:
markup:
<a class="button" href="#">
<span>Round Button with lots of text and then some</span>
</a>
css:
.button:before {
position: absolute;
content: '';
background: url('image.png') left top;
top: 0;
left: -50px;
width: 50px;
height: 99px;
}
.button:after {
position: absolute;
content: '';
background: url('image.png') right top;
top: 0;
right: -50px;
width: 50px;
height: 99px;
}
.button {
background: url('image.png') center -99px;
height: 99px;
margin: 0 50px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
}
.button span { display: block; padding: 35px 0px; }
image.png, hacked together using this original image and pixlr.com:
Which will give:
http://jsfiddle.net/2K5Kg/1/
Example mark-up without use of psuedo elements:
<a class="button" href="#">
<span class="before"></span>
<span class="after"></span>
<span>Round Button with lots of text and then some</span>
</a>
Then in the css just replace the .button:before with .button .before and the same for :after.