I am trying recreate the shadowy effect around the text from this Dribbble. here is Image reference
I tried using radial gradient background on circular button with box shadow, but unable to achieve same effect.
Following is my css code:
button {
background: radial-gradient(#ccdaf4, #dbe5f4,#f9fbff);
box-shadow: 7px 7px 40px #f9fbff;
width: 3rem;
height:3rem;
border:none;
border-radius: 50%;
}
The problem is there is either sharp boundary between box shadow and border of button or box shadow is not vissible, What I am doing wrong?
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
I am using the last version 3.3.0, but since 3.2.0 I have this issue. The inferior round corners do not connect.
With 3.2.0:
With 3.1.1:
I just found if I add the following line:
background-color: #ffffff !important;
and changing the:
padding: 15px;
to
padding: 0px;
to the class:
.panel-body
it breaks the inferior round corners.
How can I force the panel-body to have a white background and 0px padding?
http://jsfiddle.net/Khrys/730sjq8n/
Add the following style:
.panel-body {
border-radius: 4px;
}
The issue was that while you gave the container a border and a border-radius, you had the content within the container a background of white with no border-radius. Therefore, you had a round box with a square block inside it, thus cutting off the border slightly.
Add a border radius to the content allowed the content to fit inside your container.
Alternatively, you can remove the background color:
.panel-body { background-color: transparent;
}
That would also be a fix.
So I want the background to be completely transparent on my icon so I have the code:
<a data-transition="slideup" href="#menu" data-icon="bars" data-role="button" data-iconpos="notext" data-iconshadow="false" class="ui-nodisc-icon">Menu</a>
But when I added the ui-nodisc-icon class, a strange grey circle appears around my icon:
Any ideas what's causing this and how it can be fixed?
For a transparent, borderless button, try this:
No text
.transparentButton {
background-color: transparent !important;
border: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
}
Here is a DEMO
The CSS removes the background color, the border, and the box-shadow assigned by the jQM framework.
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
The shadow setting I want to apply is:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.
P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:
Updated
Edit:
See the link below for another approach using css content and :after
http://css-tricks.com/triangle-with-shadow/
I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Caveat
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadow property. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform property is the key.
Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapes
Enjoy