Opera browser fails to render CSS3 box shadow effect

My menu features CSS3 effects on hover and active states, giving it a unique appearance.

Below is the CSS3 styling I have implemented:

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: ' ';
    position:absolute;
    z-index:51;
    width:0px;
    height:0px;
    left:50%;
    top:50%;
    box-shadow:0 0 35px 30px #ADD7E7;
    -moz-box-shadow:0 0 35px 30px  #ADD7E7;
    -webkit-box-shadow:0 0 35px 30px  #ADD7E7;
    border-radius:50%;


}

While this styling works perfectly in Firefox and Chrome, I am facing compatibility issues with Opera. Any assistance in resolving this matter would be greatly appreciated. Thank you.

cssopera

Answer №1

It appears that Opera requires the pseudo element to have a specified width and height, rather than being set to 0px. I recently tested the code below in Opera 11.62 and it seemed to function correctly.

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: '';
    position:absolute;
    z-index:51;
    width:1px;
    height:1px;
    left:50%;
    top:50%;
    background: #ADD7E7;
    box-shadow:0 0 35px 30px #ADD7E7;
    -moz-box-shadow:0 0 35px 30px  #ADD7E7;
    -o-box-shadow:0 0 35px 30px  #ADD7E7;
    border-radius:50%;
}

Answer №2

Here is a code snippet for creating a shadow effect:

HTML

<div class="shadow-bringer shadow"> HI ! Welcome. </div>

CSS

.shadow-bringer {
    background: none repeat scroll 0 0 #FFFFA2;
    height: 100px;
    margin: 20px auto;
    padding: 5px;
    width: 100px;
}
.shadow {
    box-shadow: 0 0 8px #CCCCCC;
    -moz-box-shadow: 0px 0px 8px #ccc;/* for mozila*/
-webkit-box-shadow: 0px 0px 8px #ccc;
    /* For IE upto 5.5 not for 9*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=45, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=225, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=315, Strength=3);
}

For more information and tutorials on creating cross-browser drop shadows, you can visit the following links:

1. 2.http://css-tricks.com/snippets/css/css-box-shadow/

Answer №3

As mentioned on css3please, this code snippet is recommended: 

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

To test if it works in your browser, visit:

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

What could be the reason for the top alignment of only a portion of the cell

Here is the code snippet I am working with: <html> <head> <style> table.t_group { border: 2px solid black; margin: 0 auto 0 auto; } table.t_group > tbo ...

htmlcss

Loading CSS dynamically at runtime can be seen as a mix of both success and failure

I have been attempting to optimize my app by loading fonts on demand. By retrieving fonts from a project directory generated by the app, it is able to gather all necessary data. My primary concern is whether there is an equivalent of 'app-storage://& ...

cssruntimeexecutiontidesdk

Include a stylesheet as a prop when rendering a functional component

Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...

javascriptcssreactjsjsxnext.js

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

What about a Material UI-inspired homepage design?

Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...

cssreactjsuser-interfacematerial-uitheming

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

javascripthtmlcss

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

javascriptjqueryhtmlcss

Custom Jquery function is failing to position divs correctly within ajax-loaded content

I recently coded a custom function that efficiently positions absolute divs within a container by calculating top positions and heights: $.fn.gridB = function() { var o = $(this); //UPDATED from var o = $(this[0]); o.each(function() { var ...

jquerycssajaxcallbackpositioning

What is the best way to ensure the hamburger menu stays perfectly centered?

My menu is currently aligned to the right and scrolls with the user profile. I want the menu to always be centered and the profile to stay on the right side. I am working with Angular 12 and Bootstrap 5 for this project. Here is the code I have been usin ...

htmlcssangularnavbarbootstrap-5

Struggling with CSS, seeking improvements to align with my previous coding style

After spending a considerable amount of time working on my game, I made the decision to change my navigation bars to buttons. However, I'm facing issues while trying to finalize the style that I had previously. Here is the old code fiddle: https://js ...

htmlcss

The boundary of embedded components

I am looking for CSS code that will allow me to arrange all elements with specific indents, such as placing the first element on the left side of the page, followed by an image with some indentation, and so on. <div class="container-fluid"> &l ...

htmlcss

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

htmlcsssvg

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

csstwitter-bootstrapbootstrap-4

placing one SWF file above another

Is it feasible to layer multiple SWF files on top of one another directly? I have been experimenting with divs and different z-index values, but I am unsure about how the Flash player comes into play. Is my assumption correct that each SWF has its own indi ...

htmlcssflash

XSLT - Dividing table into three columns while maintaining continuity on the same page

I'm looking for a solution where I can display a long two column table in a three-column page layout. The table should seamlessly flow from one column to the next, maintaining its headers throughout. Current attempts show the entire table in just one ...

cssxsltpdf

When hovering over one item, it causes a hover effect on an item in a SEPARATE container

My goal is to create a unique interaction between links and images, where hovering over a link will transform the corresponding image below it, and vice versa. I have been searching for solutions but have only found methods that work when all items are wit ...

htmlcss

Footer division misbehaving

My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...

htmlcss

Having trouble getting the hover effect to work when selecting a different section of the SVG

In my SVG checkbox design, I have a circle element surrounding a polyline element (which acts as the checkmark). The boundaries of the icon extend beyond the circle, causing hover styles to trigger even when hovering outside the circle. I want to change st ...

cssreactjsstyled-components

Ensuring proper alignment between labels and input

How can I align a label and a range input field on the same line? I have tried using display: inline-block, but it does not seem to work. There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effect ...

htmlcssformsinput

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss