This question already has answers here:
Why doesn't inset box-shadow work over images?
(10 answers)
Closed 2 years ago.
Displaying an outer shadow on an ion-avatar item works fine, but when trying to display an inner shadow, nothing happens.
Here is a demo of this problem:
I tried to apply the inner-shadow on the img inside the ion-avatar but the result was the same.
This is a fix that was based on this answer.
The idea is to place the inner shadow inside the :after pseudo element:
ion-avatar {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 3px 3px 10px 0 #000000;
top: 0;
left: 0;
}
}
Related
I’m using the pseudo elements ::before and ::after to underline text on my about page: http://www.alexanderschlosser.de/wordpress/about.
For some weird reason everything works great on desktop, but no matter what mobile browser I use on my iPhone it won’t show the underlines. Or they actually show up for a split second, but disappear afterwards.
It’s even weirder as I use the exact same CSS styling for the main navigation and it works perfectly fine for those links on all devices.
Any idea what the problem might be?
_
Here’s the CSS
.linkBio::before {
content: "";
position: absolute !important;
z-index: -1 !important;
width: 100%;
height: 1px;
bottom: -1px;
left: 0;
background-color: #252526;
}
/*CREATE COLORED BACKGROUND AND HIDE IT*/
.linkBio::after {
content: "";
position: absolute !important;
z-index: -2 !important;
width: 100%;
height: 100%;
bottom: 0px;
left: 0;
background-color: #DFFAD6;
visibility: hidden;
/*opacity: 0;
-webkit-transition: all 0.05s ease-in-out 0s;
transition: all 0.05s ease-in-out 0s;*/
}
/*SHOW COLORED BACKGROUND ON HOVER*/
.linkBio:hover::after {
visibility: visible;
/*opacity: 1;*/
}
It's the z-index you've set for them. Change them to 0 and it will work as expected.
I know there is an option to set an image as tree background and make it to repeat if needed.But i want to draw horizontal lines in the tree background, so that it looks like a table.The horizontal line should fit the entire width of the tree.How can i do this in GWT?.Please help.
This should work. Add this class to your TreeItem:
.gwt-Tree table {
table-layout: fixed;
width: 100%;
}
.gwt-Tree table td:first-child {
width: 18px;
}
.myTreeItem {
margin-left: 0 !important;
padding: 3px 3px 3px 39px;
}
.myTreeItem, .myTreeItem > table {
border-bottom: solid 1px #464646;
}
I've been playing around with making shapes in CSS. I'm finding that it's all fine and dandy until you want to add a box-shadow or border to your element that was created with both a ::before and ::after pseudo element.
Here's an example I put together of a plus (+) icon made with two elements. I'm attempting to put a box-shadow on both the elements, but of course don't want the top most element's (::after, in this case) shadow to overlap the bottom element.
http://codepen.io/trevanhetzel/pen/Gsurk
Has anyone found any clever tricks around this?
Here's the code, by the way (Sass and Compass FTW!)
<a class="add"></a>
.add {
position: relative;
float: left;
padding: 2em;
background: green;
&::before {
content: "";
position: absolute;
left: 45%;
top: 25%;
width: 10%;
height: 50%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
&::after {
content: "";
position: absolute;
left: 25%;
top: 45%;
width: 50%;
height: 10%;
background: #fff;
#include box-shadow(-2px -2px 0px rgba(0, 0, 0, .75));
}
}
Which outputs something like this: http://t.hetz.co/Rpne
It has poor browser support at the moment but the filter:dropshadow property can be used
-webkit-filter: drop-shadow(4px 0px 1px black);
-moz-filter: drop-shadow(4px 0px 1px black);
filter: drop-shadow(4px 0px 1px black);
Codepen Example
I am trying to make a handle bar element with a nice textured line pseudo element that is horizontally and vertically centered in the middle of it.
I understand that lots of people do this effect with background images but I want this to be vector so that it works even on high density displays.
Demo: jsFiddle
The whole thing just uses a single element and uses this CSS:
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header_handle
{
width: 100%;
height: 7px;
position: relative;
background: #9e978b;
border-top: 1px solid #b8b1a5;
border-bottom: 1px solid #827c72;
text-align: center;
cursor: s-resize;
}
.header_handle:before
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
background: #ff0000;
width: 10px;
height: 100%;
}
.header_handle:after
{
content: '';
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
width: 42px;
height: 1px;
background: #ada599;
outline: 1px solid #ada599;
border-top: 1px solid #6b665e;
border-bottom: 1px solid #6b665e;
}
Here is a second demo that shows the basic effect in action at a bigger level. It just has aligning inline-block element and then the centered inline-block element.
The desired effect should look like this:
The first demo above works at heights above 22px and if you turn off the height attribute it expands to 22px so it seems to think the pseudo element is 22px or something like that.
What the heck is going on here?
Add font-size: 0; to the main element .header_handle. This eliminates any space between inline elements.
I got the trick from the Fighting the Space Between Inline Block Elements on CSS-Tricks.
Here's my problem: I'm showing an overlay (using this) with a message div that has rounded corners.
Here is my css code for message div:
#modal1
{
margin-left: auto;
margin-right: auto;
display: none;
width: 620px;
height: 150px;
position: relative;
background-color: #FFF;
border: 12px solid #FF771C;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
text-align: center;
}
And my problem is that I get a white "border" (if you look closely) in the upper left and right corners. Here is the image so you can see for yourself. Now, I "solved" this by putting top-left and -right border properties of webkit to 0px, but this is not a solution, so I'm asking if you have maybe some ideas? Btw, this is only developed for chrome that's why it's only -webkit up there in the code..
EDIT:
I found the solution on their forum http://flowplayer.org/tools/forum/40/46850
this seems to be the border of another div or element behind your rounded bordered div