Can the box shadow size and offsets be set as a percentage? I am currently using a class with fixed values, but when zooming in, the shadow changes size and distance:
.shadowright
{
-webkit-box-shadow: 5px 5px 10px #454545;
-moz-box-shadow: 5px 5px 10px #454545;
-o-box-shadow: 5px 5px 10px #454545;
box-shadow: 5px 5px 10px #454545;
}
According to the information found in the W3C Guidelines:
The computed value is any
<length>that is turned into an absolute one; any color specified is calculated accordingly; if not, then it follows the specified instructions
Note: Relative values such as percentages will not be effective.
While conducting an online search for a more efficient solution than the one I initially thought of, I came across this potential answer that may be helpful to others.
.shadowright
{
width: 20%;
font-size: 20vw; // To make the box-shadow match the width
box-shadow: 1em 1em 1em red;
}
After experimenting a bit, I stumbled upon a solution (using today's CSS features): Although percentage values are not supported, you can utilize calc with decimal fractions.
div[id^=shadow] {
background: #000000;
color: #ffffff;
margin-block-end: 3em;
}
#shadow-1 {box-shadow: 0 calc(.05 * 1em) 0 red;}
#shadow-2 {box-shadow: 0 calc(.25 * 1em) 0 red;}
#shadow-3 {box-shadow: 0 calc(1.5 * 1em) 0 red;}
#shadow-4 {box-shadow: 0 calc(.75 * 5px) 0 red;}
#shadow-5 {box-shadow: 0 calc(2 * 5px) 0 red;}<div id="shadow-1">5% of 1em</div>
<div id="shadow-2">25% of 1em</div>
<div id="shadow-3">150% of 1em</div>
<div id="shadow-4">75% of 8px</div>
<div id="shadow-5">200% of 8px</div>In your specific scenario, it could look like this:
.shadowright
{
--offset: 5px;
box-shadow: var(--offset) var(--offset) calc(2 * var(--offset)) #454545;
}
I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...
My website has a menu layout that features a logo on the left and an icon for the menu on the right side. When the icon is clicked, the menu slides in from the right side of the window, and when clicked again, it slides out. However, I am facing two issues ...
This specific HTML content, which utilizes Bootstrap 4, is performing just as I had anticipated. <h6> 01 - 01 - Apache.wav <span class="badge badge-pill badge-secondary">Updated</span> <span class="badge badge-pill ba ...
So, here's a strange issue I'm facing. On my website, the background image changes with a smooth fadeIn/Out transition. Video: Website in action: Here is the HTML markup: <div class="fondo" onclick="descargar(2,500);descargar(1,500);"> ...
There is an issue with multiple checkboxes having the same ID in an asp.net repeater control. Users can select either email or phone against each record in the repeater rows. In the example below, there are two rows. If you select the email icon in the fi ...
There are two distinct forms on an HTML template named queries.html. One is for entering a company name and the other is for inputting keywords, as shown below. <form method="POST"> <p>Enter Company Name:</p> <p><input ...
I'm encountering an issue where I am unable to capture a captcha value that is inside an HTML element using the find_element() function. This is the code snippet I am working with: iframe = driver.find_element_by_xpath("//iframe\[@name=&apo ...
I'm working on a school project to create a mock website, but I'm facing an issue with my div elements being misaligned and showing up in the wrong place. Here's how it currently looks: [ Here's how I want it to look (designed with ph ...
I am currently in the process of building a website using Bootstrap 3.1.1. The body tag is set with a min-width of 800px. The information that I want to showcase must be presented in a grid format, specifically resembling the layout of a parking lot. Dis ...
Is it possible to utilize the v-icon component in Vuetify to display a custom icon that has been defined as an SVG in a file named my-icon.svg? This SVG file is located within the public/img directory of my project. How can I reference this file inside t ...
I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...
I have 2 questions regarding my project built in ANGULAR 5. Firstly, I am seeking a method to convert HTML into PDF format without it being rendered as an image. The resulting PDF should be interactive with selectable text by the user. Additionally, plea ...
Code in pages/index.js import React from 'react'; import axios from 'axios'; import ListProducts from '@/components/products/ListProducts'; const getProducts = async () => { const data = await axios.get(`${process.env.AP ...
I'm struggling to align these lines of text on the same left level, but I seem to be facing some issues. https://i.sstatic.net/bZIPV.png I've attempted it this way, however the output above is not what I expected. https://i.sstatic.net/cCFyw.png ...
I'm facing a challenge with aligning my navigation items in the center of my Bootstrap navbar. I don't want them all the way to the outside or completely centered, but rather have the left elements aligned to the center-left and right elements to ...
After creating a webpage, I realized that it wasn't responsive. Now I am in the process of recreating the page and have a dilemma on whether to use container or container-fluid. Based on some blogs I've read, container-fluid seems like a better o ...
Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer. <div class="main-template-body" id="main-template-body"> //content </div> ...
Could someone help me with an issue I'm having regarding resizing items on the screen in Angular when the browser window size changes? Here is my code snippet: // TS File height: number = 2.5; objHeight:number; screenHeight:number = window.innerHeig ...
function toggleSlideBox(x) { $("#"+x).slideToggle(300); } I am utilizing a JavaScript feature on buttons to create dropdowns that display forms, text, etc. When one button is clicked, it drops down along with the other two buttons, and when the ...
I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...