Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one during page load. Due to the varied colors of these backgrounds, the readability of the text is compromised. To address this issue, I came up with the idea of selectively blurring the background around the text to enhance its legibility.

I envision the blur effect to encompass only the area surrounding the text, possibly following its outline for a more seamless appearance. However, my initial attempts involved placing the text in a box, which proved cumbersome due to the relative positioning of elements on the page. This made it difficult to achieve the desired level of blurring without affecting other parts of the background unnecessarily.

If you have suggestions on how to effectively enhance text readability by selectively blurring the background solely around the text, or any other methods considering the dynamic nature of the changing backgrounds, please feel free to share your thoughts!

javascripthtmlcssweb

Answer №1

If you're looking to add a unique touch to your images, consider experimenting with CSS3 filters. Check out this tutorial for guidance on how to blur image using CSS filters:

You can easily customize the blur effect to suit your specific needs by following the instructions provided in the linked guide.

Answer №2

Opting for the more challenging route, you can achieve this effect using the CSS text-shadow property. For instance, if the text is in black, applying a white shadow color to it will create the desired look.

Illustration:

body {
    background-image: url('https://images.template.net/wp-content/uploads/2015/09/01191816/Perfect-Summer-Background-Free-Download.png');
    background-size: cover
}
.text {
    color: #000;
    font-size: 3em;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff
}
<div class="text">Some Text</div>

Answer №3

When I need a quick and simple solution, I usually opt to add a contrasting background color to the text wrapper, as shown in the first example below. Additionally, you can experiment with using a blur filter for added effect. I came across an article on "frosting glass css filters" which inspired the second approach. However, there are some concerns raised about potential performance issues in the comments section of that article.

#bg {
  background: url(https://picsum.photos/500/400?image=0) center center no-repeat;
  background-size: cover;
  width: 500px;
  height: 300px;
  margin-bottom: 30px;
}

#text-wrap1 {
  padding: 30px;
  background-color: rgba(255,255,255,0.7);
  text-shadow: 1px 1px 1px white;
  width: 150px;
}

#text-wrap2 {
  padding: 30px;
  width: 150px;
  position: relative;
}
#text-wrap2 p {
  position: relative;
  text-shadow: 1px 1px 1px white;
}
#text-wrap2:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  left:0;
  top:0;
  -webkit-filter: url('#blur');
  filter: url('
 #blur');
  -webkit-filter: blur(5px);
  filter: blur(5px);
  background-size: cover;
  opacity: 0.7;
}
<div id="container">
  <div id="bg">
    <div id="text-wrap1">
      This is a random paragraph
    </div>
  </div>

  <div id="bg">
    <div id="text-wrap2">
      <p>This is a random paragraph</p>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Insert a horizontal line within the text

I am struggling to get the horizontal lines to work on my traffic light dashboard view for one of my website pages. Despite making multiple adjustments, it seems like I just can't get them to display correctly. Here is an example of what I want: View ...

htmlcss

How many intricate objects are instantiated in memory when running the code snippet provided above?

When looking at the given code, how many complex objects can we identify in memory? function Foo() { this.one = function() { return "one"; } } var f = new Foo(); Foo.two = function() { return "two"; }; Here's what I see: The Foo co ...

javascript

Why isn't my Bootstrap dropdown displaying any options?

I am new to web development and attempting to create a button that triggers a dropdown menu when clicked. I have tried the following code, but for some reason, the dropdown is not working correctly. Can anyone help me identify the issue or correct my code? ...

javascripthtmlbootstrap-4

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

Here is a code snippet that can be used to print 'n' number of paragraphs: <% while(rs.next()){ String para=rs.getString("poems"); %> <p> <%=para%> </p> <!-- n number of p tags are printe ...

javascriptjquerycss

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

htmlcssdrop-down-menu

React form events onSubmit and onClick fail to trigger within Zurb Foundation's 'Reveal' modal dialog

Since upgrading from React 16.12.0 to React 17.0.0, I've encountered an issue with my code. Previously, everything worked perfectly fine, but now none of my events seem to be firing (meaning the console.log statement never appears). class MyClass exte ...

javascriptreactjszurb-foundationonsubmit

What could be causing my SectionList to occasionally display only a single section?

I'm facing a problem with the SectionList component where it occasionally fails to display all sections, only rendering the first one. After some debugging, I may have found a solution, but I'm unsure why it resolves the issue. While my page con ...

javascriptandroidiostypescriptreact-native

Ways to verify if a minimum of three letters in each variable correspond

let nameOne = 'chris|'; let nameTwo = 'christiana'; To use JavaScript, what is the best way to determine if three or more letters match between both variables? ...

javascript

The recursive JavaScript function is not returning as expected when using defer

Having an issue with a recursive function. It appears to loop through effectively when the data return is null, but it fails to return the promise correctly when the data is not null after completing the recursive task. It seems like the promise gets los ...

javascriptajaxrecursionpromisedeferred

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

javascriptcsstwitter-bootstrapcarouselvue.js

What could be causing the entire app to malfunction when the Redux Provider tag is used

I am facing an issue while trying to integrate a React Toolkit app into my project. The error message I encountered is as follows: Error: Invalid hook call. Hooks can only be called inside the body of a function component. This error may occur due to one ...

javascriptreactjsreduxredux-toolkit

Conceal the parent component's <button> element within the Child component

I'm facing an issue with hiding a button in my parent component from the child component. I tried using props to bind the element and v-show directive to hide it, but instead of just hiding the button, it ends up hiding the entire tab. Take a look at ...

javascriptvue.jsfrontendquasar-framework

Dropdown box not displaying any choices

I developed a basic reusable component in the following way: Typescript (TS) import {Component, Input, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; @Component({ selector: 'app-select', templa ...

javascriptangulartypescript

Three.js combined with Ember.js

I've been brainstorming ways to merge Ember.js with Three.js. My goal is to render multiple elements, manage the data with Ember.js bindings and general pub/sub handling, while also being able to manipulate the views/elements with three.js using THREE ...

cssember.jsthree.js

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

cssangularcss-selectorsangular-material

Converting input dates in nest.js using TypeScript formatting

Is it possible to set a custom date format for input in nest.js API request body? For example, like this: 12.12.2022 @ApiProperty({ example: 'ADMIN', description: 'Role name', }) readonly value: string; @ApiProperty({ ...

javascripttypescriptnestjs

A guide on cropping and uploading images using ejs and Node.JS

Currently I am utilizing JQuery to crop an image. <link href="/public/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> <!-- add scripts --> <script src="http://code.jquery.com/jquery-1.9.0.js"></script& ...

javascriptjquerynode.jsimage

How to efficiently center a jQuery Mobile Dialog on the screen using custom dimensions

I designed an app using jQuery Mobile and I'm looking to display a Dialog box when a button is clicked. The Dialog box should be centered on the screen with specified width and height. For reference, you can view the current version on jsfiddle. The ...

jquerycssjquery-mobiledialogmodal-dialog

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

I encountered an error while using axios: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined" export default { methods: { loadUsers(){ axios.get("api/user").then(data => ...

javascriptphplaravelvue.jsaxios

ReactJS - Unable to access property of undefined object

I encountered a TypeError when rendering, stating that my object is not defined. Despite thinking I defined it before using it. Here is an example of ArticleDetails.js that I am referencing: import React, {Component} from 'react'; class Arti ...

javascriptreactjs