I have Layout.js which has Navigationbar inside navigation bar is just unordered list of list items
function Layout(props) {
return <div>
<NavigationBar />
<main className={classes.main}>
{props.children}
</main>
</div>
}
navbar.module.css is
.container {
position: fixed;
top: 0px;
..
background: linear-gradient(rgba(37, 47, 81, 0.6),rgba(37, 47, 81, 0));
backdrop-filter: blur(3px);
..
}
I want backdrop-filter: blur to be linear gradient as color because now it's just line where its starts to blur. Can someone help me easily fix this?
I tried webkit but it write warning that it is not supported by browsers.
Related
I've created an image gallery using Bootstrap grid with figure and fig-caption tags, and overlaid each image with the caption text. Now I'd like to darken each image and make the text more visible. I know how to do this with a single background image, but I can't work out how to manage it for every image in my grid. My links to image srcs are in the HTML, so I haven't been able to use the background-image property on the image link in CSS, as I have previously. Do I need to change my set-up and link to images in the CSS, or can it be done with my images in HTML?
Thus far I've set a linear-gradient to the background property of the images, but that only puts the gradient behind the images.
Example of the code that works for background images:
#hero-image {
background-image:linear-gradient(rgb(60, 60, 60), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2017/05/09/09/15/edinburgh-2297668_1280.jpg");
width: 100vw;
height: 100vh;
background-size: 100% 100%;
}
#media only screen and (min-width:600px) {
#hero-image {
background-image:linear-gradient(rgb(103, 98, 98), rgba(17, 17, 17, 0.5)), url("https://cdn.pixabay.com/photo/2019/04/22/08/58/edinburgh-4146031_1280.jpg");
}
}
<div id="hero-image">
<div class="hero-text-box">
<h1>Literary Edinburgh</h1>
<h4>Scotland's capital in books</h4>
<button id="hero-button" type="button" class="btn btn-primary btn-lg .btn-block">Get me reading!</button>
</div>
</div>
Just got a suggestion from a course tutor that's working really well for me so sharing it here.
I've now used the filter property and set its value to brightness(50%). So the CSS rule I applied to my images is:
filter: brightness(50%);
Found this - might help:
.outline-font {
color: yellow;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;
}
use:
<h1 class="outline-font">I'm yellow font with black outline!</h1>
play with the colors and "widths", look up "text-shadow", good luck!
This question already has answers here:
Can I set background image and opacity in the same property?
(15 answers)
Closed 2 years ago.
I have these lines In my CSS file:
body {
background: url(https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg);
}
How can I affect this image with transparency? I found a "solution" that looked like this:
img {
opacity: 0.5
}
But I don't really know how to apply It. If I just write It down, nothing happens because I don't know how to connect It to the image I want to use.
You can utilize the rgba() function of the background property and combine it with the url() function. The RGBA has the A for "Alpha" in addition to Red-Green-Blue, which performs just like the opacity property; values range from 0 to 1. The trick to using RGBA in a background image is to use two parallel rgba() functions inside a linear-gradient(). Since rgba() returns a color value, it can be utilized as two color stops in the linear gradient...although they technically aren't color stops, since no transition happens from two like color values. Hackish, but simple and functional.
body {
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://images.freeimages.com/images/large-previews/48d/woodgrain-texture-1151631.jpg')
}
You would simply apply it as shown below;
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-image: url('https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg');
opacity: 0.5;
}
.content {
position: relative;
z-index: 2;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 class="content">Hey!</h1>
</body>
</html>
The body being your background and the content being your text and other content etc..
So basically the other day, I was messing around with Xcode.
I saw an Apple video explaining about UI and some new blur effects in IOS 13 so I tested it out and really liked it.
So what I achieved was an image with a blur effect and some text on top, but the text had a different blur than the image, so it was somehow see-tough.
Here is the result:
So basically I would like to achieve this using HTML and CSS but it looks quite difficult.
Is there any possible way to do this?
Thanks in advance anyway.
Using CSS, you can either use opacity property or use rgba colour values.
like so:
<style>
div.background {
background: url(https://loremflickr.com/320/240) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
/* using the opacity property */
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
/* Green background with 70% opacity */
color: rgba(76, 175, 80, 0.7);
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
My computer isn't allowing me to see the image at the moment, but if you want to blur the background, you can use:
filter: blur(8px);
-webkit-filter: blur(8px);
etcetera, for each browser. Be sure to apply those styles to the image itself, and not the container.
You can check out the effect here: https://theexplorerblog.com/learning-base.php
Hope this helps.
What I want to do is have a div with a transparent background that doesn't affect the text. Consider the following HTML:
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
If I were to give it the following CSS:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
The text would suffer from the transparency of the section. So, I started trying to layer the content like this:
<div class="code-sample">
<div class="background"></div>
<section class="content">
<header>
<h1>Description</h1>
</header>
Code
</section>
</div>
However, with an enumerable number of iterations I'm unable to get the section to layer over the div. I'll be honest, I've tried positioning the inner div and section absolute and relative. I've tried using the z-index. But really, I'm just shooting in the dark here. I'd like the .background to have a transparent look:
background-color: #7ac0da;
opacity: 0.5;
filter: alpha(opacity=50);
but yet the .content then overlay that div. This will allow me to then float the .code-sample div and do like a three-column layout with those.
How can I achieve what I'm looking for?
Use RGB color to only set the transparency for the background:
.class {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
Source
No need for the extra background div, use RGBA values on .section to get a semi-transparent background which doesn't affect child elements
.content {
background: rgba(0, 0, 0, 0.2)
}
Using RGBa sometimes gives rough edges in texts in Firefox. So it may be better in some cases to use semi-transparent png as background (may use data-uri).
http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help
To softly lighten up the area behing the logo you can use a combination of an rgba background, rounded borders and a light shadow on the image:
.head > img {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
Don't forget to add vendor-prefixes to support all browsers...
You can add a background with rgba property to give a fake light background.
Try this
#logo {
background-color: rgba(255,255,255, 0.5);
/* Then other css */
}
In your case, modify your .head to this
.head {
padding-left: 5%;
background-color: rgba(255,255,255,0.5);
}
The "border" as you put it is margin on the body. To remove this, simply:
body { margin:0; }
What you can do is give the .head divider an opaque background:
.head { background:rgba(255,255,255,0.3); }
This isn't supported on older browsers, however.
You can do
convert to PNG and make the original image 0.2 opacity
(better) have a <div> that is position: absolute inside body and the same height as body, then apply the background image and opacity: 0.2; filter: alpha(opacity=20);
Try CSS3 please
.box_shadow {
-webkit-box-shadow: 0px 0px 10px 0px #fff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 10px 0px #fff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
you can do this by 2 ways
1 text-shadow but you are using image so you have to do this in photoshop in layer style > drop shadow and select light color
you can do this in this also but it covers in rectangular form not behind your logo text
and
2 is to use background that also have the same effect in rectangular form
use background:rgba(255,255,255,0.6);
last 0.6 is opacity adjust this to darken or ligten the color