On my website, there's an image that appears as follows:
https://i.sstatic.net/bCE3k.png
I attempted to add a shadow to the text, resulting in this look:
https://i.sstatic.net/4ha0J.png
However, the shadow seems out of place.
Any ideas on how I can enhance readability without altering the text color or background?
If you're looking to enhance your text, consider applying a versatile text shadow:
.text {
padding:5px;
background: black;
font-size: 20px;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.5);
}<div class="text">some test text</div>By adjusting the opacity of the shadow in the code above, you can control how noticeable or subtle it appears on the text.
This response assumes that your markup resembles the following:
.container {
position: relative;
}
p {
position: absolute;
bottom: 0;
padding: 2em;
font-size: 1.5em;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>Below are a few techniques you can experiment with:
Provide a background for the text...
.container {
position: relative;
}
p {
position: absolute;
bottom: 0;
padding: 2em;
font-size: 1.5em;
background: #ccc;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>Add a subtle gradient behind the text...
.container {
position: relative;
display: inline-block;
}
.container:after {
content: '';
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, .6));
}
p {
position: absolute;
bottom: 0;
padding: 2em;
font-size: 1.5em;
z-index: 3;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>Include a text shadow...
.container {
position: relative;
}
p {
position: absolute;
bottom: 0;
padding: 2em;
font-size: 1.5em;
text-shadow: 0px 0px 5px #ffffff;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>Larger font size, added weight, uppercased text...
.container {
position: relative;
}
p {
position: absolute;
bottom: 0;
padding: .5em;
font-size: 2em;
text-transform: uppercase;
font-weight: bold;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>Overlay background behind the text with opacity...
.container {
position: relative;
display: inline-block;
}
p:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.5);
z-index: -1;
}
p {
position: absolute;
bottom: 0;
padding: 1em 2em;
font-size: 1.5em;
left: 0;
right: 0;
z-index: 1;
}<div class="container">
<img src="https://unsplash.it/300/300">
<p>Some text</p>
</div>To create a white outline around the text, simply include the following code:
-webkit-text-stroke: 1px white;
Alternatively, consider adding a background with some level of transparency.
In this html code snippet, I have multiple elements within a dropdown menu. I am looking for a way to click on an item only if it is selected (has the class selected) or has a check mark in front of the name, as shown in this screenshot. How can I achieve ...
I came across a jsfiddle link that showcases the collection of outerHTML for elements with a class='active'. Surprisingly, even when certain parts of the HTML are commented out like this: <!-- <div>'Some inner text'</d ...
I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p> tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text si ...
I need help to center a vertical line between my buttons in the middle of the header. Currently, the line goes up and my disconnect button is not aligned properly. Can you assist me in creating a responsive design? Thank you. https://i.sstatic.net/XIeiQ4E ...
I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows. $(".cbD ...
Can someone help me recreate this unique text design? The font used is Gill Sans MT and the text color is a shade of purple although it may be hard to discern. https://i.sstatic.net/HGrB8.png I have been struggling to achieve the vibrant thick border and ...
Is it possible to apply a chunk of (S)CSS to two different elements in two different breakpoints to avoid redundancy? I am using Bootstrap 4.6. <div class="one"> <div class="content">Something</div> </div> & ...
I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...
(I don't believe the previous link addresses this question; please refer to the comment below) I am currently utilizing a CMS platform that utilizes a database instead of the usual file-directory structure for managing webpages. Due to the absence of ...
My web page utilizes an Angular form to display user data fetched from a MongoDB database. The information includes the user's name, phone number, email, etc. I want the default value of the input field to be set as the placeholder text, allowing user ...
I'm facing an issue with adding a logo to the navigation bar, as the logo I want to use doesn't display correctly. Even after trying to adjust the width and height, it continues to stretch inappropriately and the text on the image remains unread ...
Is it possible to create a div that automatically inserts a new line for each new line in the code it detects when typing? For example, if I type: <div> Hello, World! How are you doing today? </div> This would normally be displayed as ...
Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...
Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...
I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...
Why can't I rotate the © character? Am I missing something? .copy { font-size: 12px; font-family: Arial; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); } <span class="copy">© This is not ...
Currently, I have set up an image as a background on my website. It's just a few pixels wide so I made it repeat across the screen width using CSS. However, I noticed that it stops slightly before reaching the right side of the browser window (around ...
I have been experimenting with creating a complex image effect using CSS only, without any JavaScript. Despite several attempts, I haven't been able to achieve the desired outcome yet. CSS .container{ width: 500px; background-color: #0c2f45; ...
I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...
I am working on creating a dynamic table with rows and columns based on JSON data. JSON: $scope.dataToShow=[ tableHeder=["First Name","Age"], { name:"rahim", age:23 }, ...